瀏覽器將獲取的html文件並解析成dom樹。
處理css標記，構成層疊樣式表模型cssom(css object model)。
將dom和cssom合併為渲染樹(rendering tree)將會被建立，代表一系列將被渲染的物件。
渲染樹的每個元素包含的內容都是計算過的，它被稱之為布局layout。瀏覽器使用一種流式處理的方法，只需要一次pass繪製操作就可以布局所有的元素。
將渲染樹的各個節點繪製到螢幕上，這一步被稱為繪製painting.
如果文件中有資源 重複以上流程 直至資源全部載入完畢
當render tree中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次載入的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程成為重繪。
當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。
從上面的兩點不難看出，重繪與回流是瀏覽器渲染過程中消耗資源的一大主要原因。
所以想要做效能優化就應該減少重繪與回流
那我們分開說：
從css角度
樣式的更改盡量不要改變布局。引起回流。
從js角度
減少dom操作，文件碎片
前端效能優化 回流與重繪
最近在研究virtual dom，接著就研究回顧起回流 reflow 與重繪 repaint 了。在理解這兩個概念之前，我們先來看看瀏覽器渲染的工作流程。這裡以webkit渲染引擎為例 瀏覽器請求到html文件後，將html解析成dom tree css被解析成css style rules 解析完...
效能優化 頁面渲染 重繪 回流
參考 高效能web開發 深入理解頁面呈現 重繪 回流 因為一些原因要重新構建渲染數的時候，就叫做回流,第一次構建的時候也叫做回流。引起回流的操作 回流一定會導致重繪 影響元素幾何屬性發生變化 重繪 瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分...
前端效能優化 （一）重繪與回流
重繪是乙個元素外觀的改變所觸發的瀏覽器行為。渲染物件在建立完成並新增到渲染樹時，並不包含位置和大小資訊。計算這些值的過程稱為布局或重排 優化方案 1.元素位置移動變換時盡量使用css3的transform來代替對top left等的操作 變換 transform 和透明度 opacity 的改變僅僅...