it-swarm.cn

“将Javascript置于底层”是否会破坏document.ready的目的?

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

例如,如果我有一个下拉菜单,则在页面的其余部分都已加载之前,下拉列表将不会显示。我也尝试使用渐进增强功能进行开发,因此我可能会使用jQuery而不是CSS隐藏元素(因此非JS用户可以看到它们)。

或许是否有幸福的媒介?

26
DisgruntledGoat

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

将其置于底部的想法意味着如果您的JS遇到问题或者该人的连接速度较慢,则页面的其余部分仍会先加载,并且不会“挂起”。

无论是在开始还是结束时,JS仍会在所有内容都已加载时运行。

30
Callan

将javascript置于底部意味着其他页面内容(尤其是文本)在javascript之前加载,因此如果用户连接速度较慢,则不会等待JS加载。

这不会影响document.ready,因为当浏览器为页面准备DOM时会调用它。无论哪种方式,一切仍然需要先加载。

6
Macha

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

将脚本放在页面底部(</body>标签之前),以便尽快将HTML和CSS提供给用户。浏览器将能够更快地呈现页面,然后可以加载脚本,而不是留下空白页面供用户在等待脚本下载时盯着看。

当浏览器逐渐呈现页面时,如果它遇到脚本标记(即外部Javascript文件)一切都停止。脚本具有通行权 - 在下载脚本时,浏览器不会启动任何其他下载。即使在不同的主机名上,图像和样式表以及任何其他并行下载也将被阻止。

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

注意:对于Stylesheets,情况正好相反 - 页面底部附近的样式表阻止渐进式渲染,直到所有样式表都已下载并将它们移动到文档HEAD消除了这个问题。


为了在不让用户等待的情况下加载javascript有一个巧妙的技巧,你可以使用DOM createElement()方法创建一个<script/>元素,并在关闭之前将它添加到页面</body>标签:

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

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

3
Tom

是。如果你把脚本放在底部,则不再需要doc.readyDOMContentLoaded event) - 你的脚本将在所有前面的DOM加载之后执行。

由于最后的脚本提高了性能(HTML解析和加载CSS和图像不会被脚本阻止)我建议将脚本放在底部而不是使用doc.ready

1
Kornel