我应该在主体中编写脚本还是在 html 的头中编写脚本？

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

183949 次浏览
小开

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

小开

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

  1. 我喜欢将代码和(静态)文本分开
  2. 我通常从外部来源加载我的脚本
  3. 同一个脚本在几个页面中使用，所以它看起来像一个包含文件(也放在头部)
小开

W3学校有一个 关于这个话题的文章写得不错。

<head>中的脚本

脚本在执行时将被执行 或者当事件被触发时, 被放置在功能中。

把你的功能放在头上 部分，这样他们都在一起 地方，他们不干涉 页面内容。

<body>中的脚本

如果你不想让你的剧本 放置在函数中，或者如果您的 脚本应该写页面内容，它 应该放置在身体部分。

小开

在页面头部编写脚本的问题是阻塞。在下载、解析和执行脚本之前，浏览器必须停止处理页面。原因很明显，这些脚本可能会在页面中插入更多的内容来改变渲染的结果，它们也可能会删除不需要渲染的内容，等等。

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

看看 更快的网站，我刚刚读完它，它介绍了把脚本放到页面上的所有快速方法，包括把脚本放在页面的底部，以便完成渲染(更好的用户体验)。

小开
最佳答案

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

  • 将诸如 jQuery 库之类的库脚本放在 head 部分。
  • 除非出现性能/页面加载问题，否则应将普通脚本放在头部。
  • 将与 include 关联的脚本放在 include 的内部和末尾。这方面的一个例子是。Asp.net 页面中的 ascx 用户控件-将脚本放在标记的末尾。
  • 将影响页面呈现的脚本放置在主体的末尾(在主体关闭之前)。
  • 不要将脚本放在诸如 <input onclick="myfunction()"/>之类的标记中——最好将其放在脚本体中的事件处理程序中。
  • 如果你不能决定，把它放在头部，直到你有一个理由，不要这样的页面阻塞问题。

脚注: “当你需要它，而不是先前”适用于最后一个项目时，页面阻塞(感知加载速度)。用户对 是现实的感知ーー如果用户认为 是加载速度更快，那么它的确加载速度更快(尽管代码中可能仍然存在这种情况)。

编辑: 参考文献:

注意: 如果你把脚本块放在标记中，它可能会占用一些浏览器的空间(ie7和 Opera 9.2就有这个问题) ，所以把它们放在一个隐藏的 div 中(在 div 中使用 CSS 类: .hide { display: none; visibility: hidden; })

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

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


提交答案