我尝试通过在我的脚本上放置一些异步属性来优化我的页面。它似乎打破了我的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
IMHO,将脚本放在页面的末尾比async / defer有几个好处:
>它将适用于所有浏览器(是的,即使IE;))
>您保证执行顺序
>你不需要使用$(document).ready或$(window).load
>您的脚本可以在加载图片之前执行
> Async / defer,您的页面将会更快地显示
>当DOM触发就绪事件时,将加载所有脚本
>可以通过合并所有js在一个文件没有问题(通过一个工具,如mod_pagespeed)
我能看到的唯一缺点是,浏览器将无法并行下载。使用async / defer的一个很好的理由是当你有一个脚本是完全独立的(不需要依赖于执行顺序),并且不需要在特定的时间执行。示例:google analytics。