Question

如果你有JS代码打算作为加载/构建页面的一部分运行，HTML应该在哪里？例如，修改<div>或添加一些链接。这应该放在<body>中，穿插HTML吗？或者 <head>和<body>元素之间是否应该？事情发生在什么顺序 - 它们在页面中的顺序还是HTML都在之前发生（非<head>）JS运行？

Answer 1

如果你有JS代码打算作为加载/构建页面的一部分运行，HTML应该在哪里？

在结束</body>标签出现之前，作为最佳做法，禁止其在其他地方（有时可能存在）的特定要求。例如，它是recommendation of the YUI folks，但不仅仅是它们。

事情发生的顺序 - 它们在页面中的顺序还是HTML都在（非）JS运行之前发生？

当遇到script标记时，除非您使用defer or async attribute（并且浏览器支持它们），否则所有HTML解析都会暂停，脚本将被下载并传递给JavaScript解释器。当JavaScript解释器完成处理脚本时，HTML解析器可以继续。它必须这样做，因为JavaScript可以通过document.write将令牌插入到HTML流中。这也是为什么你可以加载脚本文件，然后加载第二个脚本文件，依赖于第一个脚本文件，并知道它们将以正确的顺序加载。除非你以某种方式推迟你的代码（window.onload或“DOM加载”事件，否则你为什么你不能从它上面的脚本中访问HTML流中更下层的元素。许多库支持，例如jQuery的ready或Prototype的dom:loaded）。

这样做的结果是，在script中放置head标记的典型做法实际上会减慢页面的明显加载时间，除非那些script标记需要出于某种原因在那里。因此建议将它们放在收尾</body>标记之前。

但是你需要注意一个“问题”：如果用户已经启用了你想要用JavaScript响应的部分页面，那么在最后加载你的脚本会留下一个短暂但真实的竞争条件：用户可以在下载脚本时与页面进行交互。有多种处理方式。我最喜欢的是检测JavaScript是否在head元素中使用内联脚本（而不是单独的文件）启用，如果是，则在可能的情况下放入文档级处理程序（例如，您可以使用click事件执行此操作，这些事件基本上会在非常短的时间内排队或禁用点击。这样，如果启用了JavaScript，您将避免竞争条件，但如果不是，那么您所拥有的任何unobtrusive后备都将有效。

Answer 2

整个HTML文件按写入顺序执行，即

<html>
  <div id="ID"></div>
  <script type="text/javascript">
    document.getElementById('ID').innerHTML = "HELLO";
  </script>
</html>

更改div的内容，where

<html>
  <script type="text/javascript">
    document.getElementById('ID').innerHTML = "HELLO";
  </script>
  <div id="ID"></div>
</html>

没有，因为JS代码是在div加载之前执行的。

编辑：如果你想在页面加载后运行JS，请使用window.onload或document.body.onload或

<body onload="...">

或者，如果您使用的是JS库（如jQuery），则可以使用

$(document).ready(function() {
  ...
});

Answer 3

将它们作为函数放在自己的.js文件中，<script src>在HTML <head>或<body>末尾包含该文件。如果在文档加载期间需要执行其中任何一个，请使用window.onload或JS库/框架提供的任何加载函数来调用它，如果您使用的话。

关于确切的位置，将它们放在<head>的末尾允许在浏览器中显示HTML页面之前下载它们并将它们放在<body>的末尾以允许页面显示稍微好一点，因为下载脚本会阻止页面渲染，因此这是一种更好的速度体验。

然而，IMO，只要你有一些不能在没有JS的情况下使用的页面元素，在页面呈现之前下载脚本会更加健壮。如果用户不耐烦，否则会导致无法使用的元素。

Answer 4

我将它放在一个单独的.js文件中并包装代码，以便在加载DOM后执行它。如果你使用像jQuery或Prototype这样的框架，这应该很容易。

Answer 5

为了获得最佳性能，请将JavaScript文件放在您正在服务的HTML页面的BOTTOM上。

为了确保在您尝试使用它时设置了所有内容，请在DOM准备就绪后执行（有多种变体，我的建议：使用JavaScript库）。

Answer 6

您可以在头，身体，两者之间以及其他之间放置脚本标签。您可以将其放置在大多数位置，但请参阅this以获取更深入的了解。

JS脚本应该放在哪个HTML文件中？

6 个答案: