h5渲染性能一瞥

内容来源：2018 年 6 月 30 日，饿了么前端主管向勇在“饿了么技术沙龙・第27弹【前端专场】”进行《h5渲染性能一瞥》演讲分享。IT 大咖说（微信id：itdakashuo）作为独家视频合作方，经主办方和讲者审阅授权发布。

阅读字数：2488 | 7分钟阅读

获取嘉宾演讲视频及PPT：http://suo.im/4SkvOx

摘要

前端性能按照类型来分主要分为加载性能和渲染性能。加载性能对于首屏的展示及其重要，而渲染性能对于页面加载完成后的交互体验极其重要。但目前绝大部分同学在提到前端性能的优化时都会默认等同于对加载性能的优化，而忽略了渲染性能。本次议题就从几个比较常见的角度聊聊开发中会无意识碰到的渲染性能问题。

H5 VS Native

在将H5和native进行对比的时候，我们通常能想到的一点就是“快”，H5相对于native开发和上线都会快一些，一般的活动页面和非关键页面更多的倾向于H5来开发。

当然H5也有相应的缺点，它的加载和操作会慢一些，抽象来看就是性能问题。加载慢对应的是加载性能，操作慢对应的是渲染性能。加载性能可被定义为页面首次加载时候的性能，这方面的优化方案主要有静态资源压缩、懒加载、雪碧图、CDN、server push等。

渲染性能可被定义为页面进行操作/交互时候的性能，对于这方面的优化可能并不太容易想到。我在面试的时候也经常会问面试者关于性能优化的问题，不过大部分提到的优化方案都是关于加载性能，少部分会提到GPU加速，相对来说这部分同学的CSS技能会高一些。

渲染

一般一次渲染都会经过JavaScript > style > layout > paint > compoasite这样的过程。在做动画的时候可以进行优化，将layout和paint省略掉，这其实是将做动画的元素提升为一个单独的层。

渲染性能的优化可以针对渲染过程中的每一步来做，下面列出了google开发者论坛中提到的具体优化措施。

优化JS执行（JS）
缩小样式计算的范围并降低其复杂性（style）
避免大型、复杂的布局和布局抖动（layout、paint）
使用输入处理程序去除抖动（layout、paint）
坚持仅合成器的属性和管理层技术（composite）
简化绘制的复制度、减小绘制区域（paint、composite）

层的优化

上面加粗的两个优化手段可以总结为层的优化，也就是开启GPU加速。这里我们先假设一个场景，在一个页面中存在两个水平排列的元素1、2，他们分别位于左右两端，我们要做的是将1移动到2的位置。对此最简单的方案是设置position并改变right或left的值。第二种方式是使用transform：translateX，并加上 will-change: transform/transform: translate(0)将它提升为单独的层，这种方案的好处在于启用了GPU加速。

这样看来只要应用GPU加速就能很好的解决动画优化问题，但是实际应用中的页面往往要比上面所描述的场景复杂的多。就拿饿了么的H5页面来说，它除了有轮播外还涉及到页面滚动、点击展开，返回顶部等。当开启layer borders查看时会发现滑动的过程中如果轮播图正在播放整个页面就会创建很多不必要的层。另外开启Paint flashing查看重绘情况时也会发现每次轮播图播放都会导致整个页面重绘。这种问题在低端手机上可能会造成闪屏，需要额外注意。解决方案其实前面也提到过就是要将做动画的元素提升为一个单独的层（合成层）。

之前说过动画的问题有两种解决方案，如果这两个方案结合在一起又会怎么样呢，也就是将position和will-change写在同一个元素上，这在实际写代码的过程中是很容易碰到的。由此引出了新的问题，浮动元素（渲染层）和合成层的关系。对此我个人做了下总结：若合成层的z-index值小于下方兄弟元素，且他们有重叠，则下方兄弟元素也会被提升为合成层。