减少回流(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. 重绘可能会引起回流