1.瀏覽器渲染機(jī)制
- 瀏覽器采用流式布局（flow Based Layout）
- 瀏覽器會(huì)把HTML解析成DOM,把css解析成CSSDM,DOM和CSSOM合并就會(huì)產(chǎn)生渲染樹(shù)（Render Tree）
- 有了renderTree 我們就知道節(jié)點(diǎn)的樣式，然后計(jì)算大小和位置，把節(jié)點(diǎn)繪制到頁(yè)面上
- 由于瀏覽器的流式布局，對(duì)renderTree的計(jì)算通常遍歷一次就可以完成，table內(nèi)部元素除外，他們可能要計(jì)算多次，通常要花費(fèi)3倍于同等元素的時(shí)間，這也是為什么要避免使用table布局的原因之一
2.重繪
由于節(jié)點(diǎn)的幾何屬性發(fā)生改變或者由于樣式改變而不影響布局的，稱(chēng)為重繪，例如outline,visibility,color,background-color等，重繪的代價(jià)是高昂的，因?yàn)闉g覽器必須驗(yàn)證DOM樹(shù)上其他節(jié)點(diǎn)的可見(jiàn)性。
3.回流
回流是布局幾何屬性改變成為回流，回流是影響瀏覽器的關(guān)鍵因素，因?yàn)樯婕暗讲糠猪?yè)面（或者整個(gè)頁(yè)面）的布局更新，一個(gè)元素的回流可能導(dǎo)致所有子元素以及緊隨其后的兄弟節(jié)點(diǎn)、祖先節(jié)點(diǎn)元素的回流。
回流一定會(huì)發(fā)生重繪，重繪不一定會(huì)引發(fā)回流
4.瀏覽器優(yōu)化
現(xiàn)代瀏覽器大多都通過(guò)隊(duì)列機(jī)制來(lái)批量更新布局，瀏覽器會(huì)把修改操作放在隊(duì)列中，至少一個(gè)瀏覽器刷新（16.6ms）才清空隊(duì)列，但當(dāng)你獲取布局信息時(shí)，隊(duì)列中可能存在影響這寫(xiě)屬性和方法返回值的操作，即使沒(méi)有，瀏覽器也會(huì)強(qiáng)制清空隊(duì)列，觸發(fā)重繪和回流來(lái)保證返回正確的值
主要有一下方法和屬性
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
width、height
getComputedStyle()
getBoundingClientRect()
所以，我們應(yīng)該避免頻繁的使用上述的屬性，他們都會(huì)強(qiáng)制渲染刷新隊(duì)列。
5.減少重繪與回流
1.css
. 減少重繪與回流
1.CSS
使用 transform 替代 top
使用 visibility 替換 display: none ，因?yàn)榍罢咧粫?huì)引起重繪，后者會(huì)引發(fā)回流（改變了布局)
避免使用table布局，可能很小的一個(gè)小改動(dòng)會(huì)造成整個(gè) table 的重新布局。
盡可能在DOM樹(shù)的最末端改變class，回流是不可避免的，但可以減少其影響。盡可能在DOM樹(shù)的最末端改變class，可以限制了回流的范圍，使其影響盡可能少的節(jié)點(diǎn)。
避免設(shè)置多層內(nèi)聯(lián)樣式，CSS 選擇符從右往左匹配查找，避免節(jié)點(diǎn)層級(jí)過(guò)多。
2.JavaScript
避免頻繁操作樣式，最好一次性重寫(xiě)style屬性，或者將樣式列表定義為class并一次性更改class屬性。
避免頻繁操作DOM，創(chuàng)建一個(gè)documentFragment，在它上面應(yīng)用所有DOM操作，最后再把它添加到文檔中。
避免頻繁讀取會(huì)引發(fā)回流/重繪的屬性，如果確實(shí)需要多次使用，就用一個(gè)變量緩存起來(lái)。
對(duì)具有復(fù)雜動(dòng)畫(huà)的元素使用絕對(duì)定位，使它脫離文檔流，否則會(huì)引起父元素及后續(xù)元素頻繁回流。
