不显眼的 JavaScript： <script> 在 HTML 代码的顶部还是底部？
Posted
技术标签:
【中文标题】不显眼的 JavaScript： <script> 在 HTML 代码的顶部还是底部？【英文标题】：Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code? 【发布时间】：2010-09-13 16:43:06 【问题描述】：我最近阅读了雅虎宣言Best Practices for Speeding Up Your Web Site。他们建议尽可能将 javascript 包含在 html 代码的底部。
但是具体的时间和地点？
我们应该把它放在关闭</html> 之前还是之后？最重要的是，我们什么时候应该把它放在<head> 部分？
【问题讨论】：
Where is the best place to put <script> tags in HTML markup?的可能重复 【参考方案1】：真正不显眼的脚本有两种可能性：
通过 head 部分中的脚本标记包含外部脚本文件 通过正文底部的脚本标签包含外部脚本文件（</body></html> 之前）
第二个可能更快，因为最初的 Yahoo 研究表明，一些浏览器在点击脚本标签时会尝试加载脚本文件，因此在完成之前不会加载页面的其余部分。但是，如果您的脚本有一个“就绪”部分必须在 DOM 准备好后立即执行，您可能需要将它放在头上。另一个问题是布局 - 如果您的脚本要更改页面布局，您希望它尽早加载，这样您的页面就不会花费很长时间在用户面前重绘自身。
如果外部脚本站点位于另一个域（如外部小部件）上，则可能值得将其放在底部以避免延迟页面加载。
对于任何性能问题做你自己的基准测试 - 当一项研究完成时可能会发生变化，这可能会随着你自己的本地设置或浏览器的变化而改变。
【讨论】：
关于具有“就绪”部分的脚本。将该脚本放在主体的底部可确保 DOM 已准备好被操作，如果将其放在头部，则必须将其包装以等待 DOMReady（或类似）事件 @Juan 是的，但是通过将脚本放在底部，您将 DOMReady 事件延迟了浏览器解析文档和处理头部元素所需的时间（200- 500 毫秒），在它请求该脚本之前。主要在第一页加载（假设它可以从那里缓存）。而如果你把它放在头上。它可能准备得更快。因此，考虑到 HTML5，如果脚本必须在 DOM 准备好时修改布局，现在最好在头部添加“async”或“defer”脚本。【参考方案2】：它从未如此简单——雅虎建议将脚本放在结束 </body> 标记之前，这会产生页面在空缓存上加载速度更快的错觉（因为脚本不会阻止下载其余的文件）。
但是，如果您有一些代码要在页面加载时运行，它只会在整个页面加载后才开始执行。如果您将脚本放在<head> 标记中，它们将在之前开始执行 - 因此在准备好的缓存上，页面实际上看起来加载速度更快。
此外，将脚本放在页面底部的权限并不总是可用的。如果您需要在视图中包含依赖于之前加载的库或其他 JavaScript 代码的内联脚本，则必须在 <head> 标记中加载这些依赖项。
总而言之，雅虎的建议很有趣，但并不总是适用，应根据具体情况进行考虑。
【讨论】：
如果你有不显眼的javscript，你不会有内联sn-ps，这个问题特别提到不显眼。 inline<script> 标签并不意味着突兀的 javascript。
@Eric Galperin：不突兀的内联脚本标签有什么用处？
@Juan obstrusive Javascript 意味着 UI 没有它就坏了，或者它嵌入在标记中。 <script> 标签与标记分开，可以与增强界面但不是必需的代码一起使用。因此，内联 <script> 标签本身并没有什么突兀的地方。
1.我的名字是 Eran 而不是 Eric，2。当您想从服务器端语言将数据传递给 Javascript 时，例如在循环中的项目中，您可以使用 <script> 标签将这些值编码为 javascript 变量，以供使用具有内联编辑或其他类似行为。【参考方案3】：
正如其他人所说，将其放在结束 body html 标记之前。
前几天，我们接到许多客户的电话，抱怨他们的网站速度极慢。我们在本地访问了它们，发现它们需要 20-30 秒才能加载一个页面。认为是服务器性能不佳，我们登录了 - 但 web 和 sql 服务器的活动都约为 0%。
几分钟后，我们意识到一个外部网站已关闭，我们正在链接到该网站以获取 Javascript 跟踪标签。这意味着浏览器会点击站点 head 部分中的 script 标记并等待下载脚本文件。
因此，至少对于第 3 方/外部脚本，我建议将它们作为页面上的最后一件事。然后，如果它们不可用，浏览器至少会加载页面直到该点 - 而用户会忘记它。
【讨论】：
很酷的故事兄弟 :) 但说真的，这是我见过的将脚本标签放在页面底部的最有说服力的论据。【参考方案4】：总结一下，根据上面的建议：
-
对于外部脚本（Google 分析、第 3 方营销跟踪器等），请将它们放在
</body> 标记之前。
对于影响页面布局的脚本，放在头部。
对于依赖 'dom ready' 的脚本（如 jquery），请考虑将脚本放在 </body> 之前，除非您有特殊情况需要将脚本放在 head 中。
如果存在具有依赖关系的内联脚本，请将所需的脚本放在 head 中。
【讨论】：
【参考方案5】：如果您想修改脚本的位置，YSlow 是一个很好的工具，可以让您体验一下它是否会提高或损害性能。将 javascript 放在某些文档位置确实可以缩短页面加载时间。
http://developer.yahoo.com/yslow/
【讨论】：
【参考方案6】：不，它不应该在</html> 之后，因为那将是无效的。放置脚本的最佳位置就在</body>之前
这基本上是因为大多数浏览器在评估您提供的脚本时会停止呈现页面。所以可以将非阻塞代码放在页面的任何位置（我主要考虑将函数附加到onLoad 事件的东西，因为事件绑定是如此之快以至于实际上是免费的）。这里的一个大杀手是在页面的开头放置一些广告服务器脚本，它可以在广告完全下载之前阻止任何页面加载，从而使您的页面加载时间膨胀
【讨论】：
你知道，如果你真的关心速度，那么就不会有 【参考方案7】：如果你把它放在底部，它会最后加载，从而加快用户查看页面的速度。它确实需要在最终的 </html> 之前，否则它不会成为 DOM 的一部分。
如果代码是立即需要的，那么就把它放在头上。
最好将博客小部件之类的东西放在底部，这样如果它们不加载，也不会影响页面的可用性。
【讨论】：
以上是关于不显眼的 JavaScript： <script> 在 HTML 代码的顶部还是底部？的主要内容，如果未能解决你的问题，请参考以下文章