Question

可能重复：
How bad is it to embed JavaScript into the body of HTML?

好的，所以我现在一直在使用JavaScript并且我并不陌生，但我的问题是关于JavaScript在HTML中应该放置的位置文件。

我总是被告知并且工作的印象是，所有对外部脚本文件的引用都应该包含在head标记中，并且当前HTML文件中包含的任何脚本都应该位于< strong>结束文件。

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

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

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

Answer 1

在页面底部+1投票

给访客;

内容和标记
然后用css显示
然后使用javascript

欣赏这是一个很高的眉头

Answer 2

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

将脚本放在页面底部更好的原因是因为它们阻止了并行下载。通常，浏览器按主机名并行下载资源，一次两个资源（由HTTP 1.1规范指定）。脚本可以防止这种情况发生，并且在完全下载之前不允许下载任何其他内容。

Answer 3

重复此问题 Is it bad practice to embed JavaScript into the body of HTML?

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

Answer 4

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

（我将尝试用基本场景解释它。所以不要对场景进行批评）

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

Answer 5

开始在Rob Sedge的回复下写下评论，但它变大了......

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

2）正文中的内容和标记

3）在</body>

之前的页脚中的JS

尽管强烈建议在$（document）.ready或$（window）.load事件中进行当前的JS评估，但某些外部脚本可能不会这样做 - 在这种情况下，它们将在内容时立即进行评估已经下载，经常导致随机行为。此外，只要浏览器实际处理给定标记（第1点），就会对内容进行评估，从而增加了有趣的内容。

另外一个（至少对我而言）主要是这个 - 让我们说你的文档中有一个模板引擎或PHP包含。现在 - 让我们说你有很多这样的文件，其中一个JS代码需要改变。在这种情况下，如果您不是唯一一个从事项目工作的人，则需要在所有这些文件中搜索给定的代码。因此 - 将JS放在一个地方是一种很好的做法。

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

Answer 6

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

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

我强烈建议你阅读Steve Souders的两本书：“高性能网站”和“更快的网站”，你对这些差异有很好的解释。

将Javascript放在HTML文件中

6 个答案: