你一定要经历的 web 页面性能优化之旅 · 05

上图是用户监测性能模型的不同阶段，可以看出，页面加载被定义成很多个阶段，每一个阶段都对应有 Performance Timing

页面性能指标

首字节时间(TTFB):衡量网络链路和服务器响应性能时间
带宽时间(Content download):带宽时间
白屏时间:打开页面开始到页面开始有东西呈现的时间（TTFB+HTML 下载时间+头部资源加载时间）
- 公式
页面开始渲染的时间点-页面开始请求时间点
- 如何获取
(chrome.loadTimes().firstPaintTime - chrome.loadTimes().startLoadTime)*1000
首屏时间:首屏所有内容都呈现的时间
- 原理
首屏时间比较复杂，因为要考虑图片加载和异步请求等，影响首屏的主要因素是图片，统计图片加载完成时间就可以获取首屏时间
- 公式
首屏内容渲染结束时间点-页面开始请求时间点
- 实现
同步加载：给首屏所有图片绑定 load 事件，页面加载完毕后判断图片是否在首屏内，遍历图片标签的加载时间获取最大值，要注意 iframe 也要算到首屏时间；css 中的背景图片没有计算在内，如果要计算，需要 js 加载图片，设置内联样式；如果有异步加载，这部分时间也要计算在内
用户可操作时间:用户可以进行正常的点击和输入操作等的时间
- 公式
用户可以正常进行输入时间点-页面开始请求时间点
- 如何获取
先解释两个时间：

1） performance.timing.domInteractive ：返回当前网页 DOM 结构结束解析、开始加载内嵌资源时（即 Document.readyState 属性变为“interactive”、相应的 readystatechange 事件触发时）的时间

2）performance.timing.navigationStart：前浏览器窗口的前一个网页关闭，发生 unload 事件时的时间，如果没有前一个网页就是浏览器准备读取文档的时间

performance.timing.domInteractive - performance.timing.navigationStart
总下载时间:页面 onload 的时间
- 原理
window.onload 时间，同步加载资源与异步加载资源全部完成的时间
- 如何获取
先解释时间：

1）performance.timing.loadEventStart:如果前一个网页与当前网页属于同一个域名，则返回前一个网页的 unload 事件发生时的时间。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为 0。

performance.timing.loadEventStart - performance.timing.navigationStart

Lighthouse

提供的统计页面性能的集成工具，包含 FMP（First Meaningful Paint）、FI（First Interactive），CI（Consistently Interactive），PSI（Perceptual Speed Index），Lighthouse 可以作为命令行工具使用，也可以在 chrome 商店中搜索 Lighthouse，当一个 chrome 插件使用，最后会生成一份性能分析报告

以https://m.baidu.com为例，生成的性能分析报告截图

参考

前端感官性能的衡量和优化实践 https://tech.meituan.com/2017/09/22/optimization-of-front-end-sensory-properties.html

前端性能指标统计 https://juejin.im/post/5b5ed5046fb9a04fd343a8c7

Web 前端性能基础指标&计算方式 https://cloud.tencent.com/developer/article/1121389

2019 前端性能优化年度总结 https://iangeli.com/2019/02/13/2019-%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%B9%B4%E5%BA%A6%E6%80%BB%E7%BB%93.html

2019 前端性能优化年度总结原文 https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/