异步和文档就绪

Question

我尝试通过在脚本上添加一些async属性来优化我的页面。它似乎打破了我的javascript，因为在加载所有脚本之前执行了$(document).ready！

我看到我可以通过$(window).load代替$(document).ready来解决我的问题，但我想知道是否有更好的解决方案。 这个解决方案在我的案例中触发了2个问题：

1. 我必须更改所有$(document).ready并告诉所有开发人员不再使用它
2. 加载所有图像后将执行脚本。我的网站有很多沉重的图像，我真的需要一些脚本在dom准备就绪后尽快执行。
你有一些神奇的技巧吗？也许把所有脚本放在最后？使用defer代替async？

Answer 1

经过一些广泛的研究，我可以肯定地说，将脚本放在页面的末尾是最佳实践。

雅虎同意我的观点：http://developer.yahoo.com/performance/rules.html#js_bottom

Google不会谈论这种做法，似乎更喜欢异步脚本：https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

恕我直言，将脚本放在页面末尾比async / defer有几个好处：

• 它适用于所有浏览器（是的，甚至IE;））
• 您保证执行顺序
• 您无需使用$(document).ready或$(window).load
• 您的脚本可以在加载图片之前执行
• async / defer，您的页面将更快地显示
• 当DOM触发ready事件时，将加载所有脚本
• 可以通过合并一个文件中的所有j来优化（通过像mod_pagespeed这样的工具）

我能看到的唯一缺点是浏览器无法并行化下载。 使用异步/延迟的一个很好的理由是当你有一个完全独立的脚本（不需要依赖执行顺序）并且不需要在特定时间执行。示例：google analytics。

Answer 2

如果您不想使用脚本加载器，则可以使用以下方法，该方法允许您将$（document）.ready脚本保留在原位-修改如下：

@Override
public void onDestroyView() {
if (mCompositeDisposable!= null) // in case if you required-> if (mCompositeDisposable!= null && !mCompositeDisposable.isDisposed())
      mCompositeDisposable.dispose(); 
super.onDestroyView();
}

Answer 3

defer在这里肯定会有所帮助。

defer通常比async更好，因为它：

• 异步加载（就像async一样）
• 保证执行顺序（不同于async）
• 在末尾执行（不像async在页面仍在加载时并行执行，并且实际上中止 dom解析！）
• jquery ready在加载“延迟的”脚本（这就是您要的内容）之后触发

This SO answer上有一张非常漂亮的图片，说明了延迟/异步加载顺序，非常容易理解。