利用Performance API分析网站性能

news/2024/5/9 7:19:11/文章来源:https://liuxuan.blog.csdn.net/article/details/78568877

performance

window.performance.timing对象包含了完整的网页加载性能数据, 下面详细介绍如何通过对象各个属性获取页面加载期间各个阶段的性能

页面加载的第一个时间点是navigationStart, 表示上一个页面的unload事件触发, 接下来的事件点是fetchStart, 表示开始获取当前页面内容. fetchStart时间点和navigationStart时间点之间的时间差是浏览器内核为加载新页面做的一些准备工作耗时.
获取页面内容的第一步是查询是否有跟页面相关的资源缓存, 查询完毕之后, 会触发开始DNS解析的时间点domainLookupStart. domainLookupStart时间点和fetchStart事件点之间的时间差是查询缓存所消耗的时间.
DNS解析结束的时间点是domainLookupEnd. domainLookupEnd时间点和domainLookupStart时间点之间的时间差是DNS解析消耗的时间
DNS解析技术之后会开始建立TCP连接, TCP连接开始和结束的时间点分别是connectStart和connectEnd. connectStart时间点紧接着domainLookupEnd时间点, connectEnd时间点和connectStart时间点之间的时间差是建立TCP消耗的时间.
TCP连接建立之后, 开始发送请求内容至服务器端, 这个时间点是requestStart. 服务器端接收到完整请求并处理完毕后, 会将响应结果返回客户端, 开始发送响应结果的时间点为responseStart. 浏览器收到完整的响应结果之后, 会触发responseEnd时间点
浏览器接收到响应的结果之后, 会开始DOM树解析, 这个时间点是domLoading, DOM解析完成的时间点是domInteractive. DOM解析完成是指DOM树构建完成, 页面依赖的外部资源, 如css, javascript, 图片等. 还未开始加载.(domLoading时间点不一定在responseEnd时间点之后, 有可能浏览器只接受了部分响应数据就开始解析DOM树)
DOM树解析完成之后, 会开始按照顺序运行页面脚本和加载依赖外部资源, 其中Javascript资源会同步加载和执行. 一但所有页面脚本运行完毕, 会触发DOMContentLoaded事件, 这个时间点是domContentLoadedStart.
开发者注册的DOMContentLoaded事件执行完毕之后, 会触发domContentLoadedEnd时间点.
当依赖的外部资源全部加载并解析完成之后, 会触发domComplete时间点, 同时会发触发暴露给开发者的load事件. loadEventStart时间点表示load事件开始触发, loadEventEnd时间点表示所有开发者注册在load事件上的脚本执行完毕.