最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

前置知識

dom 更新

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

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

簡單理解就是下邊的樣子：

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

html 引入 bundle.js 。

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

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

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

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

在 js 線程中如果修改同一個 dom 元素，無論修改多少次，最終輪到渲染線程的時候，渲染線程當(dāng)前讀到的 dom 是啥就會是啥。

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

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

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

這里簡單說一下，不細(xì)講了。

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

js 線程中，通過