查看页面加载性能从未如此简单

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，进行更多操作。包括新增自定义指标，删除已有指标，或者对已有默认指标进行编辑。当然你也不用担心会改乱掉，点击下方的重置按钮就能让所有指标恢复默认值：

性能数据可视化

勾选“持续监控”后，刷新页面，插件会记录每一次页面加载后的数据，并呈现可视化图表方便观察变化趋势。日志数据存在本地，不用的历史数据可以清除。

后话

只是想简简单单看个加载时间数据，终于不用再给业务代码注入监控代码了。插件还是第一版，优先满足最迫切的需求痛点，后续还会增加一些辅助功能，比如：

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

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