我尝试通过在我的脚本中添加一些 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 - 您的脚本可以在您的图像加载之前执行
- 作为async/defer，你的页面会显示得更快
- 当DOM触发ready事件时，所有脚本被加载
- 可以通过将所有 js 合并到一个文件中来优化(通过像 mod_pagespeed 这样的工具)
我能看到的唯一缺点是浏览器无法并行下载。 使用 async/defer 的一个很好的理由是当你有一个完全独立的脚本(不需要依赖执行顺序)并且不需要在特定时间执行时。示例:谷歌分析。
关于jquery - 异步和文档就绪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11043656/