不引人注目的JavaScript:在HTML代码的顶部还是底部?
我最近阅读了Yahoo宣言中的"加快网站速度的最佳做法"。他们建议尽可能将JavaScript包含项放在HTML代码的底部。
但是确切的地点和时间是什么?
我们应该在关闭" </ html>"之前还是之后放置它?最重要的是,我们什么时候仍应将其放在<head>
部分?
解决方案
如果将其放在底部,则它将最后加载,因此加快了用户可以看到页面的速度。它确实必须在最终的</ html>
之前,但否则它将不会成为DOM的一部分。
但是,如果立即需要该代码,则将其放在首位。
最好将博客小部件之类的内容放在底部,这样,如果它们不加载,就不会影响页面的可用性。
不,它不应该在</ html>
之后,因为那将是无效的。放置脚本的最佳位置就在</ body>
之前
这基本上是因为大多数浏览器在评估我们提供的脚本时都会停止呈现页面。因此可以在页面的任何地方放置非阻塞代码是可以的(我主要考虑的是将函数添加到onLoad事件上的东西,因为事件绑定是如此之快以至于可以免费使用)。一个大杀手是在页面的开头放置一些广告服务器脚本,该脚本可以阻止在广告完全下载之前加载任何页面,从而使页面加载时间激增
真正不干扰脚本的可能性有两种:
- 通过头部的script标签包含一个外部脚本文件
- 通过主体底部的脚本标签(在</ body> </ html>`之前)包含一个外部脚本文件
第二个可能更快,因为最初的Yahoo研究表明,某些浏览器在命中script标签时会尝试加载脚本文件,因此,直到完成后才加载页面的其余部分。但是,如果脚本具有"就绪"部分,并且必须在DOM准备就绪后立即执行,则可能需要将其放在头部。另一个问题是布局,如果脚本要尽早更改我们希望其加载的页面布局,那么页面就不会花费很长时间在用户面前重新绘制自身。
如果外部脚本站点位于另一个域(例如外部窗口小部件)上,则可能需要将其放在底部,以避免延迟页面的加载。
对于任何性能问题,请自己做基准测试,一次研究完成后可能会因我们自己的本地设置或者浏览器的更改而改变。
如果我们想修改脚本的位置,则YSlow是一个不错的工具,可以改善或者损害性能。将javascript放在某些文档位置确实可以缩短页面加载时间。
http://developer.yahoo.com/yslow/
从来没有这么干过。Yahoo建议将脚本放在结束标签</ </ body>之前,这样会产生一种幻觉,即页面在空缓存上的加载速度更快(因为脚本不会阻止下载其余的脚本)。文档)。
但是,如果我们有一些要在页面加载时运行的代码,则仅在整个页面加载后才开始执行。如果我们将脚本放在<head>
标记中,它们将在脚本执行之前开始执行,因此在预备缓存中,页面实际上看起来加载得更快。
同样,将脚本放在页面底部的特权并非始终可用。如果需要在依赖于之前加载的库或者其他JavaScript代码的视图中包含内联脚本,则必须在<head>
标记中加载这些依赖项。
雅虎的所有建议都很有趣,但并不总是适用,应视具体情况加以考虑。
就像其他人所说的那样,将其放置在html结束标记的前面。
前几天,有很多客户抱怨他们的网站运行速度非常慢,因此我们接到了许多电话。我们在本地访问了他们,发现他们花了20到30秒来加载单个页面。认为这是服务器性能不佳,因此我们登录,但是Web和sql服务器的活动均约为0%。
几分钟后,我们意识到外部站点已关闭,我们正在将其链接至Javascript跟踪标签。这意味着浏览器正在点击站点头部的script标签,并等待下载脚本文件。
因此,至少对于第3方/外部脚本,我建议将其作为页面上的最后内容。然后,如果它们不可用,浏览器将至少加载该页面直到该点为止,并且用户将忽略该页面。