共计 2013 个字符，预计需要花费 6 分钟才能阅读完成。
Chrome 插件地址：Performance Assistant
源码：Github 地址
背景
页面加载性能是前端工程师对页面关注最多的问题之一，对前端我的项目做了加载优化，想查看加载性能直观数据，比方 onload 触发工夫、TTI、FCP 等等，个别是利用开发者工具的 Performance 或者 Lighthouse 来达到目标，或者对页面注入相似上面的性能统计代码，来打印或者上报加载性能数据。而这些形式利用现有工具不够快捷，监控代码要嘛入侵代码或要嘛须要集成进前端脚手架，对于咱们简略查看页面加载数据的诉求有些大费周章的感觉。所以搞了一个 Chrome 插件，页面刷新之后间接就能查看加载性能数据，简略高效。
// 计算性能指标
(() => {const createConsole = (desc, val) => console.log(`%c${desc}`,
'color:#fff;background:red;padding:2px 6px;border-radius:3px;',
val);
window.addEventListener('load', () => {
const timing = performance.timing;
createConsole('DNS 解析耗时', timing.domainLookupEnd - timing.domainLookupStart);
createConsole('TCP 连贯耗时', timing.connectEnd - timing.connectStart);
createConsole('网络申请耗时', timing.responseStart - timing.requestStart);
createConsole('数据传输耗时', timing.responseEnd - timing.requestStart);
createConsole('页面首次渲染工夫', timing.responseEnd - timing.navigationStart);
createConsole('首次可交互工夫', timing.domInteractive - timing.navigationStart);
createConsole('DOM 解析耗时', timing.domInteractive - timing.responseEnd);
createConsole('DOM 构建耗时', timing.domComplete - timing.domInteractive);
createConsole('HTML 加载实现,DOM Ready', timing.domContentLoadedEventEnd - timing.navigationStart);
createConsole('页面齐全加载耗时', timing.loadEventStart - timing.navigationStart);
});
})();对于页面加载过程中波及各个事件节点不分明的同学能够看下 W3C 的官网介绍《Navigation Timing》，不想看英文的同学能够看下《Web 性能优化 - 首屏和白屏工夫》这篇文章，对工夫节点的形容很具体。具体的就是上面这张图：
Chrome 插件：Performance Assistant
提供最简略的查看页面加载性能的形式和指标定制化的能力，反对继续监控，能够查看页面一段时间内的加载性能数据变动。
装置办法
- 形式一：Chrome 利用商店间接装置公布版本 – Performance Assistant
- 形式二：通过 chrome 加载已解压的扩大程序，下载源码，抉择我的项目中的 build 文件夹即可
简略查看数据
刷新页面之后，点击右上角插件 icon，能够查看加载性能数据如下：（ 指标都是依照 performance.timing 现有属性值来的，指标名称和参加计算的属性释义可参考《Web 性能优化 - 首屏和白屏工夫》、《Navigation Timing》）
点击加号能够查看计算指标依赖的数据：
自定义指标
因为不同利用场景，对指标的定义可能不同，插件也提供了自定义指标的能力，能够关上开发者工具，抉择 Performance assistant 这个 tab，进行更多操作。包含新增自定义指标，删除已有指标，或者对已有默认指标进行编辑。当然你也不必放心会改乱掉，点击下方的重置按钮就能让所有指标复原默认值：
性能数据可视化
勾选“继续监控”后，刷新页面，插件会记录每一次页面加载后的数据，并出现可视化图表不便察看变化趋势。日志数据存在本地，不必的历史数据能够革除。
后话
只是想简简单单看个加载工夫数据，终于不必再给业务代码注入监控代码了。插件还是第一版，优先满足最迫切的需要痛点，后续还会减少一些辅助性能，比方：
- 设置各个指标基准值，超过就显示正告
- 刷新页面自动更新监控图表
- 优化日志的显示
- 提供更多的性能数据分析能力
- 提供日志数据上报能力
欢送应用的同学提供宝贵意见，一起共建。
