瀏覽器解析基本流程

瀏覽器解析的基本流程

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)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。