1 核心問題講解
瀏覽器的執行機制：
構建dom樹（parse）：渲染引擎解析html文件，首先將標籤轉換成dom樹中的dom node（包括js生成的標籤）生成內容樹（content tree/dom tree）；
構建渲染樹（construct）：解析對應的css樣式檔案資訊（包括js生成的樣式和外部css檔案），而這些檔案資訊以及html中可見的指令（如），構建渲染樹（rendering tree/frame tree）；render tree中每個node都有自己的style，而且render tree不包含隱藏的節點(比如display:none的節點，還有head節點)，因為這些節點不會用於呈現
布局渲染樹（reflow/layout）：從根節點遞迴呼叫，計算每乙個元素的大小、位置等，給出每個節點所應該在螢幕上出現的精確座標；
繪製渲染樹（paint/repaint）：遍歷渲染樹，使用ui 層來繪製每個節點。
重繪（repaint或redraw）：
當盒子的位置、大小以及其他屬性，例如顏色、字型大小等都確定下來之後，瀏覽器便把這些原色都按照各自的特性繪製一遍，將內容呈現在頁面上。
重繪是指乙個元素外觀的改變所觸發的瀏覽器行為，瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。
觸發重繪的條件：改變元素外觀屬性。如：color，background-color等。****
**注意：**table及其內部元素可能需要多次計算才能確定好其在渲染樹中節點的屬性值，比同等元素要多花兩倍時間，這就是我們盡量避免使用table布局頁面的原因之一。
重排（重構/回流/reflow）：當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建, 這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次載入的時候。
重繪和重排的關係：在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程稱為重繪。
所以，重排必定會引發重繪，但重繪不一定會引發重排。
觸發重排的條件：任何頁面布局和幾何屬性的改變都會觸發重排，比如：
1、頁面渲染初始化；(無法避免)
2、新增或刪除可見的dom元素；
3、元素位置的改變，或者使用動畫；
4、元素尺寸的改變——大小，外邊距，邊框；
5、瀏覽器視窗尺寸的變化（resize事件發生時）；
6、填充內容的改變，比如文字的改變或大小改變而引起的計算值寬度和高度的改變；
7、讀取某些元素屬性：（offsetleft/top/height/width, clienttop/left/width/height, scrolltop/left/width/height, width/height, getcomputedstyle(), currentstyle(ie) )
重繪重排的代價：耗時，導致瀏覽器卡慢。****
2.問題擴充套件
優化：
1、瀏覽器自己的優化：瀏覽器會維護1個佇列，把所有會引起回流、重繪的操作放入這個佇列，等佇列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會flush佇列，進行乙個批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。
2、我們要注意的優化：我們要減少重繪和重排就是要減少對渲染樹的操作，則我們可以合併多次的dom和樣式的修改。並減少對style樣式的請求。
（1）直接改變元素的classname
（2）display：none；先設定元素為display：none；然後進行頁面布局等操作；設定完成後將元素設定為display：block；這樣的話就只引發兩次重繪和重排；
（3）使用clonenode(true or false) 和 replacechild 技術，引發一次回流和重繪；
（4）將需要多次重排的元素，position屬性設為absolute或fixed，元素脫離了文件流，它的變化不會影響到其他元素；
（5）如果需要建立多個dom節點，可以使用documentfragment建立完後一次性的加入document；
重繪和重排
重繪是乙個元素外觀的改變所觸發的瀏覽器行為，例如改變visibility outline 背景色等屬性。瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。重繪不會帶來重新布局，並不一定伴隨重排。重排是更明顯的一種改變，可以理解為渲染樹需要重新計算 儘量減少重排次數和縮小重排的影響範圍 1.dom...
重排和重繪
當dom的變化影響了元素的幾何屬性 寬或高 瀏覽器需要重新計算元素的幾何屬性，同時其他元素的幾何屬性和位置也會受到影響。瀏覽器會使渲染樹中受到影響的部分失效，並重新構造渲染樹，這個過程稱為重排。完成重排後，瀏覽器會重新繪製受到影響的部分到螢幕，這個過程稱為重繪。由於瀏覽器的流布局，對渲染樹的計算通常...
重繪和重排
構建dom樹 渲染引擎解析html文件，將所有標籤轉換為dom樹中的dom節點生成內容樹 構建渲染樹 解析對應的css樣式檔案資訊，樣式樹與dom樹結合構建成渲染樹 布局渲染樹 從根節點遞迴呼叫，計算每乙個元素的大小 位置等，給出每個節點所應該在螢幕上出現的精確座標 繪製渲染樹 遍歷渲染樹，使用ui...