异步和文档就绪

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

谷歌没有谈论这种做法,似乎更喜欢异步脚本:https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

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

• 它适用于所有浏览器(是的,甚至是IE;))
• 您保证执行订单
• 你不需要使用$(document).ready或$(window).load
• 您的脚本可以在加载图像之前执行
• 作为异步/延迟,您的页面将更快地显示
• 当DOM触发ready事件时,将加载所有脚本
• 可以通过合并一个文件中的所有js来优化(通过像mod_pagespeed这样的工具)

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

Answer 2

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

defer一般来说比它更好，async因为它：

• 异步加载（就像async）
• 保证执行顺序（与 不同async）
• 在最后执行（async与页面仍在加载时并行执行不同，它实际上停止了dom 解析！）
• jquery在加载“延迟”脚本后ready触发（这就是您要问的）

这个答案有一个非常漂亮的图片，说明了延迟/异步加载顺序，非常容易理解。