我可以在整个页面加载之前运行JavaScript吗？ [英] Can I run javascript before the whole page is loaded?
问题描述
我想在整个页面加载之前运行一些javascript。这可能吗？或者代码开始执行< / html> ？
<不仅可以你，但如果你不想，你必须特别努力而不是。 ： - ）
当浏览器在解析HTML时遇到脚本标签时，它会停止解析并切换到运行脚本的Javascript解释器。只有脚本完成时，浏览器才会继续解析页面（因为脚本可能会执行 document.write 调用来输出解析器应该处理的标记）。这是默认行为;有脚本标签属性可以防止这个（ defer 和 async ）。
所以考虑一下：
<！DOCTYPE HTML>
< html>< head><！ - yada yada yada - >< / head>
< body>
< p>第1行< / p>
< script type ='text / javascript'>
alert（停止解析！）;
< / script>
< p>第二行< / p>
< / body>
< / html>
如果您加载该页面，则会在显示警报时看到第1行 ，并在完成后出现第2行段。
由于DOM是由解析器构建的，因此在与DOM进行交互时有点棘手因为它正在做它的事情，并且您的脚本可能在DOM完全准备好被操纵之前运行。一般来说，如果您只访问文件中脚本标签之前的元素，那么您很好，但为了安全起见，最好放弃所有DOM交互，直到DOM完全构建。
但大部分情况下，您可以愉快地访问早期的元素。考虑：
<！DOCTYPE HTML>
< html>< head><！ - yada yada yada - >< / head>
< body>
< p id ='p1'>第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'>第二行< / p>
< / body>
< / html>
您看到的输出是：
第1行
p1是否为空？假
p2为空？ true
第2行
...因为 p1 存在于脚本运行时，但 p2 没有。
我没有链接， s> 在此消息中，Google的开发人员Closure库表示他们没有看到Prototype，jQuery，ExtJS，Dojo和其他大多数人提供的ready样式事件有什么大的价值，因为如果你把脚本放在你想要与之交互的元素之后，精细;这符合 YUI的建议，您只需在关闭< / html> 标记（因为您必须将它们放在某处，毕竟它们不会阻止您的页面显示）。现在，我个人认为在这些事件中有一些价值，尽管我认为它们已被过度使用，但我的观点是很显然你可以在很早的时候开始与事物进行交互。
I want to run a bit of javascript before the whole page has loaded. Is this possible? Or does the code start to execute on </html>?
Not only can you, but you have to make a special effort not to if you don't want to. :-)
When the browser encounters a script tag when parsing the HTML, it stops parsing and hands over to the Javascript interpreter, which runs the script. Only when the script is complete does the browser resume parsing the page (because the script might do document.write calls to output markup that the parser should handle). This is the default behavior; there are script tag attributes that can prevent this (defer and async).
So consider this:
<!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>
If you load that page, you'll see the "Line 1" paragraph while the alert is showing, and the the "Line 2" paragraph appears after it's done.
Where it gets a bit tricky is interacting with the DOM, since the DOM is built up by the parser as it's doing its thing and your script may run before the DOM is completely ready to be manipulated. In general, if you only access elements that precede the script tag in the file, you're fine, but to be safe it's best to put off any DOM interactions until the DOM is fully built.
But for the most part, you can happily access the earlier elements. Consider:
<!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>
The output you see is:
Line 1 p1 is null? false p2 is null? true Line 2
...because p1 exists as of when the script runs, but p2 doesn't.
I don't have a link handy, but In this message, the developers of the Google Closure library say that they don't see any big value to the "ready" style events that Prototype, jQuery, ExtJS, Dojo, and most others provide because if you put the script after the elements you want to interact with, you're fine; which falls in line with YUI's recommendation that you just put your scripts right before the closing </html> tag (since you have to put them somewhere, after all, and down there they don't hold up your page display). Now, personally, I do see some value in those events although I think they're over-used, but my point is that clearly you can start interacting with things very early on.
这篇关于我可以在整个页面加载之前运行JavaScript吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
