4

可能重复：
将 JavaScript 嵌入 HTML 正文有多糟糕？

好的，所以我使用 JavaScript 已经有一段时间了，我对它并不陌生，但我的问题是关于 JavaScript 应该放在HTML 文件中的什么位置。

我一直被告知和工作的印象是，您对外部脚本文件的所有引用都应该包含在head标记中，并且当前 HTML 文件中包含的任何脚本都应该位于文件的末尾。

现在，最近在与同事讨论时，我看到越来越多的人将脚本块放置在整个 HTML 页面中看似随机的位置，例如

<div>
   <p>Foo</p>
   <script type="text/javascript">
       //some script
   </script>
   <p>Bar</p>
</div>

现在这是一个好习惯吗？我一直认为不是。如果是这样，它是否有益，因为脚本会在此时执行，但是为什么你不能等到 HTML 的其余部分被加载？

4

6 回答 6

7

在页面底部 +1 投票

给来访者；

  • 内容和标记优先

  • 然后用css显示

  • 然后使用 javascript 的 ui

欣赏这有点高调

于 2012-05-15T20:22:31.560 回答
5

脚本应放置在页面底部，因为这将允许所有站点资源（例如图像）并行下载。完成后，将一次下载一个脚本。

最好将脚本放在页面底部的原因是它们会阻止并行下载。通常，浏览器会根据主机名并行下载图像等资源，一次下载两个资源（如 HTTP 1.1 规范所指定）。脚本会阻止这种情况发生，并且在完全下载之前不允许下载其他任何内容。

于 2012-05-15T20:11:28.820 回答
3

这个问题的重复 将 JavaScript 嵌入 HTML 正文是不好的做法吗？

当您想确保在脚本运行之前创建某些 dom 时，它有时会很有帮助（并且完全有效）。

于 2012-05-15T20:13:05.060 回答
2

当我使用内联时，它对我来说有一个明显的好处。例如。

（我会尽量用基本场景来解释。所以不要对场景挑剔）

我的页面中有 A、B 和 C html 部分（div）。显然我会将它们全部呈现，但我希望一次只对访问者可见一个部分。所以我等不及加载整个页面和 javascript 文件，然后应用“设置部分的可见性优先级”javascript 方法来触发。因为与此同时，所有三个部分（A、B 和 C）都将保持可见，直到所有内容都没有完全加载。并且页面可能看起来很糟糕，所以我更喜欢使用内联 javascript。

于 2012-05-15T20:24:28.683 回答
2

开始在 Rob Sedge 的回复下方写评论，但它变得越来越大......

1) CSS 在顶部，在标题中（除非您希望用户看到没有样式的页面，对于大型 HTML 文件/外部 JS，加载时间可能很长）

2）正文中的内容和标记

3) JS 在页脚，之前</body>

尽管目前强烈建议在 $(document).ready 或 $(window).load 事件中进行 JS 评估，但某些外部脚本可能不会这样做 - 在这种情况下，一旦下载了内容，它们就会被评估，通常会导致随机行为。此外，一旦浏览器实际处理给定的标签（第 1 点），内容就会被评估，从而获得更多有趣的东西。

另一个（至少对我来说是主要的）要点是 - 假设您有一个模板引擎，或者您的文档中包含 PHP。现在 - 假设您有很多这样的文件，其中一个需要更改 JS 代码。在这种情况下，如果您不是唯一从事项目的人，则需要在所有这些文件中搜索给定的代码位。因此 - 将 JS 保存在一个地方是一种很好的做法。

让我们补充一点，如果您确实将 JS 代码保存在一个地方，那么可以缩小或缓存此类内容，从而加快整个网站的加载速度。为什么您确实希望用户在每次加载页面时都下载您的 JS，而该脚本可以从缓存中进行评估。如果你分开你的脚本，这种方法就会变得困难。

于 2012-05-15T21:47:48.643 回答
1

基本上，您放在标题上的脚本是同步下载的，您可以确定它们将按顺序执行，但如果不需要在页面完成加载之前执行这些脚本，也许您更喜欢将它们包含在底部或以延迟的方式包含它们，以更快地完成页面渲染，并为用户提供更好的体验。

关于 HTML 中包含的脚本，这取决于它们的作用。例如，如果由于某种原因您需要执行 Document.write，或者您想在页面呈现之前执行一些代码来修改 DOM，它们非常方便。

我强烈建议您阅读 Steve Souders 的两本书：“High Performance Web Sites”和“Even Faster Web Sites”，在那里您对差异有很好的解释。

于 2012-05-15T20:41:11.860 回答