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

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 性能优化-首屏和白屏时间》这篇文章，对时间节点的描述很详细。具体的就是下面这张图：