[译] 经过 Lighthouse 了解 JavaScript 性能

• 原文地址：Shine a light on JavaScript performance with Lighthouse
• 原文做者：Addy Osmani
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Raoul1996
• 校对者：calpa、GpingFeng

不肯定 JavaScript 的开销对于您那的用户体验来说是否是过高了？🙃 Lighthouse 有 JavaScript 执行时间审计，用来衡量 JavaScript 对于页面加载性能的影响。

让咱们一块儿试试吧？如今它已经在 Chrome DevTools Audits面板里边了。一样能够经过访问 WebPageTest 来使用。

对于上面的内容站点，移动设备上的浏览器须要 51s（哎呀，太慢了）才能处理完主包。算上网络传输时间，用户可能须要等待一分钟才能和这个页面进行交互 ⏳😪

这是花在中等配置的移动设备上的解析、编译和执行脚本的时间。dev.to（提供相似的内容体验）可以在对脚本依赖最小的状况下加载他们的主包❤️

咱们怎样才能优化原始网站 JS 的性能呢？

只有当用户真正须要前，才传输 JavaScript。咱们可使用像代码分割的技术来实现对剩余部分的懒加载。我使用 DevTools 的 Code Coverage 功能提供帮助。

若是我开始记录并加载上述网站，而后交互一段时间，咱们能够看到可能不须要预加载大约 57% 的代码。对于能够按需加载的资源来讲，这是很好的备选方案。

若是你以前没有仔细看过 Lighthouse，那么他会有不少有用的小模块，好比检查你是否正确精简或者压缩脚本；

若是你使用无头浏览器进行自动化操做，那么 Puppeteer 还有一个颇有用的 code-coverage example 示例，能够在页面加载的时候可视化 JS 代码覆盖率的使用状况。

总结.. 🎁

JavaScript 会对您的用户体验产生巨大的影响; Lighthouse 能够在这里有效的改善。为了保持较低的 JavaScript 传输和处理时间：

• 只发送你用户须要的代码
• 精简压缩脚本
• 移除未使用的代码和依赖

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。