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

Question

雅虎最佳实践表明,将JavaScript文件放在底部可能会使您的页面加载速度更快.这有什么经历？有什么副作用,如果有的话？

Answer 1

它有几个优点:

渲染开始得更早.浏览器无法布局尚未收到的元素.这避免了"空白屏幕"问题.
延迟连接限制.通常,您的浏览器不会尝试一次只能连接到同一台服务器.如果您有一整套脚本等待从慢速服务器下载,它可能会破坏用户体验,因为您的页面似乎停止了.

截至2013年,第一点仍然有点真实.但是,将脚本放在底部不再那么重要了.现在使用HTML5,如果脚本需要更改DOM,最好使用html5"async"或"defer"属性将其置于头部,以避免延迟页面的整体呈现.出于布局目的,调用脚本的速度最快,延迟DOMReady事件的次数越少,页面加载到用户的速度就越快.现在,只有与window.onload之后的用户操作相关的脚本才会放在底部. (4认同)

Answer 2

如果您获得Microsoft的Visual Round Trip Analyzer的副本,您可以准确地描述正在发生的事情.

我经常看到的不是大多数浏览器遇到JavaScript文件时停止PIPELINING请求,并将整个连接专用于下载单个文件,而不是并行下载.

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

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

值得注意的是,IE 7+和FF 3+不太可能表现出不良行为.(主要是因为使用document.write已经失去了实践,现在有更好的方法来预呈现内容.)

Answer 3

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