Question

我是Javascript的初学者，我正在阅读this。从我所知道的（以及那里所说的）页面应该级联渲染，但是当我在Chrome上运行时

＆＃13;

<html>
<body>
<h1>Counting rabbits</h1>
<script>
    for(var i=1; i<=3; i++) {
      alert("Rabbit "+i+" out of the hat!")
    }
  </script>
<h1>...Finished counting</h1>
</body>
</html>

＆＃13;

JS脚本在h1标记出现之前执行。那是为什么？

Answer 1

确实是一个很好的观察IFeel3 我试了这个，也很惊讶。

Firefox就像article提到的那样呈现它。 Chrome会将渲染部分保留到最后我进一步将你的代码修改为以下内容......

<html>
<body>
    <h1 id="1">Counting rabbits</h1>
    <script>
        alert(document.getElementById('1'));
        alert(document.getElementById('2'));
        for(var i=1; i<=3; i++) {
            alert("Rabbit "+i+" out of the hat!")
        }
  </script>
    <h1 id="2">...Finished counting</h1>
</body>
</html>

如果我们现在在浏览器中运行此功能，请注意DOM中存在h1元素id=1，而h1元素id=2元素{{1}在警告对话框中（正确的是，因为浏览器尚未解析第二个null元素）。

因此，chrome似乎正在解析文档并以正确的方式加载DOM中的元素。它似乎只是保持显示部分的结束。

文章还提到......将剧本移到BODY的末尾有一定的利弊

好，因为用户不必等待脚本错误，因为加载HTML后函数变为可用。用户有机会点击可能无效的按钮。通常添加隐藏功能的特殊代码直到脚本已加载解决问题。

我猜它是因为con（在 Bad 部分中提到的原因）chrome似乎在DOM中保存元素但是在整个页面加载完成之前不显示它们（这样用户就无法在加载javascript之前与页面进行交互。

这当然是我的解释，可能不是实际原因。但我很高兴知道别人的意见。

为什么在其他标签之间嵌入脚本会在它们之前执行？

1 个答案: