mVC*_*Chr 7 javascript optimization jquery javascript-events pagespeed
环顾四周,未能找到这个具体问题进行讨论.很确定差异可以忽略不计,只是对你的想法感到好奇.
场景:在页面渲染之前不需要加载的所有Javascript都放在结束</body>标记之前.是否通过在DOM加载/就绪事件被触发时执行的头部中的一些Javascript代码对延迟加载有什么好处或不利？假设这只涉及下载一个完整函数的整个.js文件,而不是在使用时根据需要延迟加载几个单独的文件.
希望很清楚,谢谢.
在我看来,有很大的不同.
当您在<body>标记的底部内联JS时,您强制页面<script>同步加载(必须立即加载)和顺序加载(连续加载),因此您需要稍微减慢页面速度,因为您必须等待那些HTTP调用完成,JS引擎解释你的脚本.如果你把大量的JS堆叠在一起放在页面底部,你可能会浪费用户的网络排队时间(在旧浏览器中每次只有2个连接),因为脚本可能相互依赖,所以必须按顺序下载.
如果您希望更快地准备好DOM(通常是大多数人等待进行任何事件处理和动画),您必须尽可能少地减少所需脚本的大小并将它们并行化.
例如,YUI3具有较小的依赖关系解析和下载脚本,您必须在页面中按顺序加载(请参阅YUI3的seed.js).之后,您浏览页面并收集依赖项,并对其CDN(或您自己的服务器)进行1次异步和流水线调用,以获得JS的重要性.返回JS球后,您的脚本会执行您提供的回调.这是一般模式:
<script src="seed.js"></script>
<script>
YUI().use('module', function(Y) {
// done when the ball returns and is interpretted
});
</script>
我不是特别喜欢将你的脚本放入一个大球(因为如果1个依赖项改变了,你必须重新下载并解释整个事情!),但我是管道衬里的粉丝(结合脚本)和基于事件的模型.
当您允许基于事件的异步加载时,您可以获得更好的性能,但可能没有感知性能(尽管可以抵消).
例如,页面的某些部分可能无法加载一两秒,因此看起来不同(如果您使用JS影响页面样式,我不建议)或者没有为用户交互做好准备,直到您(或托管您网站的人)返回您的脚本.
此外,您必须做一些工作以确保您<script>具有正确的依赖关系才能正确执行.例如,如果您没有jQuery或Prototype,则无法成功调用:
<script>
$(function () {
/* do something */
});
</script>
要么
<script>
document.observe('dom:loaded', function {
/* do something */
});
</script>
因为译者会说"变量$ undefined".即使你同时<script>在DOM 中添加了两个s,也会发生这种情况,因为我认为jQuery或Prototype比你的应用程序的JS更大(因此对数据的请求需要更长时间).无论哪种方式,没有某种限制,你都可以把它留给机会.
所以,选择取决于你.如果你可以正确地分割你的依赖关系 - 即把你需要的东西放在前面并且稍后懒洋洋地加载其他东西,它将导致更快的总体时间,直到你准备好DOM.
但是,如果你使用的单片库如jQuery或用户希望能够看到涉及JS动画或风格的东西马上,内联可能是你更好.