关于chrome:查看页面加载性能从未如此简单

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 加载已解压的扩大程序，下载源码，抉择我的项目中的 build 文件夹即可

刷新页面之后，点击右上角插件 icon，能够查看加载性能数据如下：（ 指标都是依照 performance.timing 现有属性值来的，指标名称和参加计算的属性释义可参考《Web 性能优化 - 首屏和白屏工夫》、《Navigation Timing》）

点击加号能够查看计算指标依赖的数据：

因为不同利用场景，对指标的定义可能不同，插件也提供了自定义指标的能力，能够关上开发者工具，抉择 Performance assistant 这个 tab，进行更多操作。包含新增自定义指标，删除已有指标，或者对已有默认指标进行编辑。当然你也不必放心会改乱掉，点击下方的重置按钮就能让所有指标复原默认值：

勾选“继续监控”后，刷新页面，插件会记录每一次页面加载后的数据，并出现可视化图表不便察看变化趋势。日志数据存在本地，不必的历史数据能够革除。

只是想简简单单看个加载工夫数据，终于不必再给业务代码注入监控代码了。插件还是第一版，优先满足最迫切的需要痛点，后续还会减少一些辅助性能，比方：

设置各个指标基准值，超过就显示正告
刷新页面自动更新监控图表
优化日志的显示
提供更多的性能数据分析能力
提供日志数据上报能力

欢送应用的同学提供宝贵意见，一起共建。

关于chrome:查看页面加载性能从未如此简单

背景

Chrome 插件：Performance Assistant

装置办法

简略查看数据

自定义指标

性能数据可视化

后话