Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

We already know that in an Event Loop of the browser, “a microtask is executed before DOM rendering”, so in this Event Loop, “Will DOM rendering take place between multiple microtasks?”

code

Let’s take a look at some code

html

<ul id="text"></ul>
Copy the code

js

const divs = document.getElementById("text"); setTimeout(() => { console.log(divs.outerHTML, "setTimeout"); var big = document.createElement("li"); Big.innerhtml = "I am setTimeout inserting the content "; divs.appendChild(big); }, 0); New Promise((resolve, reject) => {resolve(" I am promise.then1 "); }).then((msg) => { console.log(divs.outerHTML, "Promise.then1"); var small = document.createElement("li"); small.innerHTML = msg; divs.appendChild(small); }); New Promise((resolve, reject) => {resolve(" I am promise.then2 "); }).then((msg) => { console.log(divs.outerHTML, "Promise.then2"); divs.setAttribute("style", "color:red"); }); New Promise((resolve, reject) => {resolve(" I am promise.then3 "); }).then((msg) => { console.log(divs.outerHTML, "Promise.then3"); var small = document.createElement("li"); small.innerHTML = msg; divs.appendChild(small); });Copy the code

The results of

The log

See below, where then2 manipulates the DOM to detect redraw and then1 manipulates the DOM to detect backflow. From a logging perspective, either rendering mechanism takes place between multiple microtasks

DOM

conclusion

Between multiple microtasks, DOM is rendered, both by backflow and by redrawing