浅入深出Web性能优化-第一篇
一、衡量网页性能的重要指标
- 首次绘制（First Paint）: 参考@MDN 的说法，指浏览器将第一个像素渲染到屏幕上所需的时间
- 首次有内容绘制（First Contentful Paint）: 网页上出现任意有内容的东西需要的时间
- 首次有意义绘制（First Meaningful Paint): 系统的主要内容出现在页面上所需的时间
- 首次可交互时间（Time To Interactive): 网站可正常使用前，用户所需要等待的时间
- 首次输入延迟（First Input Dela）：从用户首次与页面交互，到网站能够响应该交互的时间
- CPU 耗时
- 内存使用情况
- 重排(reflow)和重绘(repaint)的频率
二、利用工具分析系统的性能
2.1 常用的性能分析工具
LightHouse
- 来源: 开源的自动化工具
- github仓库地址: [email protected]
- 优势: 对于测试性能指标中的时间相关指标很有效（首次绘制时间、首次有内容绘制等）
WebPageTest
- 来源: 开源的自动化工具
- github仓库地址: WebpageTest
- 优势:操作简单，输入相关URL即可进行分析测试，除了可分析时间相关性能指标外，还可以对CPU空闲时间等进行测试
Chrome_Performance
- 来源: Chrome-开发者工具
- 优势: 对系统性能分析的指标较为全面，包括时间相关(首次绘制FP等)性能指标、JS内存耗时、重排重绘出现的地方以及各个资源占用内存情况、消耗的时间进行评估。
Chrome-Memory
- 来源: Chrome-开发者工具
- 优势: 专门针对JS内存进行分析，可以用来辅助分析系统中是否存在内存泄漏的情况
以上工具的用法在这里不一一赘述，本文中重点一起探索Chrome-Performance的用法
2.2 使用Performance分析系统性能
1) 使用前的注意事项
• 停用扩展程序，以隐身模式打开 Chrome 窗口
• 停用浏览器缓存。从 DevTools 的 Settings 面板停用浏览器的缓存。
• 避免不必要的操作。避免与想要分析的内容无关联的操作；例如，如果想要记录点击 Login 按钮后发生的事件，不要进行滚动页面、加载图像等操作。
• 录制时间不宜过长(时间过长·，录制结果反而不容易分析)
2) 使用Performance分析系统的性能
第一步: 选择需要测试的页面，进行Performance录制
第二步: 分析录制结果
上半部分参数项概要:
FPS: 每秒帧数，可理解为刷新率
• 结果图中的绿色竖线用来表示FPS 值的高低；绿色线上方的红色块表示耗时长的动画帧(会导致页面卡顿)
• 该指标主要用来衡量动画的性能(PS:页面静止并无其他动画FPS值很低是正常现象)
• 衡量标准: 60FPS为最佳；最低值为30FPS
• FPS并非越高越好：FPS越高，则对显卡的处理能力要求越高
CPU： CPU资源使用情况
• CPU图表中的颜色与分析结果底部的“Summary”中的颜色代表项相对应。
• CPU的结果图中若充满颜色，说明在性能分析录制过程中，CPU已负载
NET：主要展示了网络请求的先后顺序以及各自的请求耗时，可以被 Network 面板完美替代
HEAP：记录了系统运行过程中JS内存的变化情况
中间部分参数项概要:
Network：主要展示网络请求的先后顺序以及各自的请求耗时
Frames：记录对应时间上的帧,鼠标移动到绿色条状图上即可查看
Interactions：记录录制过程中页面发生的用户交互
Main： 记录主线程的活动
• 结果图上每个柱状条代表一个事件，柱状条越宽说明事件耗时越久
• 右上角标注红色的柱状条为耗时过长的事件，选中红色提示即在Summmary中看到具体提示，有的提示能直接定位到代码源头
• 样式绘制问题也会在Main结果图中展示，例如重排重绘
下半部分参数概要:
图示中折线图部分是JS内存情况的记录，录制前只要勾选了memory选项，即可在结果中看到此项录制结果。可在Chrome开发者工具的Memory项中专门测试；
Summary则是对于系统资源耗时的一个统计:
• Rendering(页面渲染，样式计算和布局，即重排）
• Loading(网络通信和HTML解析)
• Scripting(JS脚本)
• Painting(样式绘制）
• system(系统耗时)
• Idle(空闲时间)
本文回顾:
优化Web性能，首先要了解衡量系统性能的指标，除了本文中总结的指标外，还可以根据项目自身情况制定相关的指标；其次，可以借助性能分析工具来分析系统的性能。Chrome开发者工具中的Performance就提供了很好的参数项来测试系统的性能。