在HTML中加载/调用javascript的适当位置

Question

我发现在 HTML 的head标记中声明了javascript，后跟body和其他内容。当我们有 jQuery 或我们想在项目中引用的任何其他库文件时，这主要是实践的，

为什么我们需要在 HTML 的head标记中添加javascript？

和

它会有什么不同，如果我们在body标记中添加它，浏览器的页面渲染性能是否会有任何变化？

例如，我想了解以下情况。考虑我的javascript包含以下一行，

$(SomeHTMLTag).replace("%data%, NewName);

现在，如果我在标头标记中添加此javascript，我的 HTML 页面将使用newName呈现。

其次，如果我在呈现SomeHTMLTag之后在HTML末尾添加javascript，那么在这种情况下是否会首先使用默认名称重复呈现SomeHTMLTag然后使用新的命名

Answer 1

可以在body标签的最后一个语句中添加Javascript引用。大多数javascripts需要在html渲染后执行，因此JS不应该在head标签中。如果它在head标签中并且认为引用的JS是1MB，则JS将首先通过浏览器下载，然后html将呈现，因此需要一些时间。如果它位于内容的底部，那么html将首先呈现，用户会立即看到响应。

Answer 2

将它放在head标记中的原因是立即加载您需要的任何内容并保持非DOM（您的JS和CSS）分离。

但是，除非脚本加载了async标记，否则它们会阻止页面加载。因此，将脚本标记放在body标记的末尾实际上并不是一种不好的做法，作为额外的好处，您不必等待DOMReady事件开始操作DOM作为元素已经加载。我在高性能页面上工作，我经常将我的脚本标记放在body的末尾。

Answer 3

您可以在HTML文档中放置任意数量的脚本。

脚本可以放在HTML页面中，也可以放在HTML页面中，或者放在两者中。

  

注意：将所有代码保存在一个地方，总是一个好习惯。

Answer 4

在Javascript中，SCRIPT标签可以插入

• 在两个BODY标签之间，
• 在两个HEAD标签之间，

两个HEAD标签之间的

* - * 浏览器从上到下工作，因此在加载任何HTML或CSS元素之前将解析脚本。这意味着如果将脚本标记移动到两个头标记之间（尽可能顶部），页面将呈现缓慢

两个BODY标签之间的

* - * 浏览器在此事件中从上到下进行工作 在读取脚本之前，网页本身已经加载。 这也可以提高渲染性能。为了获得最佳效果，请尽早渲染html，css并最后编写脚本。

因此，如果您在顶部有一些慢速脚本，它可能会延迟或阻止页面的其余部分呈现。