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ù)元素頻繁回流。
