对于一次组内分享的整理，PPT资源放在了我的个人github pages上点击这里查看（建议Timeline的时候使用隐身模式避免插件影响，快捷键command+shift+n）

Chrome 程序性能分析

Network

Network主要有5个视窗，分别有不同的功能：

  • Controls 工具栏：用来控制Network的功能及外观。
  • Filters 筛选栏：根据筛选条件筛选请求列表，按住command/ctrl键可多选。
  • Overviews 概览：资源被加载过来的时间线，如果多条时间线垂直堆叠，表示多个资源被并行加载。
  • Request Table 请求列表：该视窗列出了所有的资源请求，默认按时间顺序排序，点击某个资源，可以查看更详细的信息。
  • Summary 总览：汇总了请求数量，传输数据大小，加载时间等信息。

默认情况下，Request Table 请求列表展示如下信息，当然，在请求列表的表头右键可以配置请求列表显示的内容。

  • Name：资源的名称。
  • Status：HTTP的状态码。
  • Type：资源的MIME类型。
  • Initiator：表示请求的上游，即发起者。Parser表示是HTML解析器发起的请求；Redirect表示是HTTP跳转发起的请求；Script表示是由脚本发起的请求；Other表示是由其他动作发起的请求，比如用户跳转或者在导航栏输入地址等。
  • Size：请求的大小，包括响应头和响应体的内容。
  • Time：请求的时间，从请求开始到请求完全结束。
  • Timeline：请求的时间线。

浏览器拿到网页后加载过程

  • 解析HTML结构。
  • 加载外部脚本和样式表文件。
  • 解析并执行脚本代码。// 部分脚本会阻塞页面的加载
  • DOM树构建完成。//DOMContentLoaded 事件
  • 加载图片等外部文件。
  • 页面加载完毕。//load 事件

请求上下游

按住Shift查看资源请求上下游
其中绿色请求表示common.js的上游请求，即谁触发了V20160804a.js请求，红色请求表示common.js的下游请求，即common.js又触发了什么请求。
上下游

Timeline可以重新排序，主要有如下几个维度。

  • Timline - Start Time：按请求的发起时间排序。
  • Timline - Response Time：按请求的响应时间排序。
  • Timline - End Time：按请求的结束时间排序。
  • Timline - Total Duration：按请求的总耗时排序，可以快捷的找出耗时最多的资源。
  • Timline - Latency：按请求的延迟排序，延迟是指请求发起的时间到响应开始的时间，可以快捷的找出请求等待时间最长（TTFB）的资源。

强大的过滤器功能

  • domain：筛选出指定域名的请求，不仅支持自动补全，还支持*匹配。
  • has-response-header：筛选出包含指定响应头的请求。
  • is：通过is:running找出WebSocket请求。
  • larger-than：筛选出请求大于指定字节大小的请求，其中1000表示1k。
  • method：筛选出指定HTTP方法的请求，比如GET请求、POST请求等。
  • mime-type：筛选出指定文件类型的请求。
  • scheme：筛选出指定协议的请求，比如scheme:http、scheme:https。
  • set-cookie-domain：筛选出指定cookie域名属性的包含Set-Cookie的请求。
  • set-cookie-name：筛选出指定cookie名称属性的包含Set-Cookie的请求。
  • set-cookie-value：筛选出指定cookie值属性的包含Set-Cookie的请求。
  • status-code：筛选出指定HTTP状态码的请求。

Timeline

Timeline的四个视图窗

  • Controls 工具栏：提供了录制，清除记录，配置录制过程中需要捕捉哪些数据的功能。
  • Overview 概览：页面性能的概览图，通过此图可以大致的分析页面。
  • Flame Chart 火焰图：展示了JavaScript的调用堆栈信息。其中蓝线表示DOMConentLoaded事件，绿线表示第一次绘制，红线表示load事件，由此也可以看出DOMContentLoaded事件比load事件要早不少。
  • Details 详情：选中某个事件，会显示该事件的信息，如果没有选中任何事件，就会显示选中时间区段的帧信息。

为什么是60帧

我们的目标是保证页面要有高于每秒60fps(帧)的刷新频率，这和目前大多数显示器的刷新率相吻合(60Hz)。如果网页动画能够做到每秒60帧，就会跟显示器同步刷新，达到最佳的视觉效果。这意味着，一秒之内进行60次重新渲染，每次重新渲染的时间不能超过16.66毫秒(包括：执行js，处理事件，修改DOM，更改样式和布局，绘制页面等。)

渲染分几步

渲染分几步

  • JavaScript：JavaScript实现动画效果，DOM元素操作等。
  • Style（计算样式）：确定每个DOM元素应该应用什么CSS规则。
  • Layout（布局）：计算每个DOM元素在最终屏幕上显示的大小和位置。由于web页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫reflow。
  • Paint（绘制）：在多个层上绘制DOM元素的的文字、颜色、图像、边框和阴影等。
  • Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。

优化方法

requestAnimationFrame

跟着浏览器的绘制走，如果浏览设备绘制间隔是16.7ms，那我就这个间隔绘制；如果浏览设备绘制间隔是10ms，我就10ms绘制

Web Workers

在后台单独起一个线程来执行JS，不占用浏览器主线程，可以针对耗时且不操作dom的JS文件

使用flexbox代替传统布局

同样对1300个元素的布局，传统DIV布局13.7ms，flexbox仅需3.4ms

避免强制同步布局

优化插件：fastdom

提升动画效果中的元素

耗电