“将Javascript放在最下面”是否会破坏document.ready的目的？

26

我知道建议将Javascript放在页面的底部，但是如果我使用jQuery，这不会破坏它在加载DOM时运行的目的吗？

例如，如果我有一个下拉菜单，则在页面的所有其余部分均已加载之前，不会显示下拉菜单。我还尝试着在渐进增强的基础上进行开发，因此我可能会使用jQuery而不是CSS隐藏元素（以便非JS用户可以看到它们）。

也许有一种快乐的媒介吗？

javascript performance jquery

— 心怀不满的山羊
source

我遇到了相反的问题。我有一个脚本来创建和定位侧边栏，但是不幸的是，在运行脚本之前已渲染了页面，这导致页面元素在新位置重新绘制时出现了讨厌的变化。是否有可能在我的脚本完成之前阻止渲染，或者在第一次渲染之前运行我的大小和位置的东西？

3

这个问题不是属于StackOverflow吗？

— Marco Demaio 2011年

30

在运行任何JavaScript之前，Document.ready等待DOM加载（http://www.learningjquery.com/2006/09/introducing-document-ready）。

将其放在底部的想法意味着，如果您的JS出现问题或该人的连接速度较慢，则页面的其余部分仍将首先加载，并且不会“挂起”。

无论开始还是结束，所有内容加载完成后，JS仍会运行。

— 卡兰
source

6

将javascript放在底部意味着其他页面内容（尤其是文本）在javascript之前加载，因此，如果用户连接速度较慢，则无需等待JS加载。

这不会影响document.ready，因为当浏览器完成页面的DOM准备时会调用该文件。无论哪种方式，仍然需要首先加载所有内容。

— 马查
source

3

在HTML加载完成之前，脚本没有实际使用-在HTML加载之前，脚本无法更改DOM。document.ready等待DOM加载。因此，它没有必要保留样式表之类的重要内容。

将脚本放在页面底部（</body>标记之前），以便尽快将HTML和CSS提供给用户。浏览器将能够更快地呈现页面，然后可以加载脚本，而不是在等待脚本下载时留出空白页面供用户凝视。

当浏览器逐步呈现页面时，如果它命中了脚本标签（即外部Javascript文件），则所有内容都会停止。脚本具有使用权-下载脚本时，浏览器将不会开始任何其他下载。即图像和样式表以及任何其他并行下载将被阻止，即使在不同的主机名上也是如此。

将脚本放在页面底部的缺点是，因为页面将在脚本初始化之前呈现，特别是快速单击器将能够在Javascript准备就绪之前与您的网站进行交互。

注意：样式表正好相反-页面底部附近的样式表会阻止渐进式渲染，直到所有样式表均已下载并将其移动到文档中才能HEAD消除此问题。

为了在不让用户等待的情况下加载javascript，有一个巧妙的技巧，您可以<script/>使用DOM createElement()方法创建一个元素并将其添加到页面中，紧接在结束</body>标记之前：

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

在将新<script/>元素实际添加到页面之前，浏览器不会开始下载js脚本。下载完成后，浏览器将解释其中包含的Javascript代码。

— 汤姆
source

1

并非完全正确。脚本可以在所有HTML加载之前更改DOM。事实上，这就是脚本被阻止的原因，因为它们可以更改页面。也就是说，在许多情况下，开发人员在加载DOM之前不需要添加其“行为”脚本。

— scunliffe

1

是。如果将脚本放在底部，则不再需要doc.ready（DOMContentLoaded事件）-在所有之前的DOM加载完之后，您的脚本将被执行。

由于最后的脚本可提高性能（脚本不会阻止HTML解析和CSS和图像的加载），因此建议将脚本放在底部而不是使用doc.ready。

— 内核
source