上次在面試中，面試官問了我乙個關於頁面重繪和回流的問題，我解釋的不怎麼好。今天把它整理了一下，又參考了一些其他的文章。
參考文章：
頁面載入過程
1、瀏覽器將獲取到的html**解析成乙個dom樹，html中的每乙個標籤都是dom樹中的乙個節點，根節點就是document。dom樹中包含了所有的html標籤，同時也包含了display:none 隱藏和js動態新增的元素等
2、瀏覽器將所有的樣式（css）解析成樣式結構體（css model），在解析過程中會去掉瀏覽器不識別的樣式。
3、dom tree 和樣式結構體組合後構建render tree。 render tree類似於dom tree。但是有較大差別。render樹中的每個節點都有自己的樣式，但是render tree中不包含display：none的元素。但是visiblity:hidden的隱藏元素會包含在render tree中。因為visibility:hidden會影響布局（layout），且在文件流中佔據一定的空間。
4、一旦render tree 構建完畢，瀏覽器就可以根據render tree繪製頁面了
回流與重繪
1、什麼是回流？
當render tree 中的一部分（或者全部）因為元素的規模尺寸、布局隱藏等改變需要重新構建。這就是回流。
2、什麼是重繪？
在回流的時候，瀏覽器會使渲染樹中受影響的部分失效，並重新繪製這部分的渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程稱為重繪
3、什麼情況下瀏覽器會發生重繪？
重繪不一定引起回流，但是回流一定會影響重繪。只是改變某些元素的屬性並且這些屬性會影響到元素的外觀、風格，不會影響頁面的布局，比如backgorund-color;color等；visability:hidden只重繪不回流
4、什麼情況下，瀏覽器會發生回流？（重要）
當頁面布局或者幾何大小發生變化時就會發生回流。
①新增或刪除可見的dom元素；
②元素的位置變化
③元素的尺寸變化--內容區域、邊框、內外邊距、寬高
④內容改變--文字內容改變或者大小改變而引起的計算值寬度和高度改變
⑤頁面渲染的初始化
⑥瀏覽器可視視窗變化---resize時間發生時、或者瀏覽器的字型大小改變時（使用者操作）
聰明的瀏覽器（見文章 ；寫的很好）
如何優化頁面？
減少回流和重繪就是減少對render tree的操作（合併多次dom修改和樣式修改），減少對一些元素style的請求。具體方法如下：
1、同時新增子元素和父元素時，應先在記憶體中將子元素拼接到父元素中，最後在整體一次性將父元素新增到文件流中---這樣只會發生一次layout
2、如果多次同時新增多個平級元素時，應該使用文件片段
什麼是文件片段：記憶體中臨時儲存的多個平級子元素的虛擬父元素
何時使用：只要是新增多個平級的子元素時，都要先將子元素加入到文件片段中，再一次性將文件片段新增到dom樹
例項如下：
使用文件片段//default: 88.941162109375ms//總耗時default: 76.31201171875ms
不使用文件片段
3、直接改變classname,如果動態改變樣式，可以使用csstext
4、由於display屬性為none的元素不在渲染樹中，對隱藏的元素操作不會引發其他元素的重排。如果要對乙個元素進行複雜的操作時，可以先隱藏它，操作完成後再顯示。這樣只在隱藏和顯示時觸發2次重排。
5、使用clonenode(true/false)和replacechild 技術，引發一次回流和重繪
6、不要經常訪問會引起瀏覽器flush佇列的屬性，如果確實要訪問的話，可以利用快取；也就是說需要經常去那些引起瀏覽器重排的屬性時，需要快取到變數中，再呼叫。
7、讓元素脫離動畫流，減少回流的render tree的規模
頁面的回流與重繪
在構建渲染樹的過程中，瀏覽器主要完成了一下工作 前邊通過構造渲染樹，我們將可見dom節點以及它對應的樣式結合起來，可是我們還需要計算他們在裝置視口 viewport 內的準確位置和大小，這個計算的階段就是回流。最終，我們通過構造渲染樹和回流階段，我們知道了哪些節點是可見的，以及可見節點的樣式和具體的...
頁面的重繪與回流及優化
首先要清楚頁面呈現的具體過程 1.瀏覽器把獲取到的html 解析成1個dom樹，html中的每個tag都是dom樹中的1個節點，根節點就是我們常用的document物件。dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。2.瀏覽器把所有樣式 使用者定義的...
web頁面的回流和重繪
什麼是回流？回流也叫重排 reflow 當頁面中的元素發生影響布局的變化，比如 改變寬高，修改顯示影藏。頁面需要重新布局，就會觸發重排。簡單的說就是，頁面布局改變，就會觸發重排。什麼是重繪 repaint 頁面中的元素樣式發生改變注意 每個頁面只要會發生一次重排和重繪。重排一定會觸發重繪前端效能優化...