Question

我已经搞乱了html5，我以前从来没有真正好好看过JavaScript。我正在引用这样的脚本文件（不在脑中）

<script src="somthing.js"></script>

但是，如果脚本放在页面上的某些元素下面，那么它似乎只能起作用。

是否存在javascript放置的特殊情况？

提前致谢。

Answer 1

如果脚本没有等待某种类型的onload或“ready”事件，则需要将放在它引用的元素之后（否则它们不会在那里找到）。如果你不确定，请在</body>之前坚持下去。

在这种情况下，它看起来正是正在发生的事情，它正在寻找尚未添加到DOM的元素。将脚本放在<body>的底部是一种常见的做法来解决这个问题。一些替代方法是使用window.onload事件来运行代码，或者使用jQuery的$(document).ready()（大多数主要库都有相同的代码）。

Answer 2

如果您的脚本作用于某个元素，则需要将其放在页面上的该元素之后，或者设置为在页面加载完成时执行。如果脚本在元素添加到DOM之前运行（当浏览器分析页面时遇到该元素时发生），则脚本无法找到您希望它执行的元素。在元素之后放置脚本可确保元素可供其使用。同样，强制它在整个页面加载后运行，确保脚本可以使用所有元素。

我建议您尽可能在结束</body>标记之前加载脚本。我还会考虑使用像jQuery这样的框架，这样可以在页面加载完成时轻松运行脚本并将代码包装在load事件中。

Answer 3

根据Yahoo's Performance Rules的最佳做法是将脚本放在页面底部：

脚本引起的问题是它们会阻止并行下载。 HTTP / 1.1规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以并行执行两次以上的下载。但是，在下载脚本时，即使在不同的主机名上，浏览器也不会启动任何其他下载。

在某些情况下，将脚本移到底部并不容易。例如，如果脚本使用document.write插入页面内容的一部分，则无法在页面中向下移动。可能还存在范围问题。在许多情况下，有办法解决这些问题。

经常出现的另一个建议是使用延迟脚本。 DEFER属性指示脚本不包含document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox不支持DEFER属性。在Internet Explorer中，脚本可能会延迟，但不是所需的。如果可以延迟脚本，也可以将其移动到页面底部。这将使您的网页加载速度更快。

Answer 4

好吧，我们需要知道你剧本中的内容真的告诉你，但简短的回答是“是的，它确实很重要。”

脚本（基本上）在浏览器遇到时执行。一个典型的错误是引用文档中先前放置的脚本中的页面元素而不是它引用的元素 - 当脚本执行时，元素还不存在！

通常认为将脚本保持在头脑中是合适的，因此上述问题的解决方案是将功能代码附加到onload事件处理程序。

奖金回合：脚本放置更为微妙的原因是因为大多数浏览器在遇到脚本时都会进行单线程下载（出于安全原因以及脚本可以修改下载要求）。这是雅虎建议在您的文档中最后放置脚本的原因之一，但仅仅为了感知的微妙好处，这是一个有争议的事情。

Answer 5

是的。

例如，让我们说你的js代码位于顶部。并且在浏览器完成之前解释它设置dom树的一部分...在这种情况下，你引用的HTML元素，如果在它可用之前被引用，将产生一个错误，表明该元素是未定义的。 / p>

另一个原因是用户体验。如果css位于顶部，当显示html时看起来都很好，但除非js位于底部，否则你必须等待它被加载并准备好执行，然后再渲染其余部分;因此，减慢渲染屏幕上项目的速度。

我看到了很多。不同浏览器的不同笔画，但只是将js放在底部，css放在顶部，你可以避免担心这样的东西。

Answer 6

这取决于脚本的设计目的。如果它正在使用document.write（）方法，那么它在页面上的位置确实很重要。如果它试图引用DOM中的元素，最好放在HEAD中并使用那些在页面加载后触发DOM元素的函数。

Answer 7

有几种情况下放置很重要。

假设您在foo()中有一个函数调用your_script.js并且在包含your_script.js之前调用它，那么它将无法正常工作，因为foo()未定义爱好。
如果代码需要某个元素可用（例如，灯箱脚本），那么在灯箱图像元素之前加载代码可能导致灯箱没有做任何事情。

所以基本上......这在很大程度上取决于你正在运行的脚本。有时它会很重要，有时则不会。

Answer 8

这不仅是关于脚本在页面中的位置，还包括脚本中的代码执行的时间。

脚本代码通常位于页面的head部分。但是，这意味着在加载代码时不会加载任何元素，如果它立即执行，则无法访问任何元素。解决方案是使用页面的onload事件。例如：

<html>
<head>
<title></title>
<script>
function init() {
  document.getElementById('message').innerHTML = 'Hello world!';
}
</script>
</head>
<body onload="init();">
<div id="message"></id>
</body>
</html>

Javascript库可能有其他类似的方法，比如jQuery中的ready事件。

您可以在页面中放置脚本（虽然这不是HTML标准推荐的），但是如果您需要从立即运行的代码访问页面中的元素，则必须在元素之后加载脚本。例如：

<html>
<head>
<title></title>
</head>
<body>
<div id="message"></id>
<script>
document.getElementById('message').innerHTML = 'Hello world!';
</script>
</body>
</html>

出于性能原因，脚本也可能会放在页面的后面。您可以牢记这一点并将其保存，直到您出现任何性能问题为止。

Answer 9

Yahoo实际上recommends将您的脚本置于底部。下载JS文件是一个阻塞动作，这意味着当时没有其他任何内容正在下载（例如images / css）通过将脚本放在底部，用户首先获取html / images / css并实际更快地看到页面，并且您的JS下载后添加交互性。

话虽如此，正如其他帖子所提到的那样，你的脚本必须等到dom is ready才真正对DOM做任何事情，否则你的行为会有所不同，具体取决于DOM准备好了。

Answer 10

嗯，这就是我的想法。

如果您需要执行脚本，那么在HTML在客户端浏览器中启动渲染之前，最好放在<head>部分。

如果您正在执行以某种方式与元素通信的JavaScript代码，那么脚本应该放在该元素后面，因为如果脚本提前开始，则它无法找到与其通信的相应元素。因此最好放在元素后面。

Answer 11

简单来说：确保在脚本开始执行之前加载脚本访问的元素。当然，如果你不确定那就放在它之前。

Answer 12

您的脚本可能会在准备好之前尝试对DOM进行操作。这应该不通过移动它来解决，而是通过domready回调延迟执行。

在对其进行排序后，您应该立即将script保留在head内。过去常见的做法是include scripts at the bottom of the page以避免页面和请求阻止。在HTML5中，这种性能影响不再重要，因为您可以利用async attribute。它允许在没有副作用的情况下启动JS文件的加载：

传统脚本会阻止HTML解析器，阻止在脚本下载并运行之前呈现页面的其余部分。使用HTML5异步的脚本取消阻止页面的其余部分，以便在下载脚本时继续加载。 ^

JavaScript放在HTML页面上的位置是否重要？

12 个答案: