花了一段时间,以思维导图的形式整理了一下前端性能优化的一些知识点,包括前端性能监控、2019年前端性能优化清单以及前端性能优化策略的选择,再附上一些参考链接,希望对大家有帮助!
1、window.performance 是干啥的? window.performance 是用来测量网页和 web 应用程序的性能,他提供一组精确的数据,通过一些简单的计算,就可以得出一些有关网页的性能数据。 performance API 如下图展示:
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、前端性能优化清单
性能优化清单--概要:
性能优化清单--详细:
起步:计划与指标:
设置可行的目标;
定义环境:
资源优化:
构建优化:
交付优化:
HTTP/2:
测试与监控:
速效方案:
推荐阅读:
3、前端性能优化策略