认识达内从这里开始

认真做教育专心促就业

南昌达内培训web前端性能优化重排与重绘应用分析

发布：南昌达内IT培训
来源：互联网
时间：2023-02-02 10:50

性能优化问题一直都是软件开发程序员需要长期关注的一个编程问题，而本文我们就通过案例分析来简单了解一下，web前端性能优化重排与重绘应用分析。

南昌达内培训web前端性能优化重排与重绘应用分析

一旦渲染树构建完成，就要开始绘制(paint)页面元素了。当DOM的变化引发了元素几何属性的变化，比如改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。简单的说，重排负责元素的几何属性更新，重绘负责元素的样式更新。而且，重排必然带来重绘，但是重绘未必带来重排。比如，改变某个元素的背景，这个就不涉及元素的几何属性，所以只发生重绘。

重绘和重排的开销是非常昂贵的，如果我们不停的在改变页面的布局，就会造成浏览器耗费大量的开销在进行页面的计算，这样的话，我们页面在用户使用起来，就会出现明显的卡顿。

如果我们需要对DOM元素进行多次修改，怎么去减少重排和重绘的次数呢?有的同学又要说了，利用上面修改样式的方法不就行了吗。回过头看一下造成页面重排的几个要点里，可以明确的看到，造成元素几何属性发生改变就会触发重排，现在需要增加10个节点，必然涉及到DOM的修改，这个时候就需要利用批量修改DOM这种优化方式了，这里也能看到，改变样式小化重绘和重排这种优化方式适用于单个存在的节点。

使用这种方法，在没有任何优化的情况下，每次插入新的节点都会造成一次重排(这几部分我们都先讨论重排，因为重排是性能优化的一步)。考虑这个场景，如果我们添加的节点数量众多，而且布局复杂，样式复杂，那么能想到的是你的页面一定非常卡顿。我们利用批量修改DOM的优化手段来进行重构

缓存布局信息这个概念，在《高性能JavaScript》DOM性能优化中，多次提到类似的思想，比如我现在要得到页面ul节点下面的100个li节点，好的办法就是一次获取后就保存起来，减少DOM的访问以提升性能，缓存布局信息也是同样的概念。前面有讲到，当访问诸如offsetLeft，clientTop这种属性时，会冲破浏览器自有的优化————通过队列化修改和批量运行的方法，减少重排/重绘版次。所以我们应该尽量减少对布局信息的查询次数，查询时，将其赋值给局部变量，使用局部变量参与计算。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。

< 上一篇：南昌达内IT培训微前端开发设计理念都有哪些

下一篇：南昌达内ui设计培训6-8岁学龄初期的色彩偏好 >