關(guān)于修改DOM是異步還是同步的問(wèn)題

qingshanli1988 發(fā)布于2019-08-19 18:37 / 1019人閱讀

摘要：還請(qǐng)同學(xué)跟我多多探討關(guān)于修改是異步還是同步的問(wèn)題先來(lái)看代碼上述代碼的結(jié)果完全就是同步的表現(xiàn)，如果是異步的話，毫無(wú)疑問(wèn)，第一個(gè)下的每個(gè)內(nèi)容都應(yīng)該是，第二個(gè)也應(yīng)該是。

回 @bf 同學(xué)

本篇文章不是筆記也不是心得，而是關(guān)于一個(gè)問(wèn)題的討論，問(wèn)題最初出現(xiàn)于https://segmentfault.com/q/1010000005630545?_ea=903562

由于 @bf 同學(xué)不方便加QQ/微信，而這個(gè)問(wèn)題又比較大，在問(wèn)答評(píng)論里不好描述清楚，so，趁著周末專門寫了一篇文章來(lái)回應(yīng) @bf 同學(xué)

@bf 同學(xué)，提到了一個(gè)觀點(diǎn)：對(duì)DOM的修改永遠(yuǎn)是異步的

當(dāng)時(shí)就震驚到我了（可能技術(shù)不達(dá)標(biāo)，少見(jiàn)多怪的緣故，哈哈）

說(shuō)實(shí)話，干了好幾年開(kāi)發(fā)，第一次明確地聽(tīng)到有人這樣說(shuō)，根據(jù)自己看的書及一些javascript編程經(jīng)驗(yàn)來(lái)說(shuō)，起初我認(rèn)為是錯(cuò)誤的。

然后看了看 @bf 同學(xué)的回復(fù)，能自圓其說(shuō)，還說(shuō)的頭頭是道，所以我真的以為對(duì)DOM的修改永遠(yuǎn)是異步的是正確的。然后懷著震驚的心情（因?yàn)楦?jīng)驗(yàn)相違背），還寫了一篇博客記錄http://www.liyanshan.com/2016/06/09/%E5%AF%B9DOM%E7%9A%84%E4%BF%AE%E6%94%B9%E6%B0%B8%E8%BF%9C%E9%83%BD%E6%98%AF%E5%BC%82%E6%AD%A5%E7%9A%84/

經(jīng)過(guò)這么些天的發(fā)酵和消化，覺(jué)得對(duì)這個(gè)觀點(diǎn)又回到了最初的認(rèn)識(shí)（即這個(gè)觀點(diǎn)是錯(cuò)的）。

還請(qǐng) @bf 同學(xué)跟我多多探討！

關(guān)于javascript修改dom是異步還是同步的問(wèn)題：

先來(lái)看代碼：

上述代碼的結(jié)果完全就是同步的表現(xiàn)，如果是異步的話，毫無(wú)疑問(wèn)，第一個(gè)ul下的li每個(gè)內(nèi)容都應(yīng)該是5，第二個(gè)也應(yīng)該是5。

這是數(shù)學(xué)中的反證法。即一個(gè)命題，哪怕我找出一個(gè)特例（何況我能找出很多例子）能推翻這個(gè)命題，那么這個(gè)命題就不成立。

@bf 同學(xué)可能會(huì)說(shuō)了，他也用反證法，比如script標(biāo)簽的加載，來(lái)證明DOM修改是異步的

但是這個(gè)特例的問(wèn)題在于：

把下載的異步性當(dāng)成了DOM修改的異步性

script標(biāo)簽加載是異步的，因?yàn)橐呔W(wǎng)絡(luò)（比如走網(wǎng)絡(luò)的ajax和圖片下載等都是異步的，當(dāng)然ajax也可以寫成同步的），也就是說(shuō)，瀏覽器開(kāi)了一個(gè)線程下載要用的script，但是馬上返回（交給HTTP請(qǐng)求線程就不管了，請(qǐng)求結(jié)束，請(qǐng)求線程會(huì)把結(jié)果放入事件隊(duì)列里），接著執(zhí)行或下載其他部分。其實(shí)這個(gè)問(wèn)題我在引起這個(gè)討論的問(wèn)題上已經(jīng)回答了（可能回答的沒(méi)有那么清楚）。

然后又陸陸續(xù)續(xù)地看了一些書，查了一些資料，問(wèn)了一些大牛，越來(lái)越堅(jiān)信DOM修改是同步的

JavaScript異步編程第一章 - 異步的I/O函數(shù)（1.2.1）

這個(gè)也符合我最初跟 @bf 同學(xué)的解釋：修改DOM是同步的，但是渲染是異步的。因?yàn)镴avaScript引擎線程跟GUI渲染線程是互斥的，即我執(zhí)行的時(shí)候，你就靠邊站，我執(zhí)行完你才能執(zhí)行

詳見(jiàn)我2014年寫的一篇關(guān)于異步的文章（當(dāng)時(shí)就是記錄一下心得與筆記，也不會(huì)自己搭博客，也不會(huì)MD，所以請(qǐng) @bf 同學(xué)湊合看）http://blog.sina.com.cn/s/blog_6fd55a970102v64x.html

在群里提問(wèn)

這個(gè)其實(shí)就相當(dāng)于回答了js是同步修改的。。因?yàn)檫@是三個(gè)異步函數(shù)！

而 @bf 同學(xué)在后面的回復(fù)中，提到了一篇文章https://leozdgao.me/why-dom-slow/，額，我看了看這篇文章，發(fā)現(xiàn)其實(shí)我今年年初就看過(guò)了，當(dāng)時(shí)貌似是用瀏覽器重排和重繪搜索到的。。

這篇文章主要是講重排和重繪及性能優(yōu)化一類的知識(shí)。

@bf 同學(xué)可能受到這句話的影響：

一般情況下，瀏覽器的layout是lazy的，也就是說(shuō)：在js腳本執(zhí)行時(shí)，是不會(huì)去更新DOM的，任何對(duì)DOM的修改都會(huì)被暫存在一個(gè)隊(duì)列中，在當(dāng)前js的執(zhí)行上下文完成執(zhí)行后，會(huì)根據(jù)這個(gè)隊(duì)列中的修改，進(jìn)行一次layout。

這個(gè)其實(shí)說(shuō)明不了修改DOM永遠(yuǎn)是異步的，這個(gè)是JavaScript引擎實(shí)現(xiàn)層面上的知識(shí)，是對(duì)js修改DOM的優(yōu)化，它放入的隊(duì)列其實(shí)不是事件隊(duì)列，如果放到了事件隊(duì)列中，才是異步的。。C++實(shí)現(xiàn)一個(gè)隊(duì)列是何其簡(jiǎn)單啊！js實(shí)現(xiàn)隊(duì)列更簡(jiǎn)單！只是實(shí)現(xiàn)層面的東西，對(duì)程序猿都是透明的。。所以沒(méi)啥可說(shuō)的。只能幫助我們理解重排和重繪的機(jī)制，而不能得出修改DOM永遠(yuǎn)是異步的結(jié)論。。