Question

我看到Javascript代码通常是HTML代码的标题部分。

<head>
<script type="text/javascript" language="javascript" src="core.js"></script>
...
</head>

将Javascript代码放在HTML代码的正文部分是否可以？我测试了它，但它似乎有效。

<body>
<script type="text/javascript" language="javascript" src="core.js"></script>
...
</body>

如果是这样，为什么Javascript书籍的例子将javascript代码放在标题部分？如果没有，将javascript代码放在body / heading部分之间有什么区别？

Answer 1

不仅可以，it's actually better，因为它可以让内容排在第一位。

如果你的观众有慢速（例如移动）连接，最好先发送实际内容，这样他们就可以在浏览器下载Javascript时读取它。

Answer 2

所有人都说它更好只适用于从代码质量的角度来看，如果你在页面底部谈论（这是辩论的事情），通过脚本标签是不可能的你的HTML。所有对javascript的引用应该在页面上的一个位置，无论是头部（它们应该在哪里），还是最底部（作为perf优化）

编辑：

基本上，网页由3个部分组成; style（css），结构（html）和行为（javascript）。这些部分都非常独特，因此尽可能将它们分开是有意义的。这样，如果你需要更改一些javascript，它就在一个地方。如果它是通过文件传播的，那么找到你正在寻找的代码变得更加困难，当你只是看结构时，代码基本上会变成噪音。

这与为什么不在页面上遍布db访问代码的论点相同。它与技术原因无关，纯粹是建筑/设计决策。为了可读性，可维护性和扩展性，可重构性（不确定最后一个是否实际上是一个单词......），应该将执行不同操作的代码分开。

Answer 3

你可以这样做，而人们经常这样做。

例如，人们喜欢在结束script之前放置</body>标记，以便更快地呈现网页。

此外，如果在创建元素后执行脚本块，则无需等待DOM准备就绪。

请注意，不要添加或删除标记树中未关闭的祖先中的元素（不包括脚本块的直接父元素），否则您将获得可怕的{{ 3}} IE中的错误。

Answer 4

只需添加一些内容：

我倾向于在</body>之前放置Javascript文件。我的理由是：

内容可以加载并首先显示。如果你首先加载大量的Javascript文件，在加载页面之前大多数都没有意义，那么在加载JS文件之前，用户将无法看到任何内容。
大多数需要使用UI的Javascript代码只能在加载UI后运行。将代码放在html文件的末尾可以减少使用onload事件处理程序的需要。
在整个HTML文件中放置Javascript片段是非常糟糕的习惯。将所有内容放在HTML文件的后面可以让您更有效地管理Javascript。

Answer 5

根据规范，合法

大多数示例在标题中使用它们，因为标题首先出现，浏览器将能够更快地解析引用并下载JS文件。

此外，这些是链接，不是显示的一部分，所以传统上，放在标题中。

Answer 6

这是完全合法的，但似乎有一些不同的意见。那些说将所有javascript引用放在头部的人认为脚本是在页面的其余部分变得可见并依赖于它之前下载的。因此，您的用户不会在屏幕上看到对象，尝试与其进行交互并因为尚未加载javascript代码而收到错误。

另一方面，争论认为在用户看到页面之前加载所有脚本需要更长的时间，这会对您网站的感知速度产生负面影响。

Answer 7

当页面加载到浏览器中时，将立即执行正文中的JavaScripts

将javascript放在正文的末尾将推迟javascript加载（即：页面将呈现更快），但请记住，任何用于事件的javascript函数都应该在事件声明之前加载，这主要是因为用户可能是能够在页面完全加载之前触发事件（所以在加载函数之前）！

Answer 8

我曾经把它放在头脑中，然后我听说加载页面需要更长的时间，所以我开始将脚本放在最底层。但是，我发现最“干净”的方法是将它放在头部但是将脚本放在document.ready函数中。这样你就可以拥有两全其美。它更清晰，因为它在头部并且在内容加载之前没有加载，因此在性能方面也没有任何问题。

例如，使用jQuery，你可以这样做：

$(document).ready(function() {
    alert('test');
});

警报只会在页面完全加载后弹出，即使脚本在头部。

将javascript代码放在HTML代码中的任何位置都可以吗？

8 个答案: