一、html頁面的呈現流程
1. 瀏覽器把獲取到的html**解析成1個dom樹，html中的每個tag都是dom樹中的1個節點，根節點就是我們常用的document物件。dom樹里包含了所有html標籤，包括display:none隱藏，還有用js動態新增的元素等。
2. 瀏覽器把所有樣式(使用者定義的css和使用者**)解析成樣式結構體，在解析的過程中會去掉瀏覽器不能識別的樣式，比如ie會去掉-moz開頭的樣式，而ff會去掉_開頭的樣式。
3、dom tree 和樣式結構體組合後構建render tree, render tree類似於dom tree，但區別很大，render tree能識別樣式，render tree中每個node都有自己的style，而且 render tree不包含隱藏的節點 (比如display:none的節點，還有head節點)，因為這些節點不會用於呈現，而且不會影響呈現的，所以就不會包含到 render tree中。注意 visibility:hidden隱藏的元素還是會包含到 render tree中的，因為visibility:hidden 會影響布局(layout)，會占有空間。根據css2的標準，render tree中的每個節點都稱為box (box dimensions)，理解頁面元素為乙個具有填充、邊距、邊框和位置的盒子。
4. 一旦render tree構建完畢後，瀏覽器就可以根據render tree來繪製頁面了。
二、回流與重繪
1. 當render tree中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次載入的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程成為重繪。
2. 當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。
注意：回流必將引起重繪，而重繪不一定會引起回流。
回流何時發生：
當頁面布局和幾何屬性改變時就需要回流。下述情況會發生瀏覽器回流：
1、新增或者刪除可見的dom元素；
2、元素位置改變；
3、元素尺寸改變——邊距、填充、邊框、寬度和高度
4、內容改變——比如文字改變或者大小改變而引起的計算值寬度和高度改變；
5、頁面渲染初始化；
6、瀏覽器視窗尺寸改變——resize事件發生時；
三、優化（減少回流、重繪）
瀏覽器本身的優化策略：瀏覽器會維護1個佇列，把所有會引起回流、重繪的操作放入這個佇列，等佇列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會flush佇列，進行乙個批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。但有時候我們寫的一些**可能會強制瀏覽器提前flush佇列，這樣瀏覽器的優化可能就起不到作用了。當你請求向瀏覽器請求一些 style資訊的時候，就會讓瀏覽器flush佇列。
減少對render tree的操作（合併多次多dom和樣式的修改），並減少對一些style資訊的請求，盡量利用好瀏覽器的優化策略
方法：1. 將多次改變樣式屬性的操作合併成一次操作。
2.將需要多次重排的元素，position屬性設為absolute或fixed，這樣此元素就脫離了文件流，它的變化不會影響到其他元素。例如有動畫效果的元素就最好設定為絕對定位。
3. 在記憶體中多次操作節點，完成後再新增到文件中去。例如要非同步獲取**資料，渲染到頁面。可以先取得資料後在記憶體中構建整個**的html片段，再一次性新增到文件中去，而不是迴圈新增每一行。
4. 由於display屬性為none的元素不在渲染樹中，對隱藏的元素操作不會引發其他元素的重排。如果要對乙個元素進行複雜的操作時，可以先隱藏它，操作完成後再顯示。這樣只在隱藏和顯示時觸發2次重排。
5.在需要經常取那些引起瀏覽器重排的屬性值時，要快取到變數。
css 頁面重繪和回流 重排 以及優化
1.瀏覽器把獲取到的html 解析成1個dom樹，html中的每個tag都是dom樹中的1個節點，根節點就是我們常用的document物件。dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。2.瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構...
重繪和重排（回流）
html被html解析器解析成dom tree,css則被css解析器解析成cssom tree。dom tree和cssom tree解析完成後，被附加到一起，形成渲染樹 render tree 節點資訊計算 重排 這個過程被叫做layout webkit 或者reflow mozilla 即根據...
重繪和重排（回流）
html被html解析器解析成dom tree,css則被css解析器解析成cssom tree。dom tree和cssom tree解析完成後，被附加到一起，形成渲染樹 render tree 節點資訊計算 重排 這個過程被叫做layout webkit 或者reflow mozilla 即根據...