Devtools之Performance

Chrome Devtools 提供了查看性能的工具 Performance，可以查看如下信息

页面加载性能指标
网络请求的顺序，耗时等等
内存使用情况
帧率
主线程执行情况
…

我们常说的性能，存在诸多影响因素，例如

客户端的硬件好坏
客户端到服务端的网络好坏
服务端的资源
前端资源

这几点像木桶效应，存在任何一个短板，都会导致用户体验急剧下滑，我们可以使用 Performance 进行分，并优化页面性能。

Performance

概览

可以查看页面在某一时刻的状态，鼠标 Hover 即可

Network

常用颜色如下所示，且同颜色下深色表示优先级高，浅色表示优先级低

紫色：表示 CSS 请求
黄色：表示 Javascript 请求
绿色：图片请求
蓝色：HTML 请求，AJAX 请求
灰色：AJAX 请求

作用

查看请求的发起时间和结束时间，可以用来分析资源请求分配时间是否合理
查看资源的网络请求时间和以及前端解析时间，用于分析资源大小是否合理

还可以在 Devtools 的 Network 下查看一个请求的耗时细分

Frames

此处可以查看每一帧的耗时和间隔，用于判断渲染是否流畅，是否被什么阻塞了

查看帧数

Timings

查看 Web 性能指标

线程面板

记录了主线程和 worker 线程的执行栈（火焰图），可以分析调用栈是否合理。例如可以分析在某一帧的时候，是否因为 Javascript 线程执行时间过久，从而堵塞了 GUI 线程

内部常用的颜色标注如下

蓝色：Loading 或 Parsing
黄色：Scripting
紫色：Rendering
绿色：Painting
灰色：System
空闲：Idle

Summary

总的显示线程面板，可以分析具体是哪一块比较耗时，例如可以根据 Rendering 耗时情况，判断是否存在不合理的重排

Memory

记录内存使用情况。例如可以从内存的曲线判断是否存在内存泄漏

Performance monitor

可以实时监测页面的状态，可通过 Devtools 命令面板开启

举个例子

for (let i = 0; i < 1000; i++) {
  div.className = "div";
  div.style.left = Math.random() * (width - 100) + "px";
  div.style.top = Math.random() * (height - 100) + "px";

  document.body.appendChild(div);
}
});


setInterval(function interval() {
  const divList = document.querySelectorAll(".div");

  divList.forEach((div) => {
    // const top = parseFloat(div.style.top) - 1;
    const top = div.offsetTop - 1; // 使用 layout API

    div.style.top = (top < 0 ? height : top) + "px";
  });
}, 50);

可以据 Performance 分析

此次任务主要消耗在 Rendering（重排），占用绝大部分，即代码中必然存在不合理的重排
主线程阻塞，阻塞时间约为 800ms，阻塞原因为 interval 函数调用过久，原因是获取 offsetTop 造成 layout