Details on macrotasks and microtasks in JavaScript
1. What are microtasks? 2. What are the macro tasks?
3. Case
<script>
console.log(1)
setTimeout(()=>{
console.log("2")
},0)
Promise.resolve().then(()=>{
console.log('3')
})
console.log(4)
</script> We found that the order of printing is Why is it in this order? Print 1-4 first. There is definitely no problem. Why is 3 printed first and then 2? Because 3 is 2 is Microtasks are executed earlier than macrotasks. So 3 is executed first and then 2
3.1 Conclusion
4. Code Examples
<body>
<div id="app"></div>
<script>
// This section is DOM rendering let app=document.getElementById("app")
let cont='<p>I am a p tag</p>'
app.append(cont)
// DOM rendering ends console.log(1)
setTimeout(()=>{
console.log("2")
alert('setTimeout2')
},0)
Promise.resolve().then(()=>{
console.log('3')
alert('3')
})
console.log(4)
</script>
</body>4.1 Code AnalysisExecution analysis of the above code: You must execute Then according to the micro task first and then the macro task It outputs 3 and then pops up 3 Then it says output 2 and pops up Because there is a So then comes So after outputting Then output 2 and then 4.2 Conclusion and Application ScenariosMicrotask>DOM rendering>Macrotask See the following example Application scenarios of this conclusion We have all done echarts. We know when rendering echarts. The node can only be rendered after the DOM of the page is rendered. So some friends will put the request timing in the monitored() life cycle This ensures that the returned data can be rendered normally on the page. In fact, based on the above conclusion. You can request data in create. When I came back. The DOM is definitely rendered. Because the request is a macro task. The execution time of the macro task is after DOM rendering. This is the end of this article about the details of macrotasks and microtasks in You may also be interested in:
|
<<: A few front-end practice summaries of Alipay's new homepage
Recommend
Implementation of Nginx load balancing cluster
(1) Experimental environment youxi1 192.168.5.101...
CSS3 implements footer fixed at the bottom (always at the bottom no matter how high the page is)
Preface Fix the footer area at the bottom. No mat...
How to configure wordpress with nginx
Before, I had built WordPress myself, but at that...
How to build a virtual machine with vagrant+virtualBox
1. Introduction Vagrant is a tool for building an...
MySQL graphical management tool Navicat installation steps
Table of contents Preface 1. Arrange the installa...
Solution to the problem of z-index not taking effect in CSS3
I recently wrote a combination of CSS3 and js, an...
Analysis of the situation where js determines and informs the support of CSS attributes (values)
When we want to use a new CSS feature, we always ...
Steps to install MySQL 5.7 in binary mode and optimize the system under Linux
This article mainly introduces the installation/st...
Use of vuex namespace
Table of contents Since Vuex uses a single state ...
MySQL database monitoring software lepus usage problems and solutions
When using lepus3.7 to monitor the MySQL database...
Implementation of two basic images for Docker deployment of Go
1. golang:latest base image mkdir gotest touch ma...
Design theory: On the issues of scheme, resources and communication
<br />This problem does not exist in many sm...
Common usage of regular expressions in Mysql
Common usage of Regexp in Mysql Fuzzy matching, c...
Talking about the practical application of html mailto (email)
As we all know, mailto is a very practical HTML ta...
Install Ubuntu 18 without USB drive under Windows 10 using EasyUEFI
1. Check BIOS First check which startup mode your...