您何时选择在页面底部而不是顶部加载javascript？

Question

我已经看到JavaScript库被加载到页面的顶部和底部。

我很想知道何时做出这些选择。我编写的所有JavaScript代码都在页面顶部工作，其中包括jquery插件。

我什么时候在这些位置加载我的脚本？

Answer 1

顶部：在元素上立即使用JavaScript事件功能更重要（因此，如果您使用DOM Ready事件来加载所有内容，那么这是错误的地方）

底部：加载内容时更重要

Answer 2

雅虎对Put Scripts at the Bottom说。谷歌says something similar但不是那么清楚。

Answer 3

在页面底部执行此操作的原因是，如果将其放在页面顶部，则页面呈现将在呈现之前等待这些文件。这就是为什么很多人把JavaScript放在页面底部的原因，因为它允许渲染整个页面然后加载JavaScript。

您很少有任何理由希望将JavaScript放在页面顶部，除非您有明确的理由希望在主页面之前加载JavaScript，然后将其放在底部。大多数优化指南建议将其置于底部。

Answer 4

我将所有CSS放在HEAD中以避免过多的画面画和闪烁的风格。

我将大多数JavaScript文件请求放在页面底部，以便页面可以快速呈现（HTML / CSS加载将阻止，直到加载和处理它们上面的脚本标记）。加载库文件后需要执行的任何代码都在DMAReady上执行，除了库初始化之外的所有代码。我几乎跟着Google's PageSpeed recommendations。

我一直在考虑使用LABjs来进一步减少页面加载时间，但现在这种方法运行良好。

Answer 5

由于浏览器在解析Javascript文件时必须暂停显示页面内容，因此建议在页面底部加载Javascript以加快显示页面内容的速度。如果您的网站可以在没有任何Javascript执行的情况下呈现以修改页面，则效果最佳，因为即使脚本挂起的时间超过预期，该页面也可用于用户交互。

Answer 6

当浏览器遇到script元素时，它必须评估该元素中包含的JavaScript，因为脚本可能会改变页面内容（通过document.write）或检查页面的当前状态

如果script元素使用src属性加载脚本，则会阻止加载其他资源（JavaScript，CSS，图像等），直到加载当前脚本为止。

这两个因素都会降低页面的感知加载时间。

如果您的JavaScript不会更改页面，或者在加载页面之前不需要检查页面状态，则可以使用script标记defer="defer"元素（由IE 6支持） +和Firefox 3.5+）表示脚本的评估可以“稍后”发生。将script元素移动到页面底部会有效地做同样的事情 - 因为您的脚本出现在文档的末尾，所以在加载CSS，图像等并呈现HTML之后，它们将被评估。

Answer 7

我将所有外部脚本（例如Google分析）置于底部，因此它们的延迟不会影响DOM的加载。

Answer 8

简而言之，如果您的脚本具有可立即开始执行的片段（在所有function(){}主体之外）并且访问DOM元素，则它应该位于页面的末尾，以便构建DOM并且准备好在脚本开始执行时被访问。

如果仅从函数调用（例如onload，onclick等）访问DOM，则可以将脚本安全地放在head部分中。

Answer 9

我在头部放了一个小脚本，在页面的其余部分呈现之前完成我想做的任何事情，然后加载任何其他必需的脚本onload，或者在文档加载后根据需要。