html、css、j**ascript資料，經過瀏覽器中間渲染模組的處理，再加上重排、重繪、合成的乙個個環節，才最終輸出為螢幕上的畫素檢視畫面。本文就逐一介紹重排、重繪、合成的基本概念、觸發時機、影響範圍以及其優化策略。
重排、重繪、合成
乙個完整的渲染流程一般都經歷如下過程：
html被html解析器解析成dom tree
css則被css解析器解析成cssom tree
dom tree和cssom tree解析完成後，被附加到一起，形成渲染樹（render tree）
布局，根據渲染樹計算每個節點的幾何資訊生成布局樹（layout tree）
對布局樹進行分層，並生成分層樹（layer tree）
為每個圖層生成繪製列表
渲染繪製(paint)。根據計算好的繪製列表資訊繪製整個頁面，並將其提交到合成執行緒
合成執行緒將圖層分成圖塊，並在光柵化執行緒池中將圖塊轉換成位圖，傳送繪製圖塊命令drawquad給瀏覽器程序
瀏覽器程序根據 drawquad 訊息生成頁面，並顯示到顯示器上
定義：當通過js或css改變了元素的寬度、高度等，修改了元素的幾何位置屬性，那麼瀏覽器會觸發重新布局，解析之後的一系列子階段，這個過程就叫重排。無疑，重排需要更新完整的渲染流水線，所以開銷也是最大的。
觸發時機和影響範圍：dom節點資訊更改,觸發重排時，這個dom更改程度會決定周邊dom更改範圍。
全域性範圍：就是從根節點html開始對整個渲染樹進行重新布局，例如當我們改變了視窗尺寸或方向或者是修改了根元素的尺寸或者字型大小等。
區域性範圍：對渲染樹的某部分或某乙個渲染物件進行重新布局。
定義：如果修改了元素的背景顏色，並沒有引起幾何位置的變換，所以就直接進入了繪製階段，然後執行之後的一系列子階段，這個過程就叫重繪。相較於重排操作，重繪省去了布局和分層階段，所以執行效率會比重排操作要高一些。
觸發時機和影響範圍：每一次的dom更改或者css幾何屬性更改，都會引起一次瀏覽器的重排/重繪過程，而如果是css的非幾何屬性更改，則只會引起重繪過程。
定義：合成是一種將頁面的各個部分分離成層（layer tree），分別將它們柵格化，然後在稱為「合成執行緒」的中組合為頁面的技術。
觸發時機和影響範圍：在gui渲染執行緒後執行，將gui渲染執行緒生成的繪製列表轉換為位圖,然後傳送繪製圖塊命令 drawquad 給瀏覽器程序，瀏覽器程序根據 drawquad 訊息生成頁面，將頁面顯示到顯示器上
優點：我們使用了 css 的transform來實現動畫效果，避開了重排和重繪階段，直接在非主線程上執行合成動畫操作。這樣的效率是最高的，因為是在非主線程上合成，並沒有占用主線程的資源，另外也避開了布局和繪製兩個子階段，所以相對於重繪和重排，合成能大大提公升繪製效率。
width、 display、 clientwidth、 offsetwidth、 scrollwidth、 scrollintoview()、
getboundingclientrect()、 height、 border、 clientheight、 offsetheight、
scrollheight、 scrollto()、 scrollintoviewifneeded()、 margin、 position、
clienttop、 offsettop、 scrolltop、 getcomputedstyle()、 padding、 overflow、
clientleft、 offsetleft、 scrollleft
color、 text-decoration、 outline-color、 outline-width、
border-style、 background-image、 outline、 box-shadow、
visibility、 background-position、 outline-style、
background-size、 background、 background-repeat、 border-radius
// 向右移動100px，一次重排
box.style.left='100px'
// 向右移動200px，不會引發重排
box.style.ctransform='translatex(200)'
重排一定會引起重繪，而重繪不一定會引起重排，重繪的開銷較小，重排的代價較高。在日常開發過程中應該儘量減少重排和重繪操作。 瀏覽器渲染過程及重繪重排
瀏覽器渲染過程 html 轉化成dom css 轉化成cssom css object model 結合dom和cssom，生成一棵渲染樹 包含每個節點的視覺資訊 生成布局 layout 即將所有渲染樹的所有節點進行平面合成 將布局繪製 paint 在螢幕上 詳情可以思考下面兩張圖 重排和重繪 重新...
瀏覽器的重繪與重排
在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程中將重繪和重排引發的效能問...
瀏覽器的重繪與重排
在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程 中將重繪和重排引發的效能...