我尝试通过在脚本中添加一些async 属性来优化我的页面。它似乎破坏了我的 JavaScript，因为 $(document).ready 在加载所有脚本之前执行!
我发现我可以通过放置 $(window).load 而不是 $(document).ready 来解决我的问题，但我想知道是否有更好的解决方案。
在我的案例中，这个解决方案引发了 2 个问题:
- 我必须更改所有
$(document).ready并告诉所有开发人员不要再使用它 - 脚本将在所有图像加载后执行。我的网站有很多繁重的图像，我确实需要在 dom 准备好后尽快执行一些脚本。
你有什么魔术吗？也许把所有脚本放在最后？使用 defer 而不是 async？
最佳答案
经过一些广泛的研究，我可以肯定地说，将脚本放在页面末尾是最佳实践。
雅虎同意我的观点:http://developer.yahoo.com/performance/rules.html#js_bottom
Google 不谈论这种做法，并且似乎更喜欢异步脚本:https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources
恕我直言，将脚本放在页面末尾比异步/延迟有几个好处:
- 它适用于所有浏览器(是的，甚至是 IE；))
- 您保证执行顺序
- 您不需要使用
$(document).ready或$(window).load - 您的脚本可以在加载图像之前执行
- 作为异步/延迟，您的页面将显示得更快
- 当DOM触发ready事件时，所有脚本都会加载
- 可以通过将所有 js 合并到一个文件中来毫无问题地进行优化(通过 mod_pagespeed 等工具)
我看到的唯一缺点是浏览器无法并行下载。 使用 async/defer 的一个很好的理由是，当您有一个完全独立的脚本(不需要依赖执行顺序)并且不需要在特定时间执行时。示例:谷歌分析。
关于jquery - 异步和文档就绪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24389171/