reflow 和 repaint

greatwhole 發布于2019-08-01 15:32 / 1299人閱讀

摘要：瀏覽器解析基本流程瀏覽器解析的基本流程和，瀏覽器根據各種樣式來計算并根據計算結果將元素放到確定的地方。完成之后，瀏覽器把這些元素按照各自的特性繪制一遍。

瀏覽器解析基本流程

瀏覽器解析的基本流程

reflow和repaint

reflow，瀏覽器根據各種樣式來計算并根據計算結果將元素放到確定的地方。
repaint： relfow完成之后，瀏覽器把這些元素按照各自的特性繪制一遍。

引起reflow和repaint的操作 引起repaint的操作

一個元素的外觀改變，但是沒有改變布局的情況

visibility

outline

background color

引起reflow的操作

改變窗口大小

改變字體

增加和刪除樣式表

內容的改變，比如用戶在輸入框輸入文字

激活偽類

操作class屬性

腳本操作DOM

計算offsetWidth和offsetHeight

設置style屬性

display:none 觸發reflow，而visibility:hidden 觸發repaint，因為沒有發生位置變化

避免和最小化影響

直接改變你想改變的元素（避免通過父元素作用于子元素，而是直接作用于子元素）

避免黃色至內聯樣式

對于動畫的元素，其position設為fixed或absolute

權衡速度的平滑，速度慢，reflow比較頻繁

避免table布局

避免css中含有js 表達式（只有IE）

如何判斷元素reflow或者repaint

使用chrome開發者工具timeline:
timeline

參考資料：

REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?

Repaint 、Reflow 的基本認識和優化 (2)

云服務器 GPU云服務器 repaints reflows repaint reflow

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49962.html

瀏覽器渲染那些事之 Reflow、Repaint

摘要：原文鏈接瀏覽器渲染那些事之瀏覽器內核渲染引擎在各個瀏覽器廠商你追我趕的形勢下，截止今日，產生了很多不同的瀏覽器，各個瀏覽器本質大同小異，核心部分基本相似，由渲染引擎和引擎組成。原文鏈接瀏覽器渲染那些事之 Reflow、Repaint 瀏覽器內核（渲染引擎）在各個瀏覽器廠商你追我趕的形勢下，截止今日，產生了很多不同的瀏覽器，各個瀏覽器本質大同小異，核心部分基本相似，由渲染引擎和 J...

morgan 2019-08-29 12:19 評論0 收藏0
【譯】瀏覽器渲染：repaint,reflow/relayout,restyle

摘要：屏幕的變化就被稱為或者是。而瀏覽器的目標之一就是減少以及的負面影響，其中的一個策略就是干脆不做，又或者說至少不是現在做。但有時腳本語句會破化瀏覽器優化，并使其刷新隊列以及執行所有批處理的改變。 **首先說翻譯這篇文章的目的其實是，之前回答的關于瀏覽器js渲染的問題被打臉了 ?_? ，不得不正視自己半路出家學前端的事實，所以這篇文章就算是自己的一個筆記吧，學而時習之，不亦樂乎，翻譯錯了，...

godlong_X 2019-08-29 11:17 評論0 收藏0
【譯】瀏覽器渲染：repaint,reflow/relayout,restyle

摘要：屏幕的變化就被稱為或者是。而瀏覽器的目標之一就是減少以及的負面影響，其中的一個策略就是干脆不做，又或者說至少不是現在做。但有時腳本語句會破化瀏覽器優化，并使其刷新隊列以及執行所有批處理的改變。 **首先說翻譯這篇文章的目的其實是，之前回答的關于瀏覽器js渲染的問題被打臉了 ?_? ，不得不正視自己半路出家學前端的事實，所以這篇文章就算是自己的一個筆記吧，學而時習之，不亦樂乎，翻譯錯了，...

mating 2019-08-20 11:03 評論0 收藏0
【譯】瀏覽器渲染：repaint,reflow/relayout,restyle

摘要：屏幕的變化就被稱為或者是。而瀏覽器的目標之一就是減少以及的負面影響，其中的一個策略就是干脆不做，又或者說至少不是現在做。但有時腳本語句會破化瀏覽器優化，并使其刷新隊列以及執行所有批處理的改變。 **首先說翻譯這篇文章的目的其實是，之前回答的關于瀏覽器js渲染的問題被打臉了 ?_? ，不得不正視自己半路出家學前端的事實，所以這篇文章就算是自己的一個筆記吧，學而時習之，不亦樂乎，翻譯錯了，...

legendmohe 2019-08-01 15:44 評論0 收藏0
前端性能之回流與重繪(reflow && repaint)

摘要：寫在金三銀四之際。一個節點觸發了，瀏覽器會檢查中其他所有節點的顯示方式一個節點觸發了會導致它的祖先節點，后代節點以及在它之后的節點全部。對性能的影響大于。解決方式控制我們無力去改變，對性能損害的程度，我們能做的只有減少它們發生的次數。寫在金三銀四之際。因為種種原因想要謀求新的發展，不得已翻起了塵封已久的高程書；寫起了各種經典CSS布局；回顧起記憶略顯模糊的幾個項目。感慨著太多太多...

ytwman 2019-08-22 15:21 評論0 收藏0