HTML页面性能指标

两个事件

DOMContentLoaded

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

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

load

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

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

四个指标

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

白屏时间

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

首屏时间

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

可交互时间

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

整页时间

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

DevTools下的三个时间

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

• Finish: 1.31s -表示整个页面加载时间为640ms，包括load事件发生后还有一些异步资源也加载完成。
• DOMContentLoaded: 329ms -发生在页面DOMContentLoaded事件的启动时间点，对应上图蓝色竖线。
• Load: 1.25s -表示页面load事件的启动时间点，对应上图红色竖线。

转载于:https://my.oschina.net/yidao620c/blog/3002104