小编典典

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

javascript

我想在整个页面加载之前运行一些javascript。这可能吗?还是代码开始在上面执行</html>


阅读 272

收藏
2020-05-01

共1个答案

小编典典

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

当浏览器script在解析HTML时遇到标签时,它将停止解析并移交给运行脚本的Javascript解释器。在脚本执行完成之前,解析器不会继续(因为脚本可能会document.write调用解析器应处理的输出标记)。这是默认行为。有一些script标记属性可以更改该行为deferasync并且由于它们会更​​改行为,所以,加载了脚本deferasync不能用于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不存在。

2020-05-01