資訊專(zhuān)欄INFORMATION COLUMN
摘要：重繪元素做了一些不影響排版的改變，比如背景色下劃線等等，只需要重新繪制的過(guò)程，叫做重繪。顯然回流帶來(lái)的代價(jià)大于重繪，因?yàn)橹乩L僅僅是重新畫(huà)一遍元素而已，但是重繪是重新計(jì)算重新畫(huà)。不然這會(huì)導(dǎo)致大量地讀寫(xiě)這個(gè)結(jié)點(diǎn)的屬性。
瀏覽器的大概工作流程
以普通的HTML頁(yè)面為例：
解析HTML文檔，生成dom樹(shù)
解析css產(chǎn)生css規(guī)則樹(shù)
解析JavaScript，通過(guò)DOM-API來(lái)操作dom樹(shù)和css規(guī)則樹(shù)
通過(guò)dom樹(shù)和css規(guī)則樹(shù)來(lái)構(gòu)造渲染樹(shù)（rendering tree）
調(diào)用操作系統(tǒng)的GUI接口畫(huà)頁(yè)面
回流（reflow）和重繪（repaint）回流：
元素的大小尺寸、位置發(fā)生變化時(shí)，會(huì)重新計(jì)算渲染樹(shù)，頁(yè)面要進(jìn)行重新排版工作，這個(gè)過(guò)程即是回流。
重繪：
元素做了一些不影響排版的改變，比如背景色、下劃線等等，只需要重新繪制的過(guò)程，叫做重繪。
顯然回流帶來(lái)的代價(jià)大于重繪，因?yàn)橹乩L僅僅是重新畫(huà)一遍元素而已，但是重繪是重新計(jì)算+重新畫(huà)。
回流的原因：Initial。網(wǎng)頁(yè)初始化的時(shí)候。
Incremental。一些Javascript在操作DOM Tree時(shí)。
Resize。其些元件的尺寸變了
StyleChange。如果CSS的屬性發(fā)生變化了。
Dirty。幾個(gè)Incremental的reflow發(fā)生在同一個(gè)元素的子樹(shù)上。
更具體的說(shuō)，就是這些常見(jiàn)的操作會(huì)引起回流：
調(diào)整窗口大小
字體大小
樣式表變動(dòng)
元素內(nèi)容變化，尤其是輸入控件
CSS偽類(lèi)激活，在用戶交互過(guò)程中發(fā)生
DOM操作，DOM元素增刪、修改
width, clientWidth, scrollTop等布局寬高的計(jì)算
ps：但是瀏覽器并不會(huì)在我們一進(jìn)行上面的操作就進(jìn)行回流，瀏覽器會(huì)積攢一批reflow然后一起進(jìn)行回流，不過(guò)有的操作會(huì)讓瀏覽器立馬進(jìn)行回流，比如resize窗口，改變了頁(yè)面默認(rèn)的字體，或者說(shuō)獲取以下這些值：
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
IE中的 getComputedStyle(), 或 currentStyle
如何減少reflow和repaint避免頻繁的修改樣式，可以將要修改的多個(gè)樣式定義為一個(gè)class類(lèi)，然后將類(lèi)名一次賦值即可
把dom離線操作:
使用documentFragment 對(duì)象在內(nèi)存里操作DOM
先把DOM給display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他顯示出來(lái)。
clone一個(gè)DOM結(jié)點(diǎn)到內(nèi)存里，然后想怎么改就怎么改，改完后，和在線的那個(gè)的交換一下
不要把DOM結(jié)點(diǎn)的屬性值放在一個(gè)循環(huán)里當(dāng)成循環(huán)里的變量。不然這會(huì)導(dǎo)致大量地讀寫(xiě)這個(gè)結(jié)點(diǎn)的屬性。
為動(dòng)畫(huà)的HTML元件使用fixed或absoult的position，那么修改他們的CSS是不會(huì)reflow的，因?yàn)槊撾x了文檔流
參考減少重排與重繪
瀏覽器的渲染原理簡(jiǎn)介
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113598.html
摘要：重繪元素做了一些不影響排版的改變，比如背景色下劃線等等，只需要重新繪制的過(guò)程，叫做重繪。顯然回流帶來(lái)的代價(jià)大于重繪，因?yàn)橹乩L僅僅是重新畫(huà)一遍元素而已，但是重繪是重新計(jì)算重新畫(huà)。不然這會(huì)導(dǎo)致大量地讀寫(xiě)這個(gè)結(jié)點(diǎn)的屬性。 瀏覽器的大概工作流程 以普通的HTML頁(yè)面為例： 解析HTML文檔，生成dom樹(shù) 解析css產(chǎn)生css規(guī)則樹(shù) 解析JavaScript，通過(guò)DOM-API來(lái)操作dom樹(shù)和...
摘要：之后，如果渲染樹(shù)發(fā)生了變動(dòng)，那么可能會(huì)觸發(fā)回流或重繪中的一個(gè)或二者。在書(shū)寫(xiě)時(shí)要避免不必要的層級(jí)，書(shū)寫(xiě)時(shí)避免嵌套過(guò)深規(guī)則過(guò)于復(fù)雜，尤其是后代選擇器，匹配選擇器也會(huì)耗費(fèi)更多的。 剛?cè)胄星岸说臅r(shí)候是不是經(jīng)常看到有文章說(shuō)盡量不要用CSS通配符*，CSS選擇器層疊最好不要超過(guò)三層，HTML少使用table，結(jié)構(gòu)也要盡量簡(jiǎn)單一些...這一切說(shuō)的不無(wú)道理，過(guò)多的使用確實(shí)會(huì)造成瀏覽器渲染的性能降低，當(dāng)...
摘要：刨根問(wèn)底，這里說(shuō)的成本，到底高在哪兒呢什么是文檔對(duì)象模型什么是可能很多人第一反應(yīng)就是等標(biāo)簽至少我是，但要知道，是，是，對(duì)象模型，是為提供的。操作具體的成本，說(shuō)到底是造成瀏覽器回流和重繪，從而消耗資源。 從我接觸前端到現(xiàn)在，一直聽(tīng)到的一句話：操作DOM的成本很高，不要輕易去操作DOM。尤其是React、vue等MV*框架的出現(xiàn)，數(shù)據(jù)驅(qū)動(dòng)視圖的模式越發(fā)深入人心，jQuery時(shí)代提供的強(qiáng)大便...
摘要：刨根問(wèn)底，這里說(shuō)的成本，到底高在哪兒呢什么是文檔對(duì)象模型什么是可能很多人第一反應(yīng)就是等標(biāo)簽至少我是，但要知道，是，是，對(duì)象模型，是為提供的。操作具體的成本，說(shuō)到底是造成瀏覽器回流和重繪，從而消耗資源。 從我接觸前端到現(xiàn)在，一直聽(tīng)到的一句話：操作DOM的成本很高，不要輕易去操作DOM。尤其是React、vue等MV*框架的出現(xiàn)，數(shù)據(jù)驅(qū)動(dòng)視圖的模式越發(fā)深入人心，jQuery時(shí)代提供的強(qiáng)大便...
摘要：回流重繪及其優(yōu)化渲染過(guò)程渲染引擎通過(guò)通過(guò)網(wǎng)絡(luò)請(qǐng)求接收渲染內(nèi)容解析抽象抽象出布局繪畫(huà)抽象渲染引擎的第一步是解析文檔并將解析的元素轉(zhuǎn)換為樹(shù)中的實(shí)際節(jié)點(diǎn)。 回流、重繪及其優(yōu)化 渲染過(guò)程 渲染引擎通過(guò)通過(guò)網(wǎng)絡(luò)請(qǐng)求接收渲染內(nèi)容 解析HTML抽象DOM tree 抽象出Render tree 布局（layout）render tree 繪畫(huà)render tree 抽象DOM tree 渲染引擎...
閱讀 787·2021-11-12 10:36
閱讀 3363·2021-09-08 10:44
閱讀 2739·2019-08-30 11:08
閱讀 1393·2019-08-29 16:12
閱讀 2667·2019-08-29 12:24
閱讀 888·2019-08-26 10:14
閱讀 676·2019-08-23 18:32
閱讀 1160·2019-08-23 17:52
