性能优化之-reflow,repaint.

Posted 未来-竭尽全力

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了性能优化之-reflow,repaint.相关的知识,希望对你有一定的参考价值。

前端性能控制是衡量一个前端工程师的重要参考点,一个作品的成功离不开不断追求性能的优化,为什么三星手机出现了爆炸事件之后销量急剧下降,为什么德国的工艺产品收到世界的推举。这些一定离不开不断的优化产品,提高产品的性能指标。作为一个工程师,你一定要在能做到的基础上去追求如何去做的更好。提升性能也是提升自己。

1.什么是reflow,repaint。

  我们知道页面渲染是这样进行的首先确定页面的位置即position,然后进行render,即dom的颜色,text-align等等。那么由此我们可以推断出什么是relfow,repaint。

  reflow:页面回流--什么时候会触发呐?当dom的位置宽度等等改变时候就会触发。众所周知,操作dom是需要很大的成本的。所以我们应该尽量减少reflow。

  repaint:页面重绘--什么时候会触发呐?当dom的颜色改变等不影响布局的属性发生变化的时候,但是backgroud改变会导致reflow。
2。我们知道了这些概念,也知道了为什么会导致性能问题,那么我们该如何去避免呐?我们该从哪些方面入手呐?

  (1)html:尽量简单的html结构,不要弄的很臃肿繁杂。减少渲染的深度和时间。

  (2)css:1,把操作style的多条语句通过class来处理。2,尽量不要使用内联的样式。3,设置了动画的dom尽量采用absolute或者fixed布局减少reflow。4,适当的牺牲平滑度         来提高性能,即当我们设置动画的时候以一个像素为单位进行移动cpu就会被占完,而以3个像素为单位就会好很多。5,避免table布局,table布局的子元素的改                                     变都会引起reflow。

  (3)js:1,缓存dom选择与计算,2,尽量使用id选择器,id选择器具有更高的性能。3,使用事件委托来优化事件绑定。4,添加节点利用framegment或者字符串来出来。
目前知道的就是这样了,网友们如果知道,麻烦评论一下。我们总是在分享中得到提升。
 

以上是关于性能优化之-reflow,repaint.的主要内容,如果未能解决你的问题,请参考以下文章

前端性能优化 —— reflow(回流)和repaint(重绘)

javascript性能优化-repaint和reflow

web性能优化DOM的reflow 和repaint

前端性能优化--回流(reflow)和重绘(repaint)

前端性能优化-减少http请求,dns预解析,减少repaint和reflow

Repaint Reflow 的基本认识和优化