页面性能
为了解决当前性能测试的困难,W3C推出了一套性能API标准,各种浏览器对这套标准的支持如今也逐渐成熟起来。
这套API的目的是简化开发者对网站性能进行精确分析与控制的过程,最终实现性能的提高。
页面性能有哪些指标
指标的主要流程:
准备开始发起请求->DNS查询(开始和结束)->建立HTTP连接(完成TCP三次握手)->开始发起请求->接受服务器响应(开始和结束)->dom解析(开始和结束)->网页内其他资源加载(开始和结束)->页面全部加载解析完成
页面性能指标的统计方式
重要性能指标计算方式如下。
var timing = window.performance.timing;
// DNS 解析耗时:
var dns = timing.domainLookupEnd - timing.domainLookupStart;
// TTFB (Time To First Byte) 服务器返回第一个字节到浏览器的时间
var request = timing.responseStart - timing.requestStart;
// 页面HTML请求到服务器响应完成耗时
var response = timing.responseEnd - timing.requestStart;
// 白屏时间,即首次出现内容的时间
var t1 = timing.domLoading - timing.navigationStart;
// 页面全部资源加载并且解析完成时间
var t3 = timing.loadEventEnd - timing.navigationStart;
// 当前页面所有资源的各自加载数据
var resourceList = window.performance.getEntriesByType(“resource”);
页面性能的优化方式
参考Chrome官方的优化策略
https://developers.google.com/speed/docs/insights/about?hl=zh-CN&utm_source=PSI&utm_medium=incoming-link&utm_campaign=PSI#header_2使用性能优化检测工具
https://developers.google.com/web/tools/lighthouse/
页面性能监控的代码实现策略
在页面onload
的事件中,获取性能数据,进行上报。