web前端性能优化

3.性能检测

当面对具体的项目实践时，该如何快速提升性能体验呢？或者说如何能够准确地定位到性能瓶颈呢？难道要比对着优化知识点清单，一项一项手动排查或完全凭借经验去处理吗？不，我们需要有一整套清晰科学的优化流程和检测工具，来进行高效、准确及全面的性能分析与瓶颈定位。

性能检测概述

作为网站应用的开发者或维护者，我们需要时常关注网站当前的健康状况，譬如在主流程运行正常的情况下，各方面性能体验是否满足期望，是否存在改进与提升的空间，如何进行快速且准确的问题定位等，为了满足这些诉求，我们需要进行全面且客观的性能检测。

如何进行性能检测性能检测

作为性能优化过程中的一环，它的目的通常是给后续优化工作提供指导方向、参考基线及前后对比的依据。性能检测并不是一次性执行结束后就完成的工作，它会在检测、记录和改进的迭代过程中不断重复，来协助网站的性能优化不断接近期望的效果。

1.性能检测的认知

在展开介绍性能检测的方法和工具之前，我们首先需要破除有关性能的一些错误认知与理解偏差。（1）通过单一指标就能衡量网站的性能体验。这是完全站在用户感知的角度上产生的认知，它只会有主观上的好与差，很难给出切实可行的优化建议。因此我们建议应当从更多维度、更多具体的指标角度来考量网站应用的性能表现，比如页面的首屏渲染时间，不同类型资源的加载次数与速度，缓存的命中率等。

（2）一次检测就能得到网站性能表现的客观结果。网站应用的实际性能表现通常是高度可变的，因为它会受到许多因素的影响，比如用户使用的设备状况、当前网络的连接速度等，因此若想通过性能检测来得到较为客观的优化指导，就不能仅依赖一次检测的数据，而需要在不同环境下收集尽量多的数据，然后以此来进行性能分析。

（3）仅在开发环境中模拟进行性能检测。在开发环境中模拟进行的性能检测具有许多优势：比如可以很方便地制定当前检测的设备状况与网络速度，可以对检测结果进行重复调试，但因其所能覆盖的场景有限，会很容易陷入“幸存者偏差”，即所发现的问题可能并非实际的性能瓶颈。据此可知，我们若想通过检测来进行有效的性能优化改进，就需要从尽可能多的角度对网站性能表现进行考量，同时保证检测环境的客观多样，能够让分析得出的结果更加贴近真实的性能瓶颈，这无疑会花费大量的时间与精力，所以在进行性能优化之前我们还需要考虑所能投入的优化成本。

2.检测的方法

如果我们平时的主要工作是项目需求的迭代开发，所能投入给性能优化的时间与精力都相对有限，但又想获得关于网站应用较为全面的评估报告来作为优化指导，那么这里推荐使用Lighthouse工具。

Lighthouse是一款用于改进网站应用质量的开源自动化检测工具，我们只需花费五分钟左右的时间，就可以让Lighthouse为网站应用快速生成一个全方位的检测报告，其内容包括：性能检测、可访问性检测、SEO检测，以及是否符合PWA的检测与其他一些是否符合最佳实践的检测。

检测报告中的内容不仅涉及上述这些方面的现状分析，同时还提供了一些优化的指导建议，方便我们能快速发现潜在的性能瓶颈并实施优化改进。

常见的检测工具

除了Lighthouse，还有许多其他工具也是我们在进行检测分析时经常会用到的，它们包括：Chrome开发者工具中与性能检测相关的一些工具面板、页面加载性能分析工具PageSpeedInsights、专业的性能检测工具WEBPAGETEST等，下面分别来进行简要介绍。