我应该写在脚本的身体或HTML的头部?

我已经看到了两种方式,两个实现工作只是结构有点不同。 在你的经验,哪个更好,为什么?

实际上,我会用多个选项来回答这个问题,其中的一些实际上是在主体中呈现的。

  • 将库文件(如jQuery库)放在头部分。
  • 除非它成为性能/页面加载问题,否则将普通脚本放在首位。
  • 与包含相关联的地方脚本,在该包含之内和之后。 其中一个例子是asp.net页面中的.ascx用户控件 – 将脚本放在该标记的末尾。
  • 将影响页面呈现的脚本放置在主体的末尾(正文closures之前)。
  • 不要将脚本放在标记中,比如<input onclick="myfunction()"/> – 最好把它放在脚本主体的事件处理程序中。
  • 如果你无法做出决定,那就把它放在首位,直到你有一个不会出现页面阻塞问题的原因。

脚注:“当你需要它而不是先前”适用于页面阻塞(感知加载速度)时的最后一个项目 – 用户的感觉是实际的,如果加载速度更快,加载速度会更快在代码中发生)。

编辑:参考:

  • asp.net讨论: http : //west-wind.com/weblog/posts/154797.aspx和在这里: http : //msdn.microsoft.com/en-us/library/3hc29e2a.aspx
  • jQuery文档准备讨论: http : //encosia.com/2010/08/18/dont-you-down/?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+Encosia+%28Encosia% 29
  • 在这个问题上的其他答案也提供有效的信息。
  • 使用www.google.com和www.bing.comsearch相关信息(有很多参考资料)

注意:如果你把脚本块放在标记中,它可能会影响某些浏览器的占用空间(ie7和opera9.2已知有这个问题)的布局,所以把它们放在一个隐藏的div(使用一个CSS类如: .hide { display: none; visibility: hidden; }在div上)

标准:请注意,如果有问题,标准允许在任何地方放置脚本块: http: //www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html和http:// http://www.w3.org/TR/xhtml11/xhtml11_dtd.html

编辑2:请注意,只要有可能(总是?),你应该把实际的Javascript放在外部文件中,并引用这些 – 这不会改变相关的序列有效性。

编写脚本在页面顶部的问题被阻止。 浏览器必须停止处理页面,直到脚本被下载,parsing并执行。 原因很明显,这些脚本可能会在页面中插入更多的内容,改变渲染结果,也可能会删除不需要渲染的东西等。

一些更现代的浏览器违反了这个规则,不会阻止下载脚本(ie8是第一个),但总的来说下载并不是大部分阻塞时间。

查看更快速的网站 ,我刚刚读完它,它覆盖了所有快速的方法来获取脚本到页面上,包括将脚本放在页面的底部以允许渲染完成(更好的UX)。

W3School 在这个问题上有一个很好的文章 。

脚本在<head>

调用脚本或触发事件时执行的脚本被放置在函数中。

把你的function放在头部,这样他们都在一个地方,他们不会干扰页面内容。

脚本在<body>

如果您不希望将脚本放在函数中,或者脚本应该编写页面内容,则应将其放在主体部分中。

头部,或在closures身体标签之前。 当DOM加载JS然后执行,这正是jQuery document.ready所做的。

我总是把我的脚本放在标题中。 我的理由:

  1. 我喜欢分开代码和(静态)文本
  2. 我通常从外部来源加载我的脚本
  3. 相同的脚本从几个页面使用,所以感觉就像一个包含文件(这也包含在头文件中)