性能优化之-reflow,repaint.

Posted 2020-10-07 未来-竭尽全力

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

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或者字符串来出来。
目前知道的就是这样了，网友们如果知道，麻烦评论一下。我们总是在分享中得到提升。