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

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

我想知道什么时候做这些选择。我在页面顶部编写的所有JavaScript代码，包括jquery插件

---

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

Top：在元素上立即使用JavaScript事件函数更重要（因此，如果使用DOM就绪事件加载所有内容，这是错误的位置）

---

底部：加载内容时更重要

雅虎说。谷歌，但不是那么清楚

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

---

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

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

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

简单地说，如果脚本中的代码段将立即开始执行（在所有

function（）{}

body之外），并且可以访问DOM元素，那么它应该位于页面的末尾，这样就可以在脚本开始执行时构建DOM并准备好访问DOM

---

如果您仅通过函数调用（如

onload

，

onclick

等）访问DOM，则可以将脚本安全地放在head部分本身。

我将所有CSS放在head中，以避免过多的屏幕绘制和样式闪烁

我将大多数JavaScript文件请求放在页面底部，这样页面可以快速呈现（HTML/CSS加载将被阻止，直到上面的脚本标记被加载和处理）。加载库文件后需要执行的任何代码都会在omready上执行，这是除库初始化之外的所有代码。我差不多都跟着

---

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

我在头上放了一个小脚本，在页面其余部分呈现之前执行我想执行的任何操作，并在加载时加载任何其他需要的脚本，或在加载文档后根据需要执行操作。

当浏览器遇到

脚本

元素时，它必须评估该元素中包含的JavaScript，因为脚本可能会更改页面内容（通过

document.write

）或检查页面的当前状态

如果

script

元素使用

src

属性加载脚本，则在加载当前脚本之前，将阻止加载其他资源（JavaScript、CSS、图像等）

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

---

如果您的JavaScript不改变页面，或者在页面加载之前不需要检查页面的状态，您可以使用

defer=“defer”

（受IE 6+和Firefox 3.5+支持）标记

脚本的
元素，这表示脚本的评估可能“稍后”进行。将
脚本
元素移动到页面底部也能有效地完成同样的事情-因为脚本出现在文档末尾，在加载CSS、图像等并呈现HTML后，将对其进行评估。
是；CSS在顶部，JS在底部。谷歌的PageSpeed也这么说。对于加载了几百K或更多JS的页面，这会大大缩短加载时间。谢谢James，我现在也添加了谷歌推荐的更新。两人都说这是出于性能原因。表演并不总是最重要的。谨防过早的优化。绝大多数网页都没有任何特殊要求，表明将js移到顶部。因此，应该使用通常效果最好的情况（底部的js），除非出现了使默认值的使用无效的情况。过早优化就是花时间担心速度。将js放在底部的默认设置不需要额外的思考或努力。我喜欢这样，它很精确。你能解释一下“顶部”场景吗，我不太清楚。你可能希望js在页面上呈现后立即开始工作的页面部分（即：带有弹出子导航的主导航）。在这种情况下，您希望在顶部加载导航js，并在包含导航的div准备就绪时触发，而不是在整个页面加载完成时触发。要给出另一个何时在顶部加载内容的示例，请参见我的回答：我想指出，如果在底部加载，对于在页面加载时运行的“内联”javascript（即“$undefined”），您没有访问任何jQuery功能的权限。ref:只要可以，就不会破坏任何功能。@Mauricio Scheffer:什么意思？lolll！我想他说的是把你的脚本放在页面的底部。如果我不够清楚，很抱歉。我的意思是：在不破坏任何东西的情况下，将js代码尽可能靠近底部。如果你移动一些c