提到 Web 前端的效能优化，有许多的技巧是聚焦在如何减少页面的“载入时间 Loading Time”，例如 Code Splitting 透过减少需要载入的 Bundle Size 来加快载入效能。也有些技巧是针对执行时期 (Runtime) 的优化与调教，例如 Virtualized List 透过控制渲染的 DOM 元素数量来保持页面的流畅性，又或者是页面的 Repaint、Reflow、 Composite 等渲染流程所花费的时间，不过这些 runtime 指标又该如何 debug 呢？什麽样的状况又代表者页面的效能可能出现了一些瓶颈呢？在现今网页中动画佔了十分重要的部分，那动画的性能又该怎麽观测呢？
今天想透过这篇文章与各位分享如何透过 Chrome Devtool 的 Performance Tab 来检测网页在执行时的各种性能指标，让网页的 Runtime Performance 不再成为你 debug 时的瓶颈！
Chrome Devtool Performance Tab 的基本介绍
有使用过 Chrome Devtool Performance Tab 的读者可能曾经也和我一样被丰富的图表与複杂的资讯给吓到了，完全不知道要从何开始看起。的确 Chrome 的 Performance Tab 提供了相当丰富的信息，要在一篇文章就整理透彻几乎可以说是不可能的任务，所以今天只会介绍最基本的信息与图表，但我认为也已经足够面对平常 Debug 时的需求。那我们就废话不多说，直接开始吧！
开始 Debug
首先开启一个无痕视窗并访问这个网站，使用无痕视窗的原因是可以确保 chrome 是运行在“clean state”下的，不然 performance 的测量结果有可能被 extensions 等正在运行的其他应用影响，造成不够准确的状况。
接着在键盘输入 Command+Option+I (Mac) 或是 Control+Shift+I (Windows, Linux) 打开 Devtool 并点选 Performance Tab。
总结
现在的网站十分依赖与看重像 Lighthouse 这种性能检测工具所算出的分数，但笔者就曾经遇过明明 Lighthouse Performance 分数是满分，在使用时却有明显卡顿与不流畅的状况。这代表我们不能完全相信与依赖这些分数，当使用者亲身遇到性能体验不佳的状况时，Runtime Performance 的 Debugging 就变得十分重要。虽然今天只有介绍到皮毛，但希望这篇文章能够让各位在未来需要使用 Performance Tab 时不再被眼花缭乱的 Dashboard 震慑住，而可以清楚地知道要如何去找出问题的瓶颈。