对于前端大型项目来说，很容易产生性能问题。对于这些性能问题，最常见的解决方式是使用性能分析工具进行分析，然后再进行针对性的解决。

一、Chrome DevTools

一般来说，前端的性能分析通常可以从时间和空间两个角度来进行：

• 时间：常见耗时，如页面加载耗时、渲染耗时、网络耗时、脚本执行耗时等

• 空间：资源占用，包括 CPU 占用、内存占用、本地缓存占用等

那么，下面来看看有哪些常见的工具可以借来用用。由于我们的网页基本上跑在浏览器中，所以基本上大多数的工具都来源于浏览器自身提供，首当其冲的当然是 Chrome DevTools (opens new window)。本文我们也主要围绕 Chrome DevTools 来进行说明。

1.1 Lighthouse

Lighthouse (opens new window)的前身是 Chrome DevTools 面板中的 Audits。在 Chrome 60 之前的版本中, 这个面板只包含网络使用率和页面性能两个测量类别，从 Chrome 60 版本开始， Audits 面板已经被 Lighthouse 的集成版取代。而在最新版本的 Chrome 中，则需要单独安装 Lighthouse 拓展程序来使用，也可以通过脚本来使用。