前端页面的性能一直都是一个热议的话题,从老早雅虎提出的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事件发生的时间。
DevTools下的三个时间
在使用Google Chrome开发者工具的是,使用Network测试网络性能时候,下面有三个时间。
- Finish: 1.31s -表示整个页面加载时间为640ms,包括load事件发生后还有一些异步资源也加载完成。
- DOMContentLoaded: 329ms -发生在页面DOMContentLoaded事件的启动时间点,对应上图蓝色竖线。
- Load: 1.25s -表示页面load事件的启动时间点,对应上图红色竖线。