Skip to main content

Chrome性能分析工具

LightHouse

LightHouse是chrome的一个插件，打开面板发现新加一个LightHouse选项，点击 Generate report会给我们生成性能报告，并提出一些能够优化的建议，效果如下：
Locale Dropdown

通过npm安装依赖：

npm install -g lighthouse

然后进行测试

lighthouse http://www.baidu.com/

更详细内容请参考lighthouse

PageSpeed

去 Chrome 搜索 pagespeed 选择 PageSpeed Insights (with PNaCl) 添加至 Chrome 即可

打开控制面板会发现新加一个 PageSpeed 的项,点击 START ANALYZING 会列出我们可以优化的点

Locale Dropdown

WebPageTest

webpagetest是一款前端性能分析工具，可以在线测试，也可以单独搭建本地服务器，多测试点，全面性能报告，性能分析神器。

Locale Dropdown

可以点开具体报告查看里面每个资源加载的具体时间、文件大小。

PerformanceObserver

可以利用 PerformanceObserver (opens new window)来检测性能指标,如下:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取各种指标</title>
    <link rel="stylesheet"
        href="https://cdn.staticfile.org/twitter-bootstrap/5.0.0-alpha1/css/bootstrap-reboot.min.css" />
</head>

<body>
    <div id="app">
        <h1>aotu</h1>
    </div>

    <script>
        const observer = new PerformanceObserver((list) => {
            for (const entry of list.getEntries()) {
                console.log(entry.name);
                console.log(entry.startTime);
                console.log(entry.duration);
                console.log(entry.entryType);
            }
        });
        observer.observe({ entryTypes: ['paint', 'resource', 'mark'] });
    </script>
    <script>
        performance.mark('xikun')
    </script>
</body>

</html>

entryTypes 有如下几种:

属性含义
mark通过performance.mark()
measure通过performance.measure()
resource资源时间
frame、navigation文件地址
paint获取绘制的时间，主要是first-paint和first-contentful-paint
longtask在浏览器执行超过50ms的任务

使用框架web-vitals

可以通过npm包使用，也可以直接引入使用

<script type="module">
    import { getCLS, getFID, getLCP } from 'https://unpkg.com/web-vitals@0.2.4/dist/web-vitals.es5.min.js?module';

    getCLS(console.log);
    getFID(console.log);
    getLCP(console.log);
</script>

更多请查看web-vitals

performance.timing

可以使用浏览器的 API performance.timing 详细的记录 TCP连接,DOM解析,白屏 等时间:

<script>
  let t = performance.timing;

  DNS 解析耗时: domainLookupEnd - domainLookupStart
  TCP 连接耗时: connectEnd - connectStart
  SSL 安全连接耗时: connectEnd - secureConnectionStart
  网络请求耗时 (TTFB): responseStart - requestStart
  数据传输耗时: responseEnd - responseStart
  DOM 解析耗时: domInteractive - responseEnd
  资源加载耗时: loadEventStart - domContentLoadedEventEnd
  First Byte时间: responseStart - domainLookupStart
  白屏时间: responseEnd - fetchStart
  首次可交互时间: domInteractive - fetchStart
  DOM Ready 时间: domContentLoadEventEnd - fetchStart
  页面完全加载时间: loadEventStart - fetchStart
  http 头部大小： transferSize - encodedBodySize
  重定向次数：performance.navigation.redirectCount
  重定向耗时: redirectEnd - redirectStart

  if ((t = performance.memory)) {
    console.log('js内存使用占比 ：' +((t.usedJSHeapSize / t.totalJSHeapSize) * 100).toFixed(2) + '%');
  }
</script>

Locale Dropdown

Timeline(浏览器自带的性能监测工具)

网页动画能够做到每秒 60 帧,就会跟显示器同步刷新,一秒之内进行 60 次重新渲染,每秒重新渲染的时间 不能超过 16.66 毫秒

  • 蓝色:网络通信和 HTML 解析
  • 黄色:JavaScript 执行时间
  • 紫色:样式计算和布局,即重排
  • 绿色:重绘

window.requestAnimationFrame 下一次渲染

window.requestIdleCallback 下几次渲染