不引人注目的JavaScript:HTML代码顶部或底部的<script>？

我最近阅读了雅虎宣言加速你的网站的最佳实践.他们建议我们尽可能将JavaScript包含在HTML代码的底部.

但究竟何时何地？

我们应该在收盘前还是之后放？最重要的是,我们什么时候应该把它放在这个部分？

1> domgblackwel..：

---

真正不引人注目的脚本有两种可能性:

通过head部分中的脚本标记包含外部脚本文件

包括一个外部脚本文件,通过身体底部的脚本标签(之前)

第二个可能会更快,因为最初的雅虎研究表明,一些浏览器尝试在脚本文件到达脚本标签时加载脚本文件,因此在完成之前不会加载页面的其余部分.但是,如果您的脚本具有"就绪"部分,该部分必须在DOM准备就绪后立即执行,您可能需要将其置于头部.另一个问题是布局 - 如果您的脚本要更改您希望尽早加载的页面布局,那么您的页面不会花费很长时间在用户面前重绘自己.

如果外部脚本站点位于另一个域(如外部窗口小部件)上,则可能值得将其放在底部以避免延迟加载页面.

对于任何性能问题,请执行您自己的基准测试 - 在完成研究时可能会出现的情况可能会因您自己的本地设置或浏览器更改而发生变化.

---

关于具有"准备"部分的脚本.将该脚本放在正文的底部可以保证DOM已经准备好被操作,如果你把它放在头部,你必须将它包装起来以便它等待DOMReady(或类似的)事件

---

@Juan是的,但是通过将脚本置于底部,您将DOMReady事件延迟了浏览器解析文档并处理头元素(200-500ms)所需的时间,然后才会请求该脚本.主要是在第一页加载(假设它可以从那里缓存).而如果你把它放在头部.它可能会更快地准备好.因此,考虑到HTML5,如果脚本在DOM准备就绪时必须修改布局,那么现在最好使用头部的"异步"或"延迟"脚本.

2> Eran Galperi..：

---

它永远不会如此剪切和干燥 - 雅虎建议将脚本放在结束标记之前,这会产生错误,即页面在空缓存上加载速度更快(因为脚本不会阻止下载文档的其余部分).但是,如果您想要在页面加载时运行某些代码,它将仅在整个页面加载后开始执行.如果您将脚本放在标记中,它们将在之前开始执行 - 因此在已准备好的缓存中,页面实际上看起来会加载得更快.

此外,将脚本放在页面底部的权限并不总是可用.如果需要在视图中包含依赖于库或之前加载的其他JavaScript代码的内联脚本,则必须在标记中加载这些依赖项.

总而言之,雅虎的建议很有意思,但并不总是适用,应根据具体情况加以考虑.

---

@Juan obstrusive Javascript意味着UI在没有它的情况下被破坏,或者它被嵌入到标记中.`