瀏覽器解析基本流程

瀏覽器解析的基本流程

reflow和repaint

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

引起reflow和repaint的操作

引起repaint的操作

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

visibility

outline

background color

引起reflow的操作

改變窗口大小

改變字體

增加和刪除樣式表

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

激活偽類

操作class屬性

腳本操作DOM

計(jì)算offsetWidth和offsetHeight

設(shè)置style屬性

display:none 觸發(fā)reflow，而visibility:hidden 觸發(fā)repaint，因?yàn)闆]有發(fā)生位置變化

避免和最小化影響

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

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

對于動畫的元素，其position設(shè)為fixed或absolute

權(quán)衡速度的平滑，速度慢，reflow比較頻繁

避免table布局

避免css中含有js 表達(dá)式（只有IE）

如何判斷元素reflow或者repaint

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

參考資料：

REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?

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

總結(jié)

以上是生活随笔為你收集整理的reflow 和 repaint的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。