不度量性能,就无法优化性能
一件事情如果无法衡量,就无法管理。
——管理大师彼得·德鲁克
如果要对一个页面的性能进行真正有效的优化,而不是只让自己感觉它似乎快了一些,就需要先找到一个合理的方式度量页面的性能。
度量的方式有很多种。例如,当刷新一个页面时,在DevTools的Network面板中可以看到Load、DOMContentLoaded的时间等(见图2-1),这是一种度量方式。
图2-1 Load、DOMContentLoaded的时间
也可以通过录屏的方式对一个网页的打开过程进行计时(见图2-2),计算从页面打开到用户看到主要内容的时间间隔。
图2-2 WebPageTest的加载屏幕录制
度量的方式有很多种,但不同的度量方式关注的点并不同,这是因为性能本身就不仅仅是指某个指标的状况,上面这两种方式关注的并不是同一类性能。前者关注资源在什么时间点加载完毕,后者关注的则是用户在什么时间点可以看到主要内容。
在进行性能优化之前,需要先确定要优化的目标,并为这个目标定义指标。例如,可以优化加载页面的时间,让用户更早地看到页面渲染的内容;也可以优化页面的滚动性能,让用户在滚动时不会频繁地感到卡顿。这两种优化的目标需要衡量的指标是完全不同的,前者的是关键元素的渲染时间,后者的是滚动时的帧率等。