继上一篇文章，给大家总结了H5性能优化的各种方法《H5优化：高性能加载的七大法则》，收到许多疑惑的反馈：“优化页面的性能，是否需要把这十八般武器全都用上，用上了，我的页面性能就足以秒杀大众了么？”，其实并不然！所谓“工欲善其事，必先利其器”，今儿和大家继续分享一个性能优化终极秘籍，关于Chrome浏览器自带的Timeline工具。
快速找出页面性能低下的根本原因，优雅选择解决要害问题的最佳方法，这是Timeline工具能赋予你的能力。
--网页生成与重绘--
在谈Timeline之前，我们要先复习一些老生常谈，但基础又重要的东西：“网页的生成过程”。这张图大家应该都很熟悉，浏览器解析一个页面的生成，大致可以分为如下5个部分：
- 解析HTML->DOM Tree
- 解析CSS-> Style Rules
- 将解析后的DOM+CSSOM-->生成渲染树
- 生成布局（layout）
- 布局绘制（paint）
今天我们更深入关注的，是这张图的进阶版，即红框中的重绘部分。
我们常说，“减少页面重绘是提升页面性能一大法则”。展开来看，一个广义的重绘流程会涵盖以下几个部分：JS读取，样式重新渲染，布局计算，表现层样式重新绘制（并不是每一个重绘都需要这样一个流程）。Timeline 最基础功能点就是看到在这样一个渲染过程中，浏览器到底做了那些具体的工作，以此来挖掘页面背着你做了什么不该做的事情！
--Timeline基础功能--
Timeline工具归属在Chrome的DevTools里，属于录制型工具，需要先录制交互过程，再查看过程的效果。（ctrl+E 录制，ctrl+R 回看）录制后右键菜单可将记录保存或加载已有记录，工具的基本菜单栏上，支持对事件的过滤和搜索。在录制的过程中，建议大家：
尽可能的缩短记录时间，避免不必要的动作。禁用浏览器缓存， 可以使用隐身模式打开Chrome窗口来测试来防止浏览器插件的影响。
Timeline工具记录的事件类型，可以分为以下四种：加载、脚本执行、渲染和绘制。图示可以清楚看出：哪种色块比较多，就说明性能耗费在那里。色块越长，问题越大。
--帧模式--
而Timeline工具的查看模式有 1.帧模式 2.事件模式 3.内存模式三种。通过下图按钮进行切换。第三种内存模式，需要在选中为帧模式的情况勾选Memory的抓取类进行查看。然而最适合咋们UI工程师去关注的，应该就是帧模式了。帧模式下的视图，最适合用于洞察页面渲染性能的能力。
--帧率--
fps帧率是各位所熟知的一个概念了。60fps是人眼的极限，低于24fps的动画，人眼就能感受到停顿，网页动画最好控制在30fps~60fps之间。浏览器的一个帧表示：浏览器为了渲染单个内容块而必须要做的工作。若我们要保证它的帧率在60fps,，则浏览器需要在一秒内进行60次的重新渲染，每次渲染时间<16.66ms。如果浏览器不能再16.66ms内处理完一个渲染帧该做的事情，那么就如下图所示，是我们常说的“丢帧”现象，也就是会给动画带来卡顿的本质原因。
使用Timeline工具的帧模式，便可清晰的看到浏览器每一帧的渲染详情。以http://www.peelentertainment.com/站点为例子，我们录制了一小段窗口改变的timeline记录。
1.基本操作
2.关于CPU详情的查看
3.帧详情的查看
4.筛选功能的使用
5.查看脚本根源
--空闲--
在帧视图中，我们可以看到或多或少有一些透明的帧存在。Google的官方文档解释翻译为：2次刷新之间的空闲时间，而引起它的具体原因其实有2个：（1） js占用了主线没有空在timeline上渲染(CPU繁忙) （2） GPU遇到了性能瓶颈。
如上图所示，一个帧的完整绘制，常常需要CPU和GPU的共同完成。GPU可等同于CPU的小弟，听候吩咐完成一些图像绘制的简单计算。故如左侧图，有时候GPU还未完成上一帧的工作，CPU已经完成了下一帧的工作，因而出现了如左侧的IDLE时间。如右侧图，有时候GPU快速的完成了第一帧的绘制工作，而CPU繁忙，还不能及时交给GPU第二帧图像的绘制，就导致了右图的IDLE时间。这便是这些2帧空隙时间的由来。
我们想要动画的性能好，总是通过translate3d等属性来开启GPU渲染，但其实带有 ‘-webkit-’前缀的渲染， preserves3D 属性的元素，容易带有很多超大的层，会引起左图所示的GPU bound。这并不是完全的有利于性能的提升，我们需要合理适当的使用这些属性。
--其他监控--
其实还有一种更直观简单的帧率监控。藏在Devtools的Renderingtab下。勾选后，页面右上方会出现下图的监视器，即可在与页面的交互操作中，试试观察帧率的变化。
--事件模式与内存模式--
除去帧模式，Timeline还有事件模式和内存模式。事件模式能看出你在各种类型的任务上的主要的时间消耗趋势，而内存模式可通过图表显示页面随着时间的推移所使用的内存。具体的示例图如下，这个的使用场景并不太多，但在查询你的脚本是否有内存泄露的时候非常好用。
--Screenshots--
Timeline还有个炫酷的功能，就是Screenshots。在页面录制的时候，在Capture中勾选Screenshots.工具会自动帮你截图存下每一帧的页面图片，特别适合对于页面动画优化的捕捉和调整。
--Paint--
这是Capture另一个炫酷的功能，保存下每一帧动画的层元素。只要勾选Paint这个选项，点卡Layers的这个tap，就可以查看到页面渲染的层的情况。如下图所示，这个peelentertainment站点页面体验性能不高，原因之一 一定是因为这个页面存在太多且非常巨大的layer。（关于动画和层的概念，我们下一次在细细分享）
--Rendering的特殊功能--
Show paint rectangles 显示绘制矩形 点开Rendering这个选项的时候，可以查看当前页面的重绘情况，方便排除一些不必要的重绘。如下图截图，这些原点自行飘动的动画，就导致整个它们一直处于重绘的状态。
通过这个工具，也可以发现Fixed会导致页面一直重绘。
此外，重绘是连带属性，一个元素的重绘通常会影响父元素，及周围元素跟着一直进行重绘。下图仅仅是hover了一个模块，但它导致了上下2个模块的重绘。
Show composited layer borders 显示层的组合边界，点开Rendering这个选项的时候，页面上会对不同的层使用线框进行框选，这可以查看当前页面的layer情况，更好的发现页面不需要的layer将之清除。如下图，人物下方的原点，banner的切换，banner上的原点，都是单独的层。
以上就是Timeline与页面性能探索相关的基本功能了，如本文开头所言，“工欲善其事，必先利其器”，相信在熟悉了Timeline这个性能挖掘机之后，对小伙伴们快速找到页面性能痛点能带来很大的帮助！此外...敬请期待..Timeline进阶篇^^~
浙公网安备 33010602011771号