使用 Lighthouse 揭示 JavaScript 性能

不确定JavaScript 的成本是否太高，会影响用户体验？🙃Lighthouse有一个JavaScript 执行时间审核功能，可以衡量 JavaScript 对页面加载性能的总体影响：

试试吧！它现在就在 Chrome DevTools 的“审核”面板中。你也可以通过WebPageTest来测试。

对于上述内容网站，浏览器在移动设备上仅处理其主要包就需要 51 秒（哦，好快）。算上网络传输时间，用户可能需要等待长达一分钟才能与此页面交互⏳😪

这是在中等配置的移动设备上解析、编译和执行脚本所花费的时间。dev.to （提供类似的内容体验）能够以对脚本执行的最小依赖来加载其主包❤️

如何才能提高原有站点中JS的成本呢？

通过仅预先加载用户真正需要的 JavaScript。我们可以使用代码拆分等技术，根据需要延迟加载其余部分。我在这里使用了 DevTools 的代码覆盖率功能来提供帮助。

如果我点击录制并加载上述体验，然后进行一段时间的交互，我们会发现大约 57% 的预先加载代码可能并不需要。这对于按需加载的功能来说是一个很好的选择。

如果您之前没有检查过 Lighthouse，它有很多有用的功能，例如检查您是否正确地缩小了脚本或压缩了脚本：

如果您喜欢使用无头 Chrome 实现自动化，那么Puppeteer还有一个有用的代码覆盖率示例，可以直观地显示页面加载过程中 JS 代码覆盖率的使用情况。

总结一下..🎁

JavaScript 会对用户体验产生重大影响；Lighthouse 可以突出显示这方面的改进机会。为了降低 JavaScript 的传输和处理时间，请执行以下操作：

• 仅发送用户需要的代码。
• 最小化并压缩你的脚本。
• 删除未使用的代码和依赖项。