重繪
當盒子的位置、大小以及其他屬性，例如顏色、字型大小等都確定下來之後，瀏覽器便把這些原色都按照各自的特性繪製一遍，將內容呈現在頁面上。
重繪是指乙個元素外觀的改變所觸發的瀏覽器行為，瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。
當盒子改變 顏色的時候會引起 重繪
重排
當盒子改變自己的位置大小時 隱藏改變 display;none 會引起重排
觸發重排的條件:任何頁面布局和幾何屬性的改變都會觸發重排，
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) )
重繪重排的代價:耗時，導致瀏覽器卡慢。卡
優化
1.直接改變樣式名稱 classname 不乙個個修改屬性的引數
2. 新增元素時 一起建立 最後一起新增
3. 將需要多次重排的元素，position屬性設為absolute或fixed，元素脫離了文件流，它的變化不會影響到其他元素;
css 頁面重繪和回流 重排 以及優化
1.瀏覽器把獲取到的html 解析成1個dom樹，html中的每個tag都是dom樹中的1個節點，根節點就是我們常用的document物件。dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。2.瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構...
css 頁面重繪和回流 重排 以及優化
一 html頁面的呈現流程 1.瀏覽器把獲取到的html 解析成1個dom樹，html中的每個tag都是dom樹中的1個節點，根節點就是我們常用的document物件。dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。2.瀏覽器把所有樣式 使用者定義的c...
重繪 重排 專案優化
1.構建dom樹 parse 渲染引擎解析html文件，首先將標籤轉換成dom樹中的dom node 包括js生成的標籤 生成內容樹 content tree dom tree 2.構建渲染樹 construct 解析對應的css樣式檔案資訊 包括js生成的樣式和外部css檔案 而這些檔案資訊以及h...