Chrome开发者工具performance面板

Chrome官方文档

chrome 的开发者工具中提供了很多高效工具方便我们对页面进行性能分析。performance面板中记录和分析了页面在运行时的所有活动

准备工作

1. 进入隐身模式，避免浏览器插件的干扰
2. 官方示例 打开performance面板
3. 打开CPU节流，模拟低性能CPU的运行情况（模拟移动端）
4. 勾选screenshot 将记录运行过程中每一帧的截图
5. 勾选Memory 可以看到占用内存的不同组成部分、大致的垃圾回收的周期,以及有无明显的内存泄漏的情况

图中各部的信息的含义:

• FPS (Analyze frames per second)帧率（每秒帧数）。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿
• CPU CPU 资源。此面积图指示消耗 CPU 资源的事件类型
  CPU 与下方的Summary Tab是一致的，这部分的颜色也是一一对应。占比越大的部分意味着消耗CPU资源也越多
• NET 每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）
• Screenshots 展示每个时间点的屏幕快照
• HEAP 堆内存占用
  （js中的内存垃圾回收机制：垃圾回收器会定期扫描内存，当某个内存中的值被引用为零时就会将其回收。）
• Frames 鼠标移上去可以看到当前的帧率；（Dropped Frame ：当 GPU 很忙的时候，GPU 在渲染别的东西，比如上一帧还没渲染完的情况下合成器会跳过、丢弃（drop）某些帧）
• Main 代表主线程，也是我们需要重点关注的部分，这一部分的图像官方称为flame chart (火焰图)
  火焰图x轴的一段横条代表执行一个事件(函数)，长度越长，花费的时间越多；y轴代表调用栈，如果几个事件(函数)在y轴上堆叠在一起，这意味着上方的事件(函数)调用了下方的事件(函数)。如果在这些横条中右上角是红色的就表示在该段代码执行过程中可能存在性能问题.

面板下方与Summary Tab 同级的几个tab

• Bottom-Up 事件时长排序
• Call Tree 表示浏览器基本操作(事件执行,绘制...)的事件调用顺序和占用时间
• Event Log 事件发生的先后顺序及占用时间

性能优化

Avoid forced synchronous layouts
浏览器渲染每一帧通常是按以下步骤进行：首先运行JavaScript --> Recalculate Style --> Layout --> Paint --> Composite layers，但是某些js语句可能使浏览器在js运行完成之前先进行layout，这被称为forced synchronous layout。
举个栗子：

// Schedule our function to run at the start of the frame.
requestAnimationFrame(logBoxHeight);

function logBoxHeight() {
  // Gets the height of the box in pixels and logs it out.
  console.log(box.offsetHeight);
}

下面改一下logBoxHeight的代码，在获取box的高度前改变它的样式

function logBoxHeight() {

  box.classList.add('super-big');

  // Gets the height of the box in pixels
  // and logs it out.
  console.log(box.offsetHeight);
}

这时，为了获取准确的高度，浏览器必须先将新的样式应用于box，然后执行layout。这一操作可能会非常耗时，并且在大部分情况下也不是必须的，比如我们使用上一帧的高度也是完全可以的

function logBoxHeight() {
  console.log(box.offsetHeight);

  box.classList.add('super-big');
}