你什么时候选择在页面底部而不是顶部加载你的javascript？答案

【问题标题】：When do you choose to load your javascript at the bottom of the page instead of the top?你什么时候选择在页面底部而不是顶部加载你的javascript？
【发布时间】：2009-12-07 14:58:57
【问题描述】：

我看到页面顶部和底部加载了 JavaScript 库。

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

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

【问题讨论】：

尽可能不破坏任何功能。
@Mauricio Scheffer：你什么意思？
哈哈！我认为他是在谈论将您的脚本放在页面底部。
对不起，如果我不够清楚。我的意思是：在不破坏任何东西的情况下，将您的 js 代码尽可能靠近底部。如果你将一些代码移到底部并得到一个 js 错误，你就走得太远了:-)

标签： javascript jquery

【解决方案1】：

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

底部：加载内容时更重要

【讨论】：

我喜欢这个，它很精确。您能否再解释一下“顶级”场景，我不太清楚。
您可能希望 js 在页面上呈现后立即开始工作的页面部分（即：带有弹出子导航的主导航）。在这种情况下，您希望导航 js 在顶部加载并在包含导航的 div 准备好时触发，而不是在整个页面加载完成时触发。
再举一个什么时候把东西放在顶部的例子，在这里看到我的回答：stackoverflow.com/questions/703783/…
我要指出的是，如果您在底部加载它，您将无法访问在页面加载时运行的“内联”javascript 的任何 jQuery 功能（即“$ undefined”）参考：stackoverflow.com/a/8556006/32453

【解决方案2】：

雅虎告诉Put Scripts at the Bottom。谷歌says something similar 但不是很清楚。

【讨论】：

是的； CSS 在顶部，JS 在底部。
Google 的 PageSpeed 也这么说。对于加载几百 K 或更多 JS 的页面，这会显着缩短加载时间。
感谢 James，我现在也添加了 Google 推荐更新。
出于性能原因，两者都这么说。表演并不总是最重要的。谨防过早的优化。
绝大多数网页没有任何特殊要求表明将js移到顶部。因此，应该使用通常效果最好的情况（底部的 js），除非出现使默认值无效的情况。过早的优化是花时间担心速度。将 js 放在底部的默认设置不需要额外的思考或努力。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我将所有 CSS 放在 HEAD 中以避免过多的屏幕绘画和样式闪烁。

我将大多数 JavaScript 文件请求放在页面底部，以便页面可以快速呈现（HTML/CSS 加载将阻塞，直到它们上方的脚本标签被加载和处理）。任何需要在库文件加载后执行的代码都在DOMReady上执行，这是除了库初始化之外的所有代码。我非常关注Google's PageSpeed recommendations。

我也一直在考虑使用 LABjs 来进一步减少页面加载时间，但现在这已经足够好了。

【讨论】：

【解决方案5】：

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

如果script 元素使用src 属性加载脚本，则在加载当前脚本之前，其他资源（JavaScript、CSS、图像等）的加载将被阻止。

这两个因素都会减慢您网页的感知加载时间。

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

我将所有外部脚本（例如 Google 分析）放在底部，这样它们的延迟不会影响 DOM 的加载。

【讨论】：

【解决方案8】：

简单地说，如果你的脚本有 sn-ps 会立即开始执行（在所有 function(){} 主体之外）并且可以访问 DOM 元素，它应该放在页面的末尾，这样 DOM 就会被构建并准备好在脚本开始执行时被访问。

如果您仅通过函数调用（如onload、onclick 等）访问 DOM，您可以将脚本安全地放在 head 部分本身中。

【讨论】：

【解决方案9】：

我在头部放置了一个小脚本，它可以在页面的其余部分呈现之前执行我想做的任何事情，并在加载时加载任何其他所需的脚本，或者在文档加载后根据需要加载。

【讨论】：