提高web性能之--正确理解 Repaint 和 Reflow
2013-04-07 13:48
169 查看
基本原理:
Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变visibility、outline、背景色等等。
Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证DOM树上的所有其它结点的visibility属性,这也是Reflow低效的原因。如:改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化,style属性的改变等等。如果Reflow的过于频繁,CPU使用率就会噌噌的往上涨,所以前端也就有必要知道 Repaint 和 Reflow的知识。
减少性能影响的办法:
上面提到通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow,所以最好通过设置class的方式; 有动画效果的元素,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局;如果功能需求上不能设置position为fixed或absolute,那么就权衡速度的平滑性。
总之,因为 Reflow 有时确实不可避免,所以只能尽可能限制Reflow的影响范围
Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变visibility、outline、背景色等等。
Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证DOM树上的所有其它结点的visibility属性,这也是Reflow低效的原因。如:改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化,style属性的改变等等。如果Reflow的过于频繁,CPU使用率就会噌噌的往上涨,所以前端也就有必要知道 Repaint 和 Reflow的知识。
减少性能影响的办法:
上面提到通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow,所以最好通过设置class的方式; 有动画效果的元素,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局;如果功能需求上不能设置position为fixed或absolute,那么就权衡速度的平滑性。
总之,因为 Reflow 有时确实不可避免,所以只能尽可能限制Reflow的影响范围
相关文章推荐
- [Web 性能] repaint and reflow (重绘和回流)
- [Web 性能] repaint and reflow (重绘和回流)
- 一个Web报表项目的性能分析和优化实践(三) :提高Web应用服务器Tomcat的内存配置,并确认配置正确
- 一个Web报表项目的性能分析和优化实践(三) :提高Web应用服务器Tomcat的内存配置,并确认配置正确
- 一个Web报表项目的性能分析和优化实践(三) :提高Web应用服务器Tomcat的内存配置,并确认配置正确
- 提高 ASP.NET Web 应用性能的 24 种方法和技巧
- 提高Web性能的14条法则(详细版)
- Web性能提高整理
- Web前端性能优化——如何提高页面加载速度
- 正确选择排序提高查询性能(转)
- 提高Web页面的性能
- 提高web性能之--使用JSON格式来进行数据交换
- 使用正确的筛选参数来提高查询性能
- 对《30个提高Web程序执行效率的好经验》的理解
- 将Web应用性能提高十倍的10条建议
- 提高性能:用RequireJS优化Wijmo Web页面
- 提高基于 Dojo 的 Web 2.0 应用程序的性能
- javascript性能优化-repaint和reflow
- 提高web性能之--压缩组件