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

Question

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

Answer 1

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

当浏览器script在解析HTML时遇到标记时,它会停止解析并移交给运行脚本的Javascript解释器.在脚本执行完成之前,解析器不会继续(因为脚本可能会document.write调用解析器应该处理的输出标记).这是默认行为; 有一些script标记属性可以改变这种行为(defer和async)(因为它们会改变它,加载defer或async不能用于document.write将HTML输出到正在加载的页面的脚本).

所以考虑一下:

<p>Line 1</p>
<script>
    alert("Paragraphs: " + document.getElementsByTagName("p").length);
</script>
<p>Line 2</p>

如果加载该页面,警报将显示"Paragraphs:1",因为p在该点DOM中只存在一个元素(包含"Line 1"的元素).您可能会或可能不会在浏览器显示中看到第1行,具体取决于浏览器,因为即使元素位于DOM中,浏览器也可能没有时间进行渲染(因为alertUI线程会暂停屏幕).

有些浏览器......正在调整 ......的行为alert.例如,如果您在页面中包含该代码并在后台的新标签中将其打开,则最新版本的Chrome将允许该页面继续加载(并允许JavaScript代码继续运行),并在您去的时候显示警告到选项卡,即使这与当选项卡处于活动状态时遇到该警报时的行为非常不同.

无论它们是否已被渲染,您都可以愉快地访问早期元素,这就是我们在上面看到"Paragraphs:1"的原因.这是另一个例子:

<p id='p1'>Line 1</p>
<script>
    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 2</p>

你看到的输出是:

Line 1
p1 is null? no
p2 is null? yes
Line 2

...因为p1脚本运行时存在,但p2不存在.

我没有方便的链接,但 在这条消息中,Google Closure库的开发人员说,他们没有看到Prototype,jQuery,ExtJS,Dojo和其他大多数人的"准备"风格事件有任何重大价值.提供,因为如果你把脚本放在你想要与之交互的元素之后,你就没事了; 这符合YUI的建议,你只需将你的脚本放在结束</html>标签之前(因为你必须把它们放在某个地方,毕竟,在那里它们不会阻止你的页面显示).现在,就个人而言,我确实看到了这些事件的一些价值,虽然我认为它们已被过度使用,但我的观点是,显然你可以很早就开始与事物进行交互.

Answer 2

您可以随时运行JavaScript代码.AFAIK它在浏览器到达它所在的<script>标签时执行.但是你无法访问尚未加载的元素.

因此,如果你需要访问元素,你应该等到DOM被加载(这并不意味着整个页面被加载,包括图像和东西.它只是文档的结构,它加载得更早,所以你通常赢了注意延迟),使用jQuery中的DOMContentLoaded事件或函数$.ready.