[测试文章]10种减少重排提高性能的方式

最新推荐文章于 2024-03-10 10:11:38 发布

weixin_33806509

最新推荐文章于 2024-03-10 10:11:38 发布

阅读量285

点赞数

文章标签： ui javascript 面试 ViewUI

原文链接：http://www.cnblogs.com/yaoworld/p/4881668.html

版权

尽管网页达到了2MB，但是性能却成了一个热点话题。你的应用越舒畅，用户体验就越好，转换率就越高。
也就是说，添加粗浅的CSS3动画或者不考虑后果的控制多个DOM元素会让我感到很惭愧。当在应用视觉效果时，浏览器中用到了两个术语：
  重绘
重绘放生在元素的改变影响显示但不影响布局的时候。例如，opacity, background-color, visibility, 和outline。重绘是很昂贵的，因为浏览器必须检查DOM中所有的节点——在发生改变的元素下，一个或多个元素变的可见！
  重排
重排会有更大的影响。这会涉及到所有元素位置和尺寸的重新计算，从而导致部分或者全部文档重渲染。改变单一的一个元素会影响到所有的子元素，祖先元素和兄弟元素。
两者都是浏览器拦截，在重绘或者重排发生期间，用户和你的应用程序都可以做其他的任务。在极端情况下，一个CSS效果可以导致javascript执行更慢。这就是你遇到诸如生涩的滚屏和界面无法响应的原因。
理解重排是怎么被触发的就很有用了：
1.添加，移除或者改变可视的DOM元素
第一点是显而易见的，用javascript改变DOM会导致重排。
2.添加，移除或者改变CSS样式
同样得，直接应用CSS样式或者改变类可能会改变布局。改变一个元素的宽度会影响同一个DOM分支下的所有元素和周围的元素。
3.CSS动画和过渡
动画的每一帧都会导致重排。
4.使用offsetWidth和offsetHeight
古怪地是，读取一个元素的offsetWidth和offsetHeight属性可以触发一个初始的重排，因此，这个数字能够被计算出来。
5.用户动作
最后，用户可以通过激发一个:hover效果来触发重排，在一个区域中输入文本，改变窗口的大小，改变字体的尺寸，切换样式表或者字体。
重排处理流程会有所不同。一些浏览器在确定的运算方面会比其他浏览器要好。。一些元素比某些元素渲染要更昂贵。幸运地是，这里有几个通用的技巧你可以运用，来提高性能。
1.使用最佳的布局技术
我不相信我居然在2015年说起这个，但是不要使用内联样式或者表格布局。
一个内联样式会影响布局因为HTML下载之后会触发一个额外的重排。表格是奢侈的，因为语法分析程序需要不止一个表格传递到计算单元面积。使用table-layout:fixed布局，由于列的宽度是基于标题行的内容的，所以它有助于当前的表格式数据。
在你的主页面中使用flexbox布局，也会有性能问题，因为在HTML下载之后，伸缩元素的位置和尺寸会发生改变。
2.最小化CSS规则的数量
你所使用的规则越少，重排就越快。你也应该防止出现复杂的CSS选择器。
如果你正在使用诸如bootstrap这类的框架，这会是特别有问题的。在提供的样式中极少的网站不止使用一个分数。像Unused CSS, uCSS, grunt-css和gulp-uncss这类的工具，可以显著的减少你的样式描述和文件大小。
3.最小化DOM深度
稍微有点复杂——减少你的DOM树的大小和每个分支的元素数量。你的文档越小，越浅，重排就会越快。如果你不支持旧版的浏览器，可能你要移除不需要的包裹元素。
4.少更新DOM树中的类
尽可能少的改变DOM树中元素的类。这可以限制让量的少的必要的区域重排。实质上，只对父节点应用类改变，例如，如果效果在子节点上的的包裹元素是最小的。
5.从流中移除复杂的动画
通过position:absolute或者position:fixed移除文档流，确保动画是应用在一个单一的元素上。这允许修改元素的尺寸和位置，而不影响文档中的其他元素。
6.修改隐藏的元素
用display:none隐藏的元素，当他们改变时，不会导致重绘或者重排。如果切实可行，在它可见之前来改变元素。
7.批量更新元素
通过在一个单一的操作中更新所有DOM，可以提高性能。下面这个简单的例子会导致三次reflow。
var myelement = document.getElementById('myelement');
myelement.width = '100px';
myelement.height = '200px';
myelement.style.margin = '10px';
我们可以减少到一次重排，也很容易。例如：
var myelement = document.getElementById(‘myelement’);
myelement.classList.add(‘newstyles’);
.newstyles{
width: 100px;
height: 200px;
margin: 10px;
}
你也可以减少你需要触摸的DOM的次数。让我们假定你想要创建这个清单：
item 1
item 2
item 3
一次添加一个元素会导致7次重排——一是当<ul>被添加时，三次因为每个<li>元素，三次因为文本。然而，在使用一个DOM片段和第一次在内存中建立节点时，一个单独的重排会被执行。例如：
var i, li,
   frag = document.createDocumentFragment(),
   ul = frag.appendChild(document.createElement(‘ul’));
for(i = 1; i <= 3; i++){
li = ul.appendChild(document.createElement(‘li’));
li.textContent = ‘item’ + i;
}
document.body.appendChild(frag);
8.限制被影响的元素
防止大量的元素被影响这种情况。考虑到一个选项卡的内容控制，点击选项激活不同的的内容块儿。如果每个内容块周围的元素有不同的高度，周围的元素就会被影响。你可能会通过为容器设置一个固定的高度或者从文档流中移除控制，来提高性能。
9.认识到流畅危害到性能
一个元素每次移动一个像素可能会看起来流畅，但是在更低端的设备上却很难。通过每帧移动四个像素移动元素，需要四分之一的回流处理，可能只是稍微不那么流畅。
10.用浏览器工具分析重绘问题
所有主流的浏览器都提供开发者工具，强调了回流如何影响性能。在Blink/Webkit浏览器中，例如chrome，Safari，和opera，打开Timeline面板，并记录一个活动：

在火狐开发者中，相似的Timeline面板是可用的：

在IE12开发者工具中，这个面板叫做UI Responsiveness：

所有的浏览器显示重排和重绘的时间是绿色。上面的测试是个简单的例子，不涉及重要的动画，但相比其他的诸如脚本之类的元素，布局需要更多的时间。减少你的重排，你会得到更好的性能。
在你的动画中，如果你已经在提高性能上取得成功，并且UI中用这些或其他的建议，请在评论下方告知。
  译者语：
这篇文章写的是如何通过减少reflow和repaint，来提高网页的性能，与我上次在腾讯校招面试中遇到的相关的题目如出一辙。这篇文章很详细的介绍了提高性能的诸多方法，非常适合初学性能优化的同学们学习。译文有诸多词不达意的地方，若有不理解的地方，可以在下方评论中回复讨论。
  谢谢^_^!