瀏覽器渲染過程
html**轉化成dom
css**轉化成cssom（css object model）
結合dom和cssom，生成一棵渲染樹（包含每個節點的視覺資訊）
生成布局（layout），即將所有渲染樹的所有節點進行平面合成
將布局繪製（paint）在螢幕上
詳情可以思考下面兩張圖：
重排和重繪（重新布局、重新繪製）
"重繪"不一定需要"重排"，"重排"必然導致"重繪"
以下變數會導致瀏覽器重排、重新渲染。
優化
dom 的多個讀操作（或多個寫操作），應該放在一起。不要兩個讀操作之間，加入乙個寫操作。
如果某個樣式是通過重排得到的，那麼最好快取結果。避免下一次用到的時候，瀏覽器又要重排。
不要一條條地改變樣式，而要通過改變class，或者csstext屬性，一次性地改變樣式。
盡量使用離線dom，而不是真實的網面dom，來改變元素樣式。比如，操作document fragment物件，完成後再把這個物件加入dom。再比如，使用 clonenode() 方法，在轉殖的節點上進行操作，然後再用轉殖的節點替換原始節點。
先將元素設為display: none（需要1次重排和重繪），然後對這個節點進行100次操作，最後再恢復顯示（需要1次重排和重繪）。這樣一來，你就用兩次重新渲染，取代了可能高達100次的重新渲染。
position屬性為absolute或fixed的元素，重排的開銷會比較小，因為不用考慮它對其他元素的影響。
只在必要的時候，才將元素的display屬性為可見，因為不可見的元素不影響重排和重繪。另外，visibility : hidden的元素只對重繪有影響，不影響重排。
使用虛擬dom的指令碼庫，比如react等。
使用 window.requestanimationframe()、window.requestidlecallback() 這兩個方法調節重新渲染
瀏覽器的渲染流程 重排 重繪 合成
html css j ascript資料，經過瀏覽器中間渲染模組的處理，再加上重排 重繪 合成的乙個個環節，才最終輸出為螢幕上的畫素檢視畫面。本文就逐一介紹重排 重繪 合成的基本概念 觸發時機 影響範圍以及其優化策略。重排 重繪 合成 乙個完整的渲染流程一般都經歷如下過程 html被html解析器解...
瀏覽器的重繪與重排
在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程中將重繪和重排引發的效能問...
瀏覽器的重繪與重排
在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程 中將重繪和重排引發的效能...