頁面渲染的一般過程為js > css > 計算樣式 > 布局 > 繪製 > 渲染層合併。
其中，layout(重排)和paint(重繪)是整個環節中最為耗時的兩環
，所以我們盡量避免著這兩個環節。從效能方面考慮，最理想的渲染流水線是沒有布局和繪製環節的，只需要做渲染層的合併即可。
那怎麼知道哪些css屬性的改變是會影響這兩個環節的呢？
會影響重排和重繪的css屬性有background-color,box-shadow,display,height
在實際的應用裡，最為簡單的乙個注意點就是，觸發動畫的開始不要用diaplay:none屬性值，因為它會引起layout、paint環節，通過切換類名就已經是一種很好的辦法。
還有就是，translate屬性值來替換top/left/right/bottom的切換，scale屬性值替換width/height，opacity屬性替換display/visibility等等
css重繪與重排的方法
瀏覽器載入頁面原理 通常在文件初次載入時，瀏覽器引擎會解析html文件來構建dom樹，之後根據dom元素的幾何屬性構建一棵用於渲染的樹。渲染樹的每個節點都有大小和邊距等屬性，類似於 盒子模型 由於隱藏元素不需要顯示，渲染樹中並不包含dom樹中隱藏的元素 當渲染樹構建完成後，瀏覽器就可以將元素放置到正...
html中重排和重繪問題
1 核心問題講解 瀏覽器的執行機制 構建dom樹 parse 渲染引擎解析html文件，首先將標籤轉換成dom樹中的dom node 包括js生成的標籤 生成內容樹 content tree dom tree 構建渲染樹 construct 解析對應的css樣式檔案資訊 包括js生成的樣式和外部cs...
css 頁面重繪和回流 重排 以及優化
1.瀏覽器把獲取到的html 解析成1個dom樹，html中的每個tag都是dom樹中的1個節點，根節點就是我們常用的document物件。dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。2.瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構...