在討論頁面渲染效能的時候，經常會聽到這幾個詞「重繪」 「回流」 「重排」。
回流和重排都是reflow的不同翻譯(叫法)
重繪對應repaint，重新繪製的意思。
webkit瀏覽器的渲染過程
gecko(firefox)瀏覽器的渲染過程
從圖上可以看出來我們熟知的reflow的說法源於ff,webkit這個過程稱之為layout(計算布局),意思大概差不多吧。
瀏覽器的工作大致流程
從這個過程中可以了解到瀏覽器渲染主要有這麼幾步
解析html/xhtml/svg 生成dom tree,解析css生成css rule tree，解析script指令碼
瀏覽器引擎通過dom tree和css rule tree來構造render tree
呼叫系統的gui繪圖
幾個值得關注的點：
render tree不完全包含dom tree的內容，head或者display:none的元素不會出現在render tree中
reflow/layout
reflow/layout必定會repaint但repaint不一定會reflow/layout
css rule tree的生成過程
repaint——螢幕的一部分要重畫，比如某個css的背景色變了。但是元素的幾何尺寸沒有變。參考:reflow——意味著元件的幾何尺寸變了，我們需要重新驗證並計算render tree。是render tree的一部分或全部發生了變化。這就是reflow，或是layout。（html使用的是flow based layout，也就是流式布局，所以，如果某元件的幾何尺寸發生了變化，需要重新布局，也就叫reflow）reflow 會從這個root frame開始遞迴往下，依次計算所有的結點幾何尺寸和位置，在reflow過程中，可能會增加一些frame，比如乙個文字字串必需被包裝起來。
how browsers work
瀏覽器渲染原理簡介
如果對這塊知識感興趣的話，建議去讀下how browsers work這篇文章，比較長，講的很細緻，比如gecko和webkit在渲染上的一些差異，生成樹(dom tree/css render tree)的一些具體演算法什麼的。
瀏覽器渲染過程
瀏覽器的渲染過程 第一步 html經過html parser p s 解析為dom tree 第二步 css根據css規則經過css解析器解析為style rules cssom tree 第三步 兩棵樹經過attachment結合為 render tree 形成一棵大樹,此時它還是一棵迷茫的樹，不...
瀏覽器渲染過程
1.頁面準備 2.重定向 在header定義了重定向才會有這個過程，如果沒有就不會產生這個過程 關於重定向的分析 4.dns解析 把網域名稱解析成ip，如果直接用ip位址訪問，不會產生這個過程 5.tcp連線 6.request header 請求頭資訊 7.request body 請求體資訊，比...
瀏覽器渲染過程
這個過程可以大致分為兩個部分 網路通訊和頁面渲染。輸入url按下回車之後，瀏覽器會去瀏覽器快取中尋找該url的ip 沒有的話去系統快取中找，還是沒有的話去路由器快取中尋找 再沒有就去系統host檔案中找，還是沒有最後只能去請求dns伺服器，然後dns給乙個ip給瀏覽器 瀏覽器根據這個ip位址，向伺服...