Question

这是我无法理解的问题。看看这个JS代码：

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

 ＆lt;！DOCTYPE HTML＆gt;＆＃xD;＆＃xA;＆lt; html＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; head＆gt;＆＃xD;＆＃xA; ＆lt; meta charset =“utf-8”＆gt;＆＃xD;＆＃xA;＆lt; / head＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; body＆gt;＆＃xD;＆ #xA; ＆lt; p＆gt;开头......＆lt; / p＆gt;＆＃xD;＆＃xA; ＆LT;脚本＆GT;＆＃的xD;＆＃XA;警报（'你好，Wolrd！'）;＆＃xD;＆＃xA; ＆LT; /脚本＆GT;＆＃的xD;＆＃XA; ＆lt; p＆gt; ...结束文档＆lt; / p＆gt;＆＃xD;＆＃xA;＆lt; / body＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; / html＆gt; < /代码>

＆＃的xD;＆＃XA;

＆＃的xD;＆＃XA; 
＆＃XA;＆＃XA ; 所以问题是我不明白为什么在＆lt; script＆gt; 标记之前没有加载/可见 The Beginning 段落。在几乎所有的教程中，它解释了浏览器在满足脚本之前加载所有HTML，然后当脚本满足时，浏览器开始在脚本的编译模式下工作，然后当脚本结束时，浏览器以HTML模式返回。 
＆＃xA;＆＃xA; 但实际上它的行为似乎不同，因为  文本仅在脚本警告后出现：< / p>＆＃xA;＆＃xA; 
    
＆＃xA;＆＃xA; 可以请某人解释为什么会发生这种情况？ 
＆＃xA;＆＃xA; 
＆＃xA;＆＃xA;  PS：只有Firefox的行为与教程中描述的相同。＆＃xA;

Answer 1

创建脚本之前的元素并将其添加到DOM中，但浏览器还没有机会渲染它们（更新页面显示以显示它们） alert使整个UI线程陷入戛然而止。浏览器需要创建元素并将它们添加到DOM中; 有些人会，有些人不会。两者都不错。＆＃34;

我们可以通过查找它甚至阅读其文本来证明第一段存在：

＆＃13;

<p>The Beginning...</p>
<script>
  alert("Hello, World! First paragraph's text: " + document.querySelector("p").textContent);
</script>
<p>...The End Of Doc</p>

＆＃13;

Answer 2

它必须像教程所说的那样;所以我认为根据以下情况，它是浏览器的弱点：

我们将this CodePen（您在评论中链接）与以下代码：

<p id="one">
    The Beginning...</p>
<script>
    alert(document.getElementById('one').innerHTML);
</script>
<p id="two">...The End Of Doc</p>

情景1：

按照链接等待代码加载。正如您所说，警报弹出，但The Beginning和The End未显示。关闭警报后，文本可见。

场景2（目前仅在Chrome中发生.Safari的行为类似于场景1 ）：

在新标签页中打开链接，而不关注该链接（您可以使用Ctrl + Right Click或Mouse Wheel Click ）。等待大约10秒钟（你会在CodePen的favIcon中看到一个小蓝点）。现在打开CodePen选项卡和BOOM！您会看到alert和The Beginning / The End文字。

这让我认为Chrome无法正常运行。

Answer 3

因为JavaScript在DOM完成解析之前就执行了（这就是＆＃39;问题＆＃39;准备解决了）。您可以包含一个事件监听器来检查您的DOM是否已准备就绪

<script>
var callback = function() {
    alert( 'Hello, Wolrd!' );
};

if(document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
    callback();
} else {
    document.addEventListener("DOMContentLoaded", callback);
}
</script>

但您可以做的最简单的事情是将<script>标记移至</body>之前的结尾。

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>

  <p>The Beginning...</p>


  <p>...The End Of Doc</p>

  <script>
    alert( 'Hello, Wolrd!' );
  </script>
</body>

</html>

浏览器对<body>

3 个答案: