您是否应该“延迟/异步”包含 jQuery、下划线等的脚本标签？

Question

我在我的页面上运行了 Google Pagespeed Insights，并被建议

消除首屏内容中的渲染阻塞 JavaScript 和 CSS

在我的页面中包含的几个脚本中，该工具挑出了 jQuery、下划线和其他一些库。

现在，我知道将关键字 defer 或 async 添加到我的脚本标签会导致在页面处理继续时并行下载文件。

我阅读这篇文章是为了更深入地了解： https://www.sitepoint.com/non-blocking-async-defer/

我明白只要我们确定被延迟的脚本不包含 document.write() 之类的东西（这可能会修改页面本身），就可以使用 defer/@987654326 @。我检查了jquery源代码，确实没有出现document.write。

但是，如果延迟这些文件，我担心依赖 jquery 或其他库的其他脚本可能会受到影响。

因此，我的问题：

• 推迟/异步我的库文件以提高性能是个好主意
• 如果是，我应该更喜欢哪个？延迟还是异步？
• 如果我这样做，是否需要对我的其他脚本进行任何更改？

谢谢。

Answer 1

推迟/异步我的库文件以提高性能是个好主意

是的，只要正确完成。

如果是，我应该更喜欢哪个？延迟还是异步？

这完全取决于脚本的作用、它需要对 DOM 的访问权限以及它具有哪些其他脚本依赖项。

如果我这样做，是否需要对其他脚本进行任何更改？

可能，这又取决于上述注意事项。

话虽如此，我个人发现 async/defer 会导致比它真正解决的问题更多的问题。

使用良好的捆绑/缩小系统来加入和压缩所有 JS 文件是一种更快、更容易并且通常来说更有效的解决方案。