reflow 和 repaint

greatwhole 發(fā)布于2019-08-01 15:32 / 1369人閱讀

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

瀏覽器解析基本流程

瀏覽器解析的基本流程

reflow和repaint

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

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

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

visibility

outline

background color

引起reflow的操作

改變窗口大小

改變字體

增加和刪除樣式表

內(nèi)容的改變，比如用戶在輸入框輸入文字

激活偽類

操作class屬性

腳本操作DOM

計算offsetWidth和offsetHeight

設置style屬性

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

避免和最小化影響

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

避免黃色至內(nèi)聯(lián)樣式

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

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

避免table布局

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

如何判斷元素reflow或者repaint

使用chrome開發(fā)者工具timeline:
timeline

參考資料：

REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?

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

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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/49962.html

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

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

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

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

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

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

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

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

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

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

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