日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

前置知識(shí)

dom 更新

瀏覽器中有一個(gè) js 引擎線(xiàn)程執(zhí)行我們的 js 代碼，同時(shí)還有一個(gè) GUI 渲染線(xiàn)程來(lái)進(jìn)行繪圖，并且兩個(gè)線(xiàn)程是互斥的，只能交替著進(jìn)行。

而dom 更新是在 js 線(xiàn)程中進(jìn)行的，因此 dom 更新了并不代表我們就一定可以看到，只有當(dāng)渲染線(xiàn)程把更新的 dom 繪制完畢我們才會(huì)看到。

簡(jiǎn)單理解就是下邊的樣子：

舉一個(gè)極端的例子，如果我們?cè)?js 線(xiàn)程里修改了 dom ，但某種原因使得 js 線(xiàn)程一直在執(zhí)行，沒(méi)有輪到渲染線(xiàn)程，那么我們就永遠(yuǎn)看不到更新后 dom 了。

html 引入 bundle.js 。

bundle.js 首先修改 dom ，然后執(zhí)行一個(gè)死循環(huán)。

document.getElementById("root").innerText = "hello";
while (true) {}

此時(shí)頁(yè)面就永遠(yuǎn)是空白了。但事實(shí)上我們的 dom 已經(jīng)更新了，只是沒(méi)有輪到渲染線(xiàn)程展示出來(lái)。

只更新最后一次結(jié)果

在 js 線(xiàn)程中如果修改同一個(gè) dom 元素，無(wú)論修改多少次，最終輪到渲染線(xiàn)程的時(shí)候，渲染線(xiàn)程當(dāng)前讀到的 dom 是啥就會(huì)是啥。

document.getElementById("root").innerText = "hello";
document.getElementById("root").innerText = "hello2";
document.getElementById("root").innerText = "hello3";
document.getElementById("root").innerText = "liang";

上邊 dom 變化了多次，但屏幕上只會(huì)看到 liang。

宏任務(wù)微任務(wù)任務(wù)隊(duì)列

這里簡(jiǎn)單說(shuō)一下，不細(xì)講了。

• 宏任務(wù)生成方式：script 標(biāo)簽, setTimeout, setInterval 等
• 微任務(wù)生成方式：Promise, MutationObserver 等。

js 線(xiàn)程中，通過(guò)