Chrome DevTools的performance面板查看性能

使用Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。

准备

我们尽可能在无痕模式下分析性能，以保证Chrome在一个相对干净的环境下运行。

测试代码：

<button (click)="seeInnerText()">innerText</button>
<button (click)="seeTextContent()">textContent</button>

<div id="text">
  <div>小龙虾 ，烤串</div>
  <div style="visibility:hidden">和奶茶</div>
</div>

seeInnerText() {
    const text = document.getElementById('text');
    for (let i = 0; i < 100000; i++) {
        text.innerText = `哈哈哈${i}`;
    }
}

seeTextContent() {
    const text = document.getElementById('text');
    for (let i = 0; i < 100000; i++) {
        text.textContent = `嘻嘻嘻${i}`;
    }
}

Record 按钮

打开想要记录的页面，然后重新加载页面。–> 按 Record 按钮开始一次新的记录，记录时，Record按钮变红。–> 执行页面交互，然后按 Record 按钮停止记录。

记录完成后，我们可以通过以下方式去查看我们关心的那部分的数据。

• 拖动竖线或上下滚动鼠标或按WS键以缩放要关注的区域。
• AD键用于左右移动关注的区域。
  
  

Summary

一次记录完成之后，可以在Summary区域查看每一项工作花费的时间。

Bottom-up

After recording, select an area of interest in the overview by dragging. Then, zoom and pane the timeline with the mousewheel or WASD keys.
record后，通过拖动在概览中选择感兴趣的区域。 然后，使用鼠标滚轮或 WASD 键缩放和窗格时间线。

Reload 按钮

开始剖析和重新加载页面。

Clear 按钮

清空当前的记录。

未完待续…