我可以在整个页面加载之前运行JavaScript吗？

我想在整个页面加载之前运行一下javascript。这可能吗？或者代码是否开始在</html>上执行？我可以在整个页面加载之前运行JavaScript吗？

2010-05-27 picknick

[页面加载前如何执行Javascript函数？]（http://stackoverflow.com/questions/885909/how-can-i-execute-javascript-function-before-page-load） – miku 2010-05-27 10:08:38

我不认为这是重复的 - 更多的是服务器 - 客户端通信问题。 – scunliffe 2010-05-27 10:31:45

135

不仅可以你，但你必须做出特别的努力不，如果你不想。 :-)

当浏览器解析HTML时遇到script标记时，它会停止解析并切换到运行脚本的Javascript解释器。只有脚本完成后，浏览器才会恢复解析页面（因为脚本可能会执行document.write调用来输出解析器应该处理的标记）。这是默认行为;有script标签属性可以防止这种情况（defer and async）。

所以，可以这样考虑：

<!DOCTYPE HTML> 
<html><head><!-- yada yada yada --></head> 
<body> 
<p>Line 1</p> 
<script type='text/javascript'> 
    alert("Stop that parsing!"); 
</script> 
<p>Line two</p> 
</body> 
</html>

如果加载的页面，你会看到“1号线”款，而该警报显示，它完成后出现的“2号线”的段落。

与DOM进行交互有点棘手，因为DOM是由解析器构建的，因为它正在做它的事情，而且您的脚本可能在DOM完全准备好被操纵之前运行。一般来说，如果您只访问文件中script标记之前的元素，那么您很好，但为了安全起见，最好在DOM完全构建之前暂停所有DOM交互。

但大多数情况下，您可以愉快地访问早期的元素。试想一下：

<!DOCTYPE HTML> 
<html><head><!-- yada yada yada --></head> 
<body> 
<p id='p1'>Line 1</p> 
<script type='text/javascript'> 
    document.write("<p>p1 is null? " + (document.getElementById('p1') == null ? "yes" : "no") + "</p>"); 
    document.write("<p>p2 is null? " + (document.getElementById('p2') == null ? "yes" : "no") + "</p>"); 
</script> 
<p id='p2'>Line two</p> 
</body> 
</html>

您所看到的输出是：

Line 1 
p1 is null? false 
p2 is null? true 
Line 2

...因为p1存在的脚本运行时，但p2没有。

~~我没有得心应手的链接，但~~In this message，谷歌将关闭库的开发人员说，他们没有看到任何大的价值，“准备就绪”的风格事件原型，jQuery的，ExtJS的，道场，大多数人提供，因为如果你把脚本放在你想要与之交互的元素之后，你很好;这与YUI's recommendation一致，您只需在关闭</html>标记之前放置脚本（因为您必须将它们放在的某处，并且在那里它们不会阻止您的页面显示）。我个人认为，尽管我认为它们已被过度使用，但我确实在这些事件中看到了一些价值，但我的观点是很显然，您可以很早就开始与事物进行交互。

来源

2010-05-27 10:16:43

很好的答案。谢谢。 – picknick 2010-05-27 10:33:09

或者您可以使用事件委托并在页面加载之前设置您的处理程序以获得更响应的界面。这里有一篇很好的文章：[不要让jQuery的$（document）.ready（）减慢你的速度]（http://encosia.com/2010/08/18/dont-let-jquerys-document-ready -slow-you-down /） – Tgr 2010-09-16 19:02:49

在浏览器渲染p1之前，javascript可以用来替换一个值（例如，将“Line 1”更改为“hello world”）吗？我的意思是说，如果我替换p1的值，我不希望屏幕闪烁。我想在用户甚至可以看到p1（和p2以及其他元素）之前用p1替换p1的值/文本。那可能吗？ – n00b 2013-05-02 03:46:13

-4

我想如果您在加载整个页面之前尝试引用BODY中的控件，您会遇到错误。

来源

2010-05-27 10:10:26 Raj

您可以随时运行javascript代码。 AFAIK它在浏览器到达<脚本>标记的那一刻执行，但您无法访问尚未加载的元素。所以如果你需要访问元素，你应该等到DOM被加载（这并不意味着整个页面被加载，包括图像和东西。这只是文档的结构，因为它更早加载，因此通常不会注意到延迟），使用DOMContentLoaded事件或诸如jQuery中的$.ready等函数。

来源

2010-05-27 10:17:44 Marian

DOMContentLoaded事件将在DOM层次结构完全构建后立即触发，load事件将在所有图像和子对象都完成时触发，框架已完成加载。 – BeauCielBleu 2014-10-21 07:49:33

你是对的，我修好了。 Merci :) – Marian 2016-11-24 15:32:28

我可以在整个页面加载之前运行JavaScript吗？

回答

相关问题