To optimize performance, first of all we should do reasonably effectively monitor performance and find out where the performance problems, in order to better to optimize the performance, where we talk about how to carry out performance monitoring by chrome

1. By using performance monitor to monitor

In the console using ctrl + shift + p to open the command menu, enter the performance monitor to listen

Can monitor the content shown in the

data presented here is relatively straightforward, there is not much to say

2. performance

performance chrome console is a tool used to monitor the performance of

Click on the upper left corner of performance round button to start recording, press stop to stop recording, this time will be the performance monitoring reflected, can also refresh button to reload the page, the page can be monitored during initialization

Get the performance report chart performance, and here I divided into four parts, the first part of the first to see

first part

From top to bottom four data

FPS: Main and animation performance related, the number of frames per second. The above figure appeared red strip, indicating that this part of the card frame animation performance, needs to be optimized, and as such the following figure, green bar, it means performance can be, and the higher the green bar, the better the performance
CPU: and summary corresponding to the bottom, shows the page loading process, each stage of occupation time of CPU, take up more time, represents the portion of the need to be optimized, wherein different colors can correspond to different portions of the corresponding portion of the corresponding the content can be seen in the summary at the bottom of it, different colors meaning
- Blue (Loading): html parsing and network traffic
- Yellow (Scripting): JavaScript execution
- Purple (Rendering): calculated style and layout, css parsing, i.e. rearrangement
- Green (Painting): Redraw
- Time spent in other events: Gray (System)
- White (Idle): idle time
NET: The main display order and the time it takes to request dark blue higher priority than light blue, we can also see more specific and time-consuming in the following order of network

content network clicks inside will show in the summary specific content
HEAP：表示js堆内存的消耗
线的上升就表示这个时间点js执行消耗了一些内存

第二部分

我们刚刚说第一部分的内容时实际上也说到了下面三个部分的内容，接下来看看第二个部分里面内容最多的火焰图，main

火焰图的第一行表示发生的事件，下面的各行是上面事件的子项

当我们使用左上角的刷新去监控页面时，在这里会出现三条虚线，这里我们放大看看

这三条虚线各有含义

蓝色：DOM加载完成
绿色：开始绘制页面
红色：页面加载完成

第三部分

看一下第三部分，这部分内容直观地显示了一些性能的详细信息，包括js堆内存，文档，节点，监听器和GPU

不同内容对应的颜色也已经在图中标明了，这里就不再多说

第四部分

接下来看看最后一部分

Summary

我们看下图，这里是刚才已经说过了的CPU占用时间的总结，与上面不同的是，上面展示的是一个各个部分在不同时间的消耗，而这里采取的是一个扇形图的方式，可以让我们直观地看到各个部分CPU消耗的占比，我们也就能更好地找到需要优化的内容

Bottom-Up

这里显示的是各个部分具体的内存消耗对应的一些内容，根据时间消耗的长短，反向列出事件列表，

这里也可以通过filter和分组group来更精确地找到内容

对于html的解析和css的解析我们可能做不了太多优化，更多地是看看时间消耗，把时间消耗多的那段解析减少，这里更多的是看看黄色的scripting的内容
如下图，可以看到，这里的script可以通过细分，去准确地找到消耗这些CPU的是代码中的哪一行，方便我们进行一个性能上的优化