图解前端性能优化

作者: 贵在随心 | 来源:发表于2019-05-08 14:10 被阅读17次

前端性能优化（中）
前端性能优化（下）
前端性能优化（上）
图解前端性能优化
图解前端性能优化
前端面试必问及加分点---性能优化篇
前端性能优化
常用的后端性能优化六种方式：缓存化+服务化+异步化等
关于前端性能优化问题详解
前端性能优化

花了一段时间，以思维导图的形式整理了一下前端性能优化的一些知识点，包括前端性能监控、2019年前端性能优化清单以及前端性能优化策略的选择，再附上一些参考链接，希望对大家有帮助！

1、window.performance 是干啥的？
window.performance 是用来测量网页和 web 应用程序的性能，他提供一组精确的数据，通过一些简单的计算，就可以得出一些有关网页的性能数据。
performance API 如下图展示：

perfomance

timing 结构图

window.performance.timing

timing 各字段详解如下：

timing 字段

代码实现性能指标测试：

所以根据上面的时间点，我们可以计算常规的性能值，如下：
（使用该api时需要在页面完全加载完成之后才能使用，最简单的办法是在window.onload事件中读取各种数据，因为很多值必须在页面完全加载之后才能得出。）
 
var timing = window.performance && window.performance.timing;
var navigation = window.performance && window.performance.navigation;
 
// 重定向次数：
var redirectCount = navigation && navigation.redirectCount;
 
// 跳转耗时：
var redirect = timing.redirectEnd - timing.redirectStart;
 
// APP CACHE 耗时：
var appcache = Math.max(timing.domainLookupStart - timing.fetchStart, 0);
 
// DNS 解析耗时：
var dns = timing.domainLookupEnd - timing.domainLookupStart;
 
// TCP 链接耗时：
var conn = timing.connectEnd - timing.connectStart;
 
// 等待服务器响应耗时（注意是否存在cache）：
var request = timing.responseStart - timing.requestStart;
 
// 内容加载耗时（注意是否存在cache）:
var response = timing.responseEnd - timing.responseStart;
 
// 总体网络交互耗时，即开始跳转到服务器资源下载完成：
var network = timing.responseEnd - timing.navigationStart;
 
// 渲染处理：
var processing = (timing.domComplete || timing.domLoading) - timing.domLoading;
 
// 抛出 load 事件：
var load = timing.loadEventEnd - timing.loadEventStart;
 
// 总耗时：
var total = (timing.loadEventEnd || timing.loadEventStart || timing.domComplete || timing.domLoading) - timing.navigationStart;
 
// 可交互：
var active = timing.domInteractive - timing.navigationStart;
 
// 请求响应耗时，即 T0，注意cache：
var t0 = timing.responseStart - timing.navigationStart;
 
// 首次出现内容，即 T1：
var t1 = timing.domLoading - timing.navigationStart;
 
// 内容加载完毕，即 T3：
var t3 = timing.loadEventEnd - timing.navigationStart;

2、前端性能优化清单