身为前端开发者，你不能不知道的 Runtime Performance Debug 技巧

返回：chrome

前言

提到 Web 前端的效能优化，有许多的技巧是聚焦在如何减少页面的“载入时间 Loading Time，

• Code Splitting 透过减少需要载入的 Bundle Size 来加快载入效能。
• 也有些技巧是针对执行时期 (Runtime) 的优化与调教，例如 Virtualized List 透过控制渲染的 DOM 元素数量来保持页面的流畅性，
• 又或者是页面的 Repaint、Reflow、 Composite 等渲染流程所花费的时间，

不过这些 runtime 指标又该如何 debug 呢？什麽样的状况又代表者页面的效能可能出现了一些瓶颈呢？在现今网页中动画佔了十分重要的部分，那动画的性能又该怎麽观测呢？

开始 Debug

开启一个无痕视窗并访问这个网站，使用无痕视窗的原因是可以确保 chrome 是运行在“clean state”下的，不然 performance 的测量结果有可能被 extensions 等正在运行的其他应用影响，造成不够准确的状况

打开 Devtool 并点选 Performance Tab【性能】