将脚本放在网页底部会加快页面加载吗？

Question

雅虎最佳做法指出putting JavaScript files on bottom可能会让您的网页加载速度更快。这有什么经历？有什么副作用，如果有的话？

Answer 1

它有几个优点：

• 渲染很快就会开始。浏览器无法布局尚未收到的元素。这避免了“空白屏幕”问题。

• 延迟连接限制。通常，您的浏览器一次不会尝试与同一服务器建立多个连接。如果您有一整套脚本等待从慢速服务器下载，它可能会破坏用户体验，因为您的页面似乎停止了。

Answer 2

如果您获得了Microsoft Visual Round Trip Analyzer的副本，则可以准确地了解所发生的情况。

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

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

这肯定是雅虎正在优化的行为。 （我在MSDN杂志中看到了与上述解释相同的建议。）

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

Answer 3

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

Answer 4

一方面的影响是，如果将某些脚本放在页面末尾，则根本不起作用。如果在呈现页面时运行脚本（例如，对于广告脚本非常通用）依赖于另一个脚本中的函数，则必须首先加载该脚本。

另外，说页面加载速度不是确切的事实。它真正做的是提前加载页面的可视元素，以便您的页面加载速度更快。加载页面所有组件的总时间仍然相同。

Answer 5

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

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

Answer 6

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

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

Answer 7

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

Answer 8

有一些观点。

1. 它快速加载页面，因为JavaScript内部或外部位于底部。

2. 如果您在JavaScript中未使用 onLoad 窗口方法，则会在呈现后立即开始执行。底部的脚本确保您的脚本将在页面加载后执行。

3. 如果脚本作为文件意味着外部，那么将在HTML图像和构成页面视图的其他可视对象之后呈现。

如果您使用的是fireFox，则会有一个插件来检查性能。 请点击firefox网站获取此插件。