構建dom樹：渲染引擎解析html文件，將所有標籤轉換為dom樹中的dom節點生成內容樹
構建渲染樹：解析對應的css樣式檔案資訊，樣式樹與dom樹結合構建成渲染樹
布局渲染樹：從根節點遞迴呼叫，計算每乙個元素的大小、位置等，給出每個節點所應該在螢幕上出現的精確座標
繪製渲染樹：遍歷渲染樹，使用ui後端層來繪製每乙個節點
定義：當乙個元素的屬性確定後，瀏覽器根據這些特性繪製該元素，使之呈現在頁面上。重繪指的是乙個元素的外觀屬性發生了改變觸發瀏覽器根據元素的新屬性重新繪製該元素使之呈現出新的外觀。
觸發條件：元素外觀屬性改變，如顏色等。
注意：table及其內部元素可能需要多次計算才能確定好其在渲染樹中節點的屬性值，比同等元素要多花兩倍時間，這就是我們盡量避免使用table布局頁面的原因之一。
定義：當渲染樹中的一部分（或者全部）因為元素的尺寸、布局、可見性等的改變而觸發瀏覽器對頁面的重新構建的行為。也成為回流或重構，每個頁面至少有一次重排行為，發生在第一次載入頁面的時候。
觸發條件：頁面布局或幾何屬性的改變
常見的情況：
頁面渲染初始化（無法避免）；
新增或刪除可見的dom元素；
元素位置的改變，或者使用動畫；
元素尺寸的改變（大小，邊距，邊框）；
瀏覽器視窗尺寸的變化（resize事件發生時）；
填充內容的改變，比如文字的改變或大小改變而引起的計算值寬度和高度的改變；
取某些元素屬性：（offsetleft/top/height/width, clienttop/left/width/height, scrolltop/left/width/height, width/height, getcomputedstyle(), currentstyle(ie) )
關係：在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中。所以，重排必定會引發重繪，但重繪不一定會引發重排。
缺點：瀏覽器卡慢
優化方法：總的原則就是，分離讀寫操作、樣式集中改變、快取布局資訊、dom離線
瀏覽器的優化：瀏覽器會維護乙個佇列，把所有會引起回流、重繪的操作放入這個佇列，等佇列中的操作到了一定數量或時間間隔，瀏覽器就對該佇列進行乙個批處理。這樣使得多次的重繪重排變為一次。
手動優化：本質是減少對渲染樹的改變，可以合併多次的dom和樣式修改，減少對樣式的請求。
總結了一波還是感覺生硬，希望今後有機會實戰運用這些知識，理解透徹。
重繪和重排
重繪是乙個元素外觀的改變所觸發的瀏覽器行為，例如改變visibility outline 背景色等屬性。瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。重繪不會帶來重新布局，並不一定伴隨重排。重排是更明顯的一種改變，可以理解為渲染樹需要重新計算 儘量減少重排次數和縮小重排的影響範圍 1.dom...
重排和重繪
當dom的變化影響了元素的幾何屬性 寬或高 瀏覽器需要重新計算元素的幾何屬性，同時其他元素的幾何屬性和位置也會受到影響。瀏覽器會使渲染樹中受到影響的部分失效，並重新構造渲染樹，這個過程稱為重排。完成重排後，瀏覽器會重新繪製受到影響的部分到螢幕，這個過程稱為重繪。由於瀏覽器的流布局，對渲染樹的計算通常...
重排和重繪
重繪是指乙個元素外觀的改變所觸發的瀏覽器行為，瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。也叫重構 回流 reflow，當渲染樹中的一部分 或全部 因為元素的規模尺寸，布局，隱藏等改變而需要重新構建,這就稱為回流 reflow 每個頁面至少需要一次回流，就是在頁面第一次載入的時候。當dom...