不引人注目的JavaScript:HTML代码顶部还是底部的<script>?


90

我最近阅读了Yahoo宣言中的“加快网站速度的最佳做法”。他们建议在可能的情况下将JavaScript包含项放在HTML代码的底部。

但是确切的地点和时间?

我们应该在关闭之前</html>还是之后放置它?最重要的是,我们什么时候仍应将其放在本<head>节中?


Answers:


87

真正不干扰脚本的可能性有两种:

  • 通过头部的script标签包含一个外部脚本文件
  • 通过正文底部的script标签(在之前</body></html>)包含一个外部脚本文件

第二个可能更快,因为最初的Yahoo研究表明,某些浏览器在命中script标签时会尝试加载脚本文件,因此,在完成浏览后,它们才加载页面的其余部分。但是,如果脚本具有“就绪”部分,并且必须在DOM准备就绪后立即执行,则可能需要将其放在头部。另一个问题是布局-如果您的脚本要更改页面布局,则您希望它尽快加载,这样您的页面就不会花费很长时间在用户面前重新绘制自身。

如果外部脚本站点位于另一个域(例如外部窗口小部件)上,则可能值得将其放在底部,以避免它延迟页面的加载。

对于任何性能问题,请自己制定基准 -一次完成研究可能会因您自己的本地设置或浏览器的更改而改变。


13
关于脚本具有“就绪”部分。将脚本放在正文的底部可确保DOM准备就绪,如果将其放在头部,则必须将其包装起来,以便它等待DOMReady(或类似的)事件
Juan Mendes 2010年

4
@Juan是的,但是通过将脚本放在底部,您将DOMReady事件延迟了浏览器在请求该脚本之前解析文档和处理头元素所需的时间(200-500ms) 。主要是在首页加载时(假设可以从那里缓存它)。而如果您将其放在头部。准备工作可能要快得多。因此,考虑到HTML5,如果脚本必须在DOM准备就绪时修改布局,那么现在最好在头中使用“异步”或“延迟”脚本。
hexalys

31

从来没有这么干过-雅虎建议将脚本放在结束</body>标记之前,这会产生一种幻觉,即页面在空的缓存上加载速度更快(因为脚本不会阻止下载文档的其余部分)。但是,如果您有一些要在页面加载时运行的代码,则仅在整个页面加载后才开始执行。如果将脚本放在<head>标记中,它们将在执行之前开始执行-因此,在准备好的缓存中,页面实际上看上去加载得更快。

同样,并非总是可以将脚本放在页面底部的特权。如果需要在依赖于之前加载的库或其他JavaScript代码的视图中包括内联脚本,则必须将这些依赖项加载到<head>标记中。

雅虎的所有建议都很有趣,但并不总是适用,应根据具体情况进行考虑。


1
如果您的文档不引人注目,那么您就不会有内联摘要,这个问题专门提到了不引人注意。
Juan Mendes

1
内联<script>标签并不意味着Javascript具有吸引力。
伊兰·加珀林

@Eric Galperin:内联脚本标签的好用途是什么?
胡安·门德斯

4
@Juan令人讨厌的Javascript意味着如果没有UI,UI就会损坏,或者将其嵌入标记中。<script>标签与标记分开,可以与增强界面的代码一起使用,但这不是必需的。因此,内联<script>标签并没有天生就吸引人。
伊兰·加珀林

4
1.我的名字叫Eran不是Eric,2.当您想将数据从服务器端语言传递给Javascript时,例如在循环的情况下,您可以使用<script>标签将这些值编码为javascript变量,以便与内联编辑或其他类似行为。
伊兰·加珀林

22

就像其他人所说的那样,将其放置在结束 html标签之前。

前几天,我们接到许多客户的电话,抱怨他们的网站速度非常慢。我们在本地访问了他们,​​发现他们花了20到30秒来加载单个页面。考虑到服务器性能不佳,我们登录了-但是Web和sql服务器的活动均为〜0%。

几分钟后,我们意识到外部站点已关闭,我们正在将其链接至Javascript跟踪标签。这意味着浏览器正在点击站点头部script标签,并等待下载script文件。

因此,至少对于第三方脚本/外部脚本,我建议将其作为页面的最后内容。然后,如果它们不可用,浏览器将至少加载该页面直到该点为止-并且用户将忽略它。


10
很酷的故事兄弟:)但是,认真的说,这是我见过的最有说服力的论据,因为它是将脚本标签放在页面底部的。
user271608 2011年

16

总结一下,基于以上建议:

  1. 对于外部脚本(Google Analytics(分析),第三方营销跟踪器等),请将其放置在</body>代码之前。
  2. 对于影响页面布局的脚本,请放在最前面。
  3. 对于依赖“ dom ready”的脚本(如jquery),请考虑放置在前面,</body>除非您出于极端的原因将脚本放在头部。
  4. 如果有依赖项的内联脚本,请将所需的脚本放在头。

6

如果您想修改脚本的位置,YSlow是一个很棒的工具,可以在改善或损害性能的情况下为您提供风味。将javascript放在某些文档位置确实可以缩短页面加载时间。

http://developer.yahoo.com/yslow/


5

不,不应该在之后,</html>因为那将是无效的。放置脚本的最佳位置就在</body>

这主要是因为大多数浏览器在评估您提供的脚本时都会停止呈现页面。因此可以在页面的任何位置放置非阻塞代码(我主要考虑的是将功能附加到onLoad事件的事物,因为事件绑定是如此之快以至于可以自由释放)。这里的一个致命杀手是在页面的开头放置一些广告服务器脚本,该脚本可以阻止在广告完全下载之前加载任何页面,从而使页面加载时间激增


您知道,如果您真的关心速度,那么就不会有</ body>或</ html>-这些元素类型的结束标记是可选的。将<script>放在最后,而完全不用使用</ body>和</ html>。
吉姆

9
希望吉姆很讽刺-无论如何,不​​要听从他的建议。格式正确的XHTML要求每个元素都包含结束标记,包括body和html标记。如果您的代码不是有效的XML,则说明您做错了。
马特·洛坎普

6
不,我不是在讽刺。看一下这个问题。它指定HTML,而不是XHTML。确实,有效的XHTML需要这些东西,但有效的HTML不需要。选择HTML并省略这些元素类型的结束标记绝对没有错。
吉姆

2

如果将其放在底部,则它将最后加载,因此加快了用户可以看到页面的速度。它确实需要在决赛之前,</html>但否则它将不属于DOM。

如果立即需要该代码,则将其放在首位。

最好将博客小部件之类的内容放在底部,这样,如果它们不加载,就不会影响页面的可用性。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.