HTML页面性能指标

发表于 2018-08-23 分类于 web

前端页面的性能一直都是一个热议的话题，从老早雅虎提出的35条”军规”开始我们就一直在关注页面的性能问题。

在前面巨人们的身后每个人也有自己的一些页面性能的经验，本文主要是介绍页面加载事件和性能评价指标。

浏览器渲染页面

首先给一张直观图：

这是在网上找的一张图，虽然是用来描述 performance 的 API 但是也很好的描述了浏览器是怎么处理一个页面渲染的。

这是我们在 PC 时代考虑的浏览器性能，主要在服务端响应、文档下载、文档渲染三个阶段，性能优化大部分也集中在这三个阶段。针对这部分的监控、分析非常的普遍了。

DOMContentLoaded

MDN的解释：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。

意思是HTML下载、解析完毕之后就触发。

load

MDN的解释：load 应该仅用于检测一个完全加载的页面当一个资源及其依赖资源已完成加载时，将触发load事件。

意思是页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件。

一般页面性能有四个常见的指标

白屏时间

指浏览器发起请求到开始显示第一个页面元素的时间。现代浏览器不会等待CSS树（所有CSS文件下载和解析完成）和DOM树（整个body标签解析完成）构建完成才开始绘制，而是马上开始显示中间结果。所以经常在低网速的环境中，观察到页面由上至下缓慢显示完，或者先显示文本内容后再重绘成带有格式的页面内容。

首屏时间

首屏时间（FirstScreen Time），是指用户看到第一屏，即整个网页顶部大小为当前窗口的区域，显示完整的时间。常用的方法有，页面标签标记法、图像相似度比较法和首屏高度内图片加载法。

可交互时间

用户可以进行正常的点击、输入等操作，默认可以统计DOMContentLoaded事件发生的时间。

整页时间

整页时间（Page Load Time），页面所有资源都加载完成并呈现出来所花的时间，这个就是load事件发生的时间。

在使用Google Chrome开发者工具的是，使用Network测试网络性能时候，下面有三个时间。