小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

前言

我们已经知道在浏览器的一个Event Loop「一个微任务在DOM渲染前执行」，那么在这个Event Loop里，「多个微任务之间，会进行DOM的渲染吗」

代码

先看一段代码

html

<ul id="text"></ul>

js

const divs = document.getElementById("text");

        setTimeout(() => {
            console.log(divs.outerHTML, "setTimeout");
            var big = document.createElement("li");
            big.innerHTML = "我是setTimeout插入的内容";
            divs.appendChild(big);
        }, 0);

        new Promise((resolve, reject) => {
            resolve("我是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("我是Promise.then2插入的内容");
        }).then((msg) => {
            console.log(divs.outerHTML, "Promise.then2");
            divs.setAttribute("style", "color:red");
        });

        new Promise((resolve, reject) => {
            resolve("我是Promise.then3插入的内容");
        }).then((msg) => {
            console.log(divs.outerHTML, "Promise.then3");
            var small = document.createElement("li");
            small.innerHTML = msg;
            divs.appendChild(small);
        });

结果

日志

见下图，其中，then2里对dom的操作是为了检测重绘，then1里对dom的操作是为了检测回流，从日志的角度来看，不论是哪种渲染机制，都会在多次微任务执行的间隙进行

DOM

总结

多个微任务之间，会进行DOM的渲染，并且不论是回流还是重绘