我可以在加载整个页面之前运行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>

如果您加载该页面，则警报将显示“段落：1”，因为p此时DOM中仅存在一个元素（包含“第1行”的元素）。您可能会或可能不会在浏览器显示中看到第1行，这取决于浏览器，因为即使该元素位于DOM中，浏览器也可能还没有时间
渲染 它（因为这alert使UI线程暂停了）。

有些浏览器正在… 调整…的行为alert。例如，如果您在页面中包含该代码并在后台的新标签页中将其打开，则最新版本的Chrome浏览器将允许该页面继续加载（并允许JavaScript代码继续运行），并在您进入时显示警报标签，即使该标签处于活动状态时遇到该警报时的行为也大不相同。

无论是否已渲染它们，您都可以愉快地访问早期的元素，这就是为什么我们在上面看到“段落：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>

您看到的输出是：

1号线
p1为空？没有
p2为空？是
2号线

…因为p1脚本运行时就存在，但p2不存在。