前端页面性能知识点

页面性能

为了解决当前性能测试的困难，W3C推出了一套性能API标准，各种浏览器对这套标准的支持如今也逐渐成熟起来。
这套API的目的是简化开发者对网站性能进行精确分析与控制的过程，最终实现性能的提高。

页面性能有哪些指标

timing各属性

指标的主要流程：
准备开始发起请求->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的事件中，获取性能数据，进行上报。