html 加載時(shí)發(fā)生了什么
在頁面加載時(shí)严拒，瀏覽器把獲取到的HTML代碼解析成1個(gè)DOM樹，DOM樹里包含了所有HTML標(biāo)簽裤唠，包括display:none隱藏，還有用JS動(dòng)態(tài)添加的元素等墓赴。
瀏覽器把所有樣式(用戶定義的CSS和用戶代理)解析成樣式結(jié)構(gòu)體
DOM Tree 和樣式結(jié)構(gòu)體組合后構(gòu)建render tree, render tree類似于DOM tree航瞭，但區(qū)別很大，因?yàn)閞ender tree能識(shí)別樣式章办，render tree中每個(gè)NODE都有自己的style，而且render tree不包含隱藏的節(jié)點(diǎn)(比如display:none的節(jié)點(diǎn)挪蹭，還有head節(jié)點(diǎn))休偶，因?yàn)檫@些節(jié)點(diǎn)不會(huì)用于呈現(xiàn)，而且不會(huì)影響呈現(xiàn)的懂算，所以就不會(huì)包含到 render tree中庇麦。我自己簡單的理解就是DOM Tree和我們寫的CSS結(jié)合在一起之后山橄，渲染出了render tree舍悯。
什么是回流
當(dāng)render tree中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局饮醇，隱藏等改變而需要重新構(gòu)建秕豫。這就稱為回流(reflow)。每個(gè)頁面至少需要一次回流祠墅，就是在頁面第一次加載的時(shí)候歌径，這時(shí)候是一定會(huì)發(fā)生回流的，因?yàn)橐獦?gòu)建render tree狗准。在回流的時(shí)候茵肃，瀏覽器會(huì)使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹验残，完成回流后，瀏覽器會(huì)重新繪制受影響的部分到屏幕中故俐，該過程成為重繪。
什么是重繪
當(dāng)render tree中的一些元素需要更新屬性辑舷，而這些屬性只是影響元素的外觀槽片，風(fēng)格，而不會(huì)影響布局的碌廓，比如background-color剩盒。則就叫稱為重繪。
區(qū)別：
他們的區(qū)別很大：
回流必將引起重繪纪挎，而重繪不一定會(huì)引起回流跟匆。比如：只有顏色改變的時(shí)候就只會(huì)發(fā)生重繪而不會(huì)引起回流
當(dāng)頁面布局和幾何屬性改變時(shí)就需要回流
比如：添加或者刪除可見的DOM元素，元素位置改變烤蜕，元素尺寸改變——邊距迹冤、填充、邊框叁巨、寬度和高度，內(nèi)容改變
擴(kuò)展：
瀏覽器的幫忙
所以我們能得知回流比重繪的代價(jià)要更高蚀瘸，回流的花銷跟render tree有多少節(jié)點(diǎn)需要重新構(gòu)建有關(guān)系
因?yàn)檫@些機(jī)制的存在庶橱，所以瀏覽器會(huì)幫助我們優(yōu)化這些操作，瀏覽器會(huì)維護(hù)1個(gè)隊(duì)列寂嘉，把所有會(huì)引起回流、重繪的操作放入這個(gè)隊(duì)列泉孩，等隊(duì)列中的操作到了一定的數(shù)量或者到了一定的時(shí)間間隔，瀏覽器就會(huì)flush隊(duì)列珍昨，進(jìn)行一個(gè)批處理。這樣就會(huì)讓多次的回流镣典、重繪變成一次回流重繪唾琼。
自己的優(yōu)化
但是靠瀏覽器不如靠自己，我們可以改變一些寫法減少回流和重繪
比如改變樣式的時(shí)候赶舆，不去改變他們每個(gè)的樣式，而是直接改變className 就要用到cssText 但是要注意有一個(gè)問題，會(huì)把原有的cssText清掉蜻懦，比如原來的style中有’display:none;’，那么執(zhí)行完上面的JS后悠咱，display就被刪掉了征炼。
為了解決這個(gè)問題，可以采用cssText累加的方法眼坏，但是IE不支持累加，前面添一個(gè)分號(hào)可以解決宰译。
還有添加節(jié)點(diǎn)的時(shí)候比如要添加一個(gè)div里面有三個(gè)子元素p魄懂，如果添加div再在里面添加三次p，這樣就觸發(fā)很多次回流和重繪缀拭，我們可以用cloneNode(true or false) 來避免，一次把要添加的都克隆好再appened就好了蛛淋，還有其他很多的方法就不一一說了
如果您覺得對(duì)您有幫助！就請(qǐng)幫我點(diǎn)個(gè)喜歡??????
