在HTML文档中插入JavaScript的最佳位置

Best place to insert JavaScript within a HTML document

本文关键字：JavaScript 最佳位置 插入 HTML 文档      更新时间：2023-09-26

可能重复：
哪里是放置<脚本>HTML标记中的标记？

我应该把javascript代码放在哪里？

  <-- Here?
</body>
  <-- Here?
</html>
  <-- Here?

我一直使用上面的</body>，只是想知道这是否是"最好的"

如果JavaScript需要在加载整个页面之前准备就绪，则将其置于<head></head>之间。如果JavaScript需要在用户在页面上遇到某些东西之前立即可用，则可以将其放在<body></body>中的元素之前（尽管为了代码可读性，人们几乎不会这样做）。如果JavaScript只是做了一些增强或提供了跟踪信息（这不是必要的），那么可以将其放在</body>之前。

Concensus似乎有两个合理的地方可以放置脚本：

  1. 在<head>部分：

    • Pro：脚本在内容之前加载，因此可以在用户与页面交互之前应用动态行为
    • 缺点：用户必须等待脚本的下载和应用，这可能会导致更高的跳出率和较差的性能

  2. 就在</body>标签之前：

    • Pro：内容会被加载，并尽快对用户可见
    • Con：动态行为、效果等不会立即应用

你需要决定你的优先事项和具体需求。就我个人而言，我会把任何对<head>中页面正常运行至关重要的东西，以及任何最终的渐进增强。

真正取决于你要做什么。

一般的经验法则是将javaScript代码放在一个单独的文件中，并将该脚本与类似的内容链接起来

<script type="text/javascript" src="your/source/here.js"></script>

再说一遍，让脚本在页面中内联，你就可以把它放在你想要的地方。在页面的head部分中，它预先加载，因此如果需要，可以进行预处理。如果您有它，比如说在页面的body部分，它将以页面的正常流加载。

如果所有内容都在同一个文件中，我会在head中有脚本，如果需要，之后在body中调用函数。

希望这能有所帮助。

编辑

请记住，主要目标应该是代码的可读性和可重用性。因此，无论以最有效的方式实现这一点，我不得不说这是最好的方式。

将<script>放在</body>或</html>之后是无效的，我不确定它会实现什么。一些脚本，例如分析服务，建议在正文末尾（</body>之前）加载，因为它们是同步加载的，可能会挂起页面。

不要认为这几乎与代码中的位置有关，而是如何处理检查是否可以在代码触发时运行代码的问题。即加载或准备就绪。

HTML5样板文件提倡将大部分（如果不是全部的话）脚本作为主体中的最后一个元素，但我还没有找到时间来对其进行基准测试，而不是将其放在头脑中。

JavaScript可以添加到任何位置。下面只是一个你正在学习的基本例子。

<html>
<head>
----- Your Javascript here -----
</head>
<body>
</body>
</html>

内部</html>内部<body>

也就是说，有时只是偏好。许多人在文档末尾说，因为有一个假定的速度增加。如果它在那里，那就微不足道了。

如果在<head> // javascript code here </head>中放入javascript代码会更好因为标题部分在页面出现之前加载。

相关文章：