資訊專欄INFORMATION COLUMN
摘要：還請同學(xué)跟我多多探討關(guān)于修改是異步還是同步的問題先來看代碼上述代碼的結(jié)果完全就是同步的表現(xiàn)，如果是異步的話，毫無疑問，第一個下的每個內(nèi)容都應(yīng)該是，第二個也應(yīng)該是。
回 @bf 同學(xué)
本篇文章不是筆記也不是心得，而是關(guān)于一個問題的討論，問題最初出現(xiàn)于https://segmentfault.com/q/1010000005630545?_ea=903562
由于 @bf 同學(xué)不方便加QQ/微信，而這個問題又比較大，在問答評論里不好描述清楚，so，趁著周末專門寫了一篇文章來回應(yīng) @bf 同學(xué)
@bf 同學(xué)，提到了一個觀點：對DOM的修改永遠(yuǎn)是異步的
當(dāng)時就震驚到我了（可能技術(shù)不達(dá)標(biāo)，少見多怪的緣故，哈哈）
說實話，干了好幾年開發(fā)，第一次明確地聽到有人這樣說，根據(jù)自己看的書及一些javascript編程經(jīng)驗來說，起初我認(rèn)為是錯誤的。
然后看了看 @bf 同學(xué)的回復(fù)，能自圓其說，還說的頭頭是道，所以我真的以為對DOM的修改永遠(yuǎn)是異步的是正確的。然后懷著震驚的心情（因為跟經(jīng)驗相違背），還寫了一篇博客記錄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)過這么些天的發(fā)酵和消化，覺得對這個觀點又回到了最初的認(rèn)識（即這個觀點是錯的）。
還請 @bf 同學(xué)跟我多多探討 ！
關(guān)于javascript修改dom是異步還是同步的問題：
先來看代碼：
上述代碼的結(jié)果完全就是同步的表現(xiàn)，如果是異步的話，毫無疑問，第一個ul下的li每個內(nèi)容都應(yīng)該是5，第二個也應(yīng)該是5。
這是數(shù)學(xué)中的反證法。即一個命題，哪怕我找出一個特例（何況我能找出很多例子）能推翻這個命題，那么這個命題就不成立。
@bf 同學(xué)可能會說了，他也用反證法，比如script標(biāo)簽的加載，來證明DOM修改是異步的
但是這個特例的問題在于：
把下載的異步性當(dāng)成了DOM修改的異步性
script標(biāo)簽加載是異步的，因為要走網(wǎng)絡(luò)（比如走網(wǎng)絡(luò)的ajax和圖片下載等都是異步的，當(dāng)然ajax也可以寫成同步的），也就是說，瀏覽器開了一個線程下載要用的script，但是馬上返回（交給HTTP請求線程就不管了，請求結(jié)束，請求線程會把結(jié)果放入事件隊列里），接著執(zhí)行或下載其他部分。其實這個問題我在引起這個討論的問題上已經(jīng)回答了（可能回答的沒有那么清楚）。
然后又陸陸續(xù)續(xù)地看了一些書，查了一些資料，問了一些大牛，越來越堅信DOM修改是同步的
JavaScript異步編程第一章 - 異步的I/O函數(shù)（1.2.1）
這個也符合我最初跟 @bf 同學(xué)的解釋：修改DOM是同步的，但是渲染是異步的。因為JavaScript引擎線程跟GUI渲染線程是互斥的，即我執(zhí)行的時候，你就靠邊站，我執(zhí)行完你才能執(zhí)行
詳見我2014年寫的一篇關(guān)于異步的文章（當(dāng)時就是記錄一下心得與筆記，也不會自己搭博客，也不會MD，所以請 @bf 同學(xué)湊合看）http://blog.sina.com.cn/s/blog_6fd55a970102v64x.html
在群里提問
這個其實就相當(dāng)于回答了js是同步修改的。。因為這是三個異步函數(shù)！
而 @bf 同學(xué)在后面的回復(fù)中，提到了一篇文章https://leozdgao.me/why-dom-slow/，額，我看了看這篇文章，發(fā)現(xiàn)其實我今年年初就看過了，當(dāng)時貌似是用瀏覽器重排和重繪搜索到的。。
這篇文章主要是講 重排和重繪及性能優(yōu)化一類的知識。
@bf 同學(xué)可能受到這句話的影響：
一般情況下，瀏覽器的layout是lazy的，也就是說：在js腳本執(zhí)行時，是不會去更新DOM的，任何對DOM的修改都會被暫存在一個隊列中，在當(dāng)前js的執(zhí)行上下文完成執(zhí)行后，會根據(jù)這個隊列中的修改，進(jìn)行一次layout。
這個其實說明不了修改DOM永遠(yuǎn)是異步的，這個是JavaScript引擎實現(xiàn)層面上的知識，是對js修改DOM的優(yōu)化，它放入的隊列其實不是事件隊列，如果放到了事件隊列中，才是異步的。。C++實現(xiàn)一個隊列是何其簡單??！js實現(xiàn)隊列更簡單！只是實現(xiàn)層面的東西，對程序猿都是透明的。。所以沒啥可說的。只能幫助我們理解重排和重繪的機制，而不能得出修改DOM永遠(yuǎn)是異步的結(jié)論。。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79774.html
摘要：關(guān)于異步應(yīng)該很多地方都說過，是單線程的，嚴(yán)格的說，是指引擎中負(fù)責(zé)解釋和執(zhí)行代碼的線程只有一個，除此之外，其實還有事件觸發(fā)線程請求線程等，因此，應(yīng)該說同步是單線程可能更準(zhǔn)確些。 作者：心葉時間：2019-03-08 09:45 我的理解 先列出我的理解，然后再從具體的例子中說明： DOM操作本身應(yīng)該是同步的（當(dāng)然，我說的是單純的DOM操作，不考慮ajax請求后渲染等） DOM操作之后導(dǎo)...
摘要：根本原因在于，并不是真正意義上的異步操作，它只是模擬了異步的行為。而合成事件和生命周期函數(shù)中，是受控制的，其會將設(shè)置為，從而走的是類似異步的那一套?？偨Y(jié)此處總結(jié)是直接引用了只在合成事件和鉤子函數(shù)中是異步的，在原生事件和中都是同步的。 如何使用setState 在 React 日常的使用中，一個很重要的點就是，不要直接去修改 state。例如：this.state.count = 1是無...
摘要：主線程從任務(wù)隊列中讀取事件，這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為事件循環(huán)。上面也提到，在到達(dá)指定時間時，定時器就會將相應(yīng)回調(diào)函數(shù)插入任務(wù)隊列尾部。這就是定時器功能。關(guān)于定時器的重要補充定時器包括與兩個方法。 一、引子 本文介紹JavaScript運行機制，這一部分比較抽象，我們先從一道面試題入手： console.log(1); setTimeout(function()...
摘要：主線程從任務(wù)隊列中讀取事件，這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為事件循環(huán)。上面也提到，在到達(dá)指定時間時，定時器就會將相應(yīng)回調(diào)函數(shù)插入任務(wù)隊列尾部。這就是定時器功能。關(guān)于定時器的重要補充定時器包括與兩個方法。 一、引子 本文介紹JavaScript運行機制，這一部分比較抽象，我們先從一道面試題入手： console.log(1); setTimeout(function()...
摘要：主線程從任務(wù)隊列中讀取事件，這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為事件循環(huán)。上面也提到，在到達(dá)指定時間時，定時器就會將相應(yīng)回調(diào)函數(shù)插入任務(wù)隊列尾部。這就是定時器功能。關(guān)于定時器的重要補充定時器包括與兩個方法。 一、引子 本文介紹JavaScript運行機制，這一部分比較抽象，我們先從一道面試題入手： console.log(1); setTimeout(function()...
閱讀 3884·2021-11-25 09:43
閱讀 2280·2021-11-23 10:13
閱讀 902·2021-11-16 11:44
閱讀 2432·2019-08-29 17:24
閱讀 1454·2019-08-29 17:17
閱讀 3534·2019-08-29 11:30
閱讀 2651·2019-08-26 13:23
閱讀 2406·2019-08-26 12:10
