我应该在html的正文还是头部编写脚本?

2022-08-30 03:04:22

我见过两种方式,两种实现工作只是结构有点不同。根据你的经验,哪个更好,为什么?


答案 1

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

  • 将库脚本(如 jQuery 库)放在 head 部分。
  • 将普通脚本放在头中,除非它成为性能/页面加载问题。
  • 将与包含关联的脚本、包含的脚本放在包含的末尾。这方面的一个示例是 asp.net 页中的 .ascx 用户控件 - 将脚本放在该标记的末尾。
  • 将影响页面呈现的脚本放在正文的末尾(正文闭合之前)。
  • 不要将脚本放在标记中,例如 - 最好将其放在脚本正文中的事件处理程序中。<input onclick="myfunction()"/>
  • 如果您无法决定,请将其放在脑海中,直到您有理由不这样做,例如页面阻止问题。

脚注:“当您需要它而不是之前”适用于页面阻塞时的最后一个项目(感知加载速度)。用户的感知就是他们的现实 —— 如果它被认为加载得更快,它确实加载得更快(即使代码中可能仍然会出现一些事情)。

编辑:参考资料:

旁注:如果您将脚本块放在标记中,则可能会占用空间(即已知7和opera 9.2存在此问题)来影响某些浏览器中的布局,因此请将它们放在隐藏的div中(使用css类,例如:在div上).hide { display: none; visibility: hidden; }

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

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


答案 2

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

一些更现代的浏览器违反了此规则,因为它没有阻止下载脚本(即第一个),但总的来说,下载并不是阻止花费的大部分时间。

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