e-s*_*tis 88 javascript optimization performance coding-style
我最近阅读了雅虎宣言加速你的网站的最佳实践.他们建议我们尽可能将JavaScript包含在HTML代码的底部.
但究竟何时何地？
我们应该在收盘前</html>还是之后放？最重要的是,我们什么时候应该把它放在这个<head>部分？
dom*_*ell 85
真正不引人注目的脚本有两种可能性:
</body></html>)第二个可能会更快,因为最初的雅虎研究表明,一些浏览器尝试在脚本文件到达脚本标签时加载脚本文件,因此在完成之前不会加载页面的其余部分.但是,如果您的脚本具有"就绪"部分,该部分必须在DOM准备就绪后立即执行,您可能需要将其置于头部.另一个问题是布局 - 如果您的脚本要更改您希望尽早加载的页面布局,那么您的页面不会花费很长时间在用户面前重绘自己.
如果外部脚本站点位于另一个域(如外部窗口小部件)上,则可能值得将其放在底部以避免延迟加载页面.
对于任何性能问题,请执行您自己的基准测试 - 在完成研究时可能会出现的情况可能会因您自己的本地设置或浏览器更改而发生变化.
Era*_*rin 31
它永远不会如此剪切和干燥 - 雅虎建议将脚本放在结束</body>标记之前,这会产生错误,即页面在空缓存上加载速度更快(因为脚本不会阻止下载文档的其余部分).但是,如果您想要在页面加载时运行某些代码,它将仅在整个页面加载后开始执行.如果您将脚本放在<head>标记中,它们将在之前开始执行 - 因此在已准备好的缓存中,页面实际上看起来会加载得更快.
此外,将脚本放在页面底部的权限并不总是可用.如果需要在视图中包含依赖于库或之前加载的其他JavaScript代码的内联脚本,则必须在<head>标记中加载这些依赖项.
总而言之,雅虎的建议很有意思,但并不总是适用,应根据具体情况加以考虑.
Laz*_*low 20
正如其他人所说,将它放在关闭体 html标签之前.
有一天,我们接到客户的大量电话,抱怨他们的网站非常慢.我们在本地访问了他们,发现他们花了20-30秒来加载一个页面.认为服务器性能不佳,我们登录了 - 但是web和sql服务器的活动都是~0%.
几分钟后,我们意识到外部网站已关闭,我们正在链接到Javascript跟踪代码.这意味着浏览器正在访问站点头部的脚本标记,并等待下载脚本文件.
因此,至少对于第三方/外部脚本,我建议将它们作为页面上的最后一件事.然后,如果它们不可用,浏览器至少会加载页面直到那一点 - 并且用户将忘记它.
Luk*_*e W 16
总结一下,基于以上建议:
</body>标记之前.</body>除非您有将脚本放在头部的边缘情况.不,它不应该在</html>那之后无效.放置脚本的最佳位置就在之前</body>
这基本上是因为大多数浏览器在评估您提供的脚本时停止呈现页面.因此可以将非阻塞代码放在页面的任何位置(我主要考虑将onLoad事件附加到事件的事情,因为事件绑定非常快,以至于实际上是免费的).这里的一个重要杀手就是在页面的开头添加一些广告服务器脚本,这可以防止在广告完全下载之前加载任何页面,从而使您的页面加载次数增加
如果你想修改你的脚本的位置,YSlow是一个伟大的工具,如果它会改善或损害性能,给你一个味道.将javascript放在某些文档位置可能会导致页面加载时间过长.
http://developer.yahoo.com/yslow/