reflow 和 repaint
浏览器解析基本流程
浏览器解析的基本流程
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)
关键字：html, 前端性能优化, reflow, repaint
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！