减少回流(reflow)

2017-10-24  本文已影响12人  lmmy123

回流(重排)——浏览器重新渲染部分或全部文档而重新计算文档中元素的位置

指导方针:

1.减少不必要的DOM深度

2.精简css,去除没有用处的css

3.涉及到动画,将元素absolute

4.避免不必要的复杂的css选择符,尤其是使用子选择器

什么会导致回流?

1.调整窗口大小

2.改变字体

3.增加或者移除样式

4.内容变化,比如用户在input框中输入文字

5.激活css伪类,比如,:hover

6.操作class属性

7.脚本操作DOM

8.计算offsetWidth和offsetHeight属性

9.设置sytle属性的值


重绘(repaint)——重新渲染

结论:

1,回流 必定引起 重绘

2. 重绘可能会引起回流


上一篇下一篇

猜你喜欢

热点阅读