作者：前端小智来源：大迁世界
大家好，我是小智，今天带来KyleMo大佬的一篇关于PerformanceDebug技巧好文，希望对大家有所帮助，早期成为大神。PS:文文已经过授权。
提到Web前端的效能优化，有许多的技巧是聚焦在如何减少页面的“载入时间LoadingTime”，例如CodeSplitting透过减少需要载入的BundleSize来加快载入效能。也有些技巧是针对执行时期(Runtime)的优化与调教，例如VirtualizedList透过控制渲染的DOM元素数量来保持页面的流畅性，又或者是页面的Repaint、Reflow、Composite等渲染流程所花费的时间，不过这些runtime指标又该如何debug呢?什麽样的状况又代表者页面的效能可能出现了一些瓶颈呢?在现今网页中动画佔了十分重要的部分，那动画的性能又该怎麽观测呢?
今天想透过这篇文章与各位分享如何透过ChromeDevtool的PerformanceTab来检测网页在执行时的各种性能指标，让网页的RuntimePerformance不再成为你debug时的瓶颈!
ChromeDevtoolPerformanceTab的基本介绍
有使用过ChromeDevtoolPerformanceTab的读者可能曾经也和我一样被丰富的图表与複杂的资讯给吓到了，完全不知道要从何开始看起。的确Chrome的PerformanceTab提供了相当丰富的信息，要在一篇文章就整理透彻几乎可以说是不可能的任务，所以今天只会介绍最基本的信息与图表，但我认为也已经足够面对平常Debug时的需求。那我们就废话不多说，直接开始吧!
开始Debug
首先开启一个无痕视窗并访问这个网站，使用无痕视窗的原因是可以确保chrome是运行在“cleanstate”下的，不然performance的测量结果有可能被extensions等正在运行的其他应用影响，造成不够准确的状况。
接着在键盘输入Command+Option+I(Mac)或是**Control+Shift+I(Windows,Linux)**打开Devtool并点选PerformanceTab。
左上角会有两个按钮(红色框框区块)，点选第一个即会开始纪录，这时候你可以开始操作网页，Devtool会纪录操作网页时的CPU、记忆体、FrameRate等使用量与指标，这种方式适合监测页面上的某些特定行为与功能。
第二颗按钮“Startprofilingandreloadpage”，会开始profiling并重新整理页面，并在浏览器认为页面互动告一段落后自动停止profiling。
因为我想要检测的是使用者手动触发的页面动画，所以使用第一种方式会比较适合。另外如果你的网站也有手机版的需求，一般来说有些MobileDevices的性能会比较差，为了检测应用在low-level的MobileDevices是否也能够流畅的运作，可以选择CPU选项(图中橘色区块)并调整CPU的性能，这边我选择6xslower来模拟在性能低的设备运作的状况。点选开始检测后，操作一下想要检测的功能，点选stopprofiling，一段时间后Devtool就会呈现Profiling的结果。
分析一下Profiling的结果吧!
让我们一步一步拆解，首先来看看纪录FPS、CPU、NET的图表区域。
FPS
提到测量网页动画的性能，最直觉的方式就是观察FPS(FramePerSecond)，也就是常常听到的FrameRate。当在进行动画时，会希望FrameRate可以达到60FPS左右，使用者看到的动画才不易产生卡顿。(有时候FPS很低也不一定不好，也有可能是页面真的没有任何的动静)
在上图的FPS栏位可以看到粉红色与红色组成的bar，这代表这页面可能会有掉帧的状况，这会导致页面动画不平顺甚至卡顿，严重影响使用者体验，是我们应该要尽量避免的。
CPU
从上图可以看到CPU图表是有时段性的，有些区段看起来十分活跃，有先区段看起来却几乎没有在运作。滑鼠在FPS、CPU、NET上hover都可以看到profiling过程完整的Screenshot，这种技术也叫做scrubbing，可以让我们以渐进式的方式追踪页面动画。
从上面的Screenshot可以得知在使用者点击重新排列触发动画一直到动画完成之间的时间都会让CPU的使用量提高。
而CPU图表有分很多不同的颜色，这代表著不同种类的工作，如果想要更容易懂且统整指定时间区段的图表，可以在PerformanceTab底下Summary看到统整后的图表，颜色的对应与上面的CPUsection是一样的。
灰色(System)—浏览器内部的工作(关于哪些任务被归类在这可以参考这个stackoverflow的问题)
白色(Idle)—IdleTime
黄色(Scripting)—执行JavaScript与事件处理
绿色(Painting)—图像处理、画面绘制
紫色(Rendering)—页面的样式计算
蓝色(Loading)—载入与处理HTML(因为我是在页面载入后才开始profiling，因此没有显示这个阶段)
如果你发现你的网页的CPU长时间都是保持maxedout(图表中看起来很繁忙很多工作要做)的状态，就要注意一下是不是有机会透过CodeRefactor或是拔除不必要的功能来减轻CPU的Workload。
当然不代表CPU长时间都在运作就是不好的，举例来说asana的