将脚本放在网页底部会加速页面加载吗？答案

【问题标题】：Does putting scripts on the bottom of a web page speed up page load?将脚本放在网页底部会加速页面加载吗？
【发布时间】：2009-05-12 21:58:16
【问题描述】：

Yahoo 最佳实践指出putting JavaScript files on bottom 可能会使您的页面加载得更快。有什么经验？有什么副作用，如果有的话？

【问题讨论】：

脚本会阻止其他下载，因此我倾向于在结束正文标记之前加载脚本（即时页面功能所需的脚本除外），然后在之后放置依赖于它们的函数。最后，我添加了谷歌分析之类的东西。据我了解，页面不一定总是加载更快（尽管它可能会），但用户看到内容更快，这有助于明显的加载速度。在这里咨询更快网站的霸主：stevesouders.com/hpws/move-scripts.php

标签： javascript

【解决方案1】：

它有几个优点：

渲染开始得更快。浏览器无法布局它尚未收到的元素。这样可以避免“黑屏”问题。
延迟连接限制。通常您的浏览器不会尝试一次与同一服务器建立多个连接。如果您有一整排脚本等待从慢速服务器下载，它会真正破坏用户体验，因为您的页面似乎停滞不前。

【讨论】：

截至 2013 年，第一点仍然有些正确。但是，将脚本放在底部不再那么重要了。现在使用 HTML5，如果脚本需要更改 DOM，最好将其与 html5 的“async”或“defer”属性放在头部，以避免延迟页面的整体呈现。出于布局目的，调用脚本的速度越快，延迟 DOMReady 事件的时间就越少，页面加载给用户的速度就越快。现在只有在 window.onload 之后与用户操作相关的脚本才应该放在底部。

【解决方案2】：

如果您获得 Microsoft 的 Visual Round Trip Analyzer 的副本，您可以准确了解正在发生的事情。

我更经常看到的是大多数浏览器在遇到 JavaScript 文件时STOP PIPELINING请求，并将其整个连接专用于下载单个文件，而不是并行下载。

流水线停止的原因是允许立即将脚本包含到页面中。从历史上看，很多网站都使用 document.write 来添加内容，然后立即下载脚本可以获得更加无缝的体验。

这无疑是 Yahoo 正在优化的行为。（我在 MSDN 杂志上看到了与上述解释完全相同的推荐。）

请务必注意，IE 7+ 和 FF 3+ 不太可能表现出不良行为。（主要是因为使用 document.write 已经过时了，现在有更好的方法来预渲染内容。）

【讨论】：

【解决方案3】：

据我所知，它只是让浏览器更快地开始渲染。

【讨论】：

所以我想如果 js 文件足够大，它看起来就像页面已加载但用户无法执行任何操作，因为浏览器仍在加载 js 文件。
堆栈溢出中有时会发生这种情况，至少。 :)
用户不能做任何事情并不是真的——他们只是不能做任何需要 javascript 的事情。
对我来说，加载/解析 javascript 时一切都变得迟缓。例如，使用 css 在悬停时显示下划线的链接在页面加载之前不会执行任何操作。

【解决方案4】：

如果将某些脚本放在页面末尾，则其副作用是根本无法运行。如果在呈现页面时运行的脚本（例如广告脚本很常见）依赖于另一个脚本中的函数，则必须首先加载该脚本。

另外，说页面加载速度更快也不是事实。它真正做的是更早地加载页面的视觉元素，这样看起来你的页面加载速度更快。加载页面所有组件的总时间仍然相同。

【讨论】：

【解决方案5】：

将它们放在底部几乎等同于使用"defer" 属性（更多信息here）。这类似于浏览器无法继续页面布局，除非 IMG 标签具有宽度和高度信息——如果包含的 javascript 生成内容，则浏览器无法继续布局，直到它知道那里有什么，以及所有内容有多大.

只要您的 javascript 不需要在 onload 事件发生之前运行，您应该能够将脚本标签放在末尾，或者使用 defer 属性。

【讨论】：

【解决方案6】：

您的页面实际上应该加载得更快。例如，浏览器将打开多个连接以并行下载三个图像。另一方面，大多数浏览器中的<script> 标签会导致浏览器阻止该脚本的执行。如果它是一个带有 src 属性的<script> 标签，浏览器将阻止下载和执行。如果你把<script> 标签放在最后，就可以避免这个问题。

同时，这意味着这些页面在加载完成之前没有任何 JS 功能。一个很好的可访问性练习是确保您的网站运行良好，以便在 JS 加载之前可用。这可确保该页面 (a) 适合连接速度较慢的用户 (b) 适合有障碍或使用纯文本浏览器的用户。

【讨论】：

大多数浏览器在脚本执行时会继续下载，所以这并不完全正确。

【解决方案7】：

如果您正在为 firefox/safari 进行开发，您可以随时查看 firebug/developer 控制台，因为它们会显示文件的加载顺序

【讨论】：

【解决方案8】：

有几点。

由于 JavaScript 内部或外部位于底部，因此加载页面速度很快。
如果您没有在 JavaScript 中使用窗口的 onLoad 方法，它将在渲染后立即开始执行。底部的脚本确保您的脚本将在页面加载后执行。
如果脚本作为文件表示外部，则将在 HTML 图像和构成页面视图的其他可视对象之后呈现。

如果您使用的是 fireFox，那么有一个插件可以检查性能。请务必访问该插件的 Firefox 站点。

【讨论】：