Question

我试图通过一个非常简单的JavaScript示例来学习JavaScript中的流程，但是三个浏览器（Chrome，IE和Firefox）都显示了不同的流模式和不同的最终结果。我知道有一些预期的跨浏览器问题，但这个问题非常简单。所以我试图理解如何解释JavaScript实际流动的方式。

以下是代码：

<!DOCTYPE html>
<html>
<head>
<title>Test 01</title>
    <script type="text/javascript">
    document.bgColor = "red"; 
    </script>

</head>

<body bgColor="yellow">

<p>Paragraph 1</p>
<script>alert("after para 1");</script>
<p>Paragraph 2</p>
<script>alert("after para 2");</script>
<p>Paragraph 3</p>
<script>alert("after para 3");</script>

</body>
</html>

我所看到的是，警报之后Chrome中会出现“第1段”文字，而其他两个警报也是如此。 IE和Firefox似乎在这里做正确的事情 - 在警报之前显示文本。

在IE和Firefox之间，IE以红色背景结束，Firefox以黄色结束。所以不确定究竟要解释什么..所有浏览器的行为都不同。

您如何了解这应该如何运作？

编辑：删除与此问题无关的var x = 10。问题是如何解释在相关文本之前警报显示的chromes行为 - 以及为什么bgcolor在一个案例中被覆盖而在其他情况下不被覆盖。

Answer 1

欢迎使用浏览器中的JavaScript世界。可以预期跨浏览器的不同行为，而不是例外。

虽然不推荐使用您的代码，但应该有所帮助。任何实际执行某些操作的JavaScript语句（如警报）应该只在关闭body标签之前发生。

当您不尊重并尝试在浏览器仍然呈现页面时运行代码时，会发生不好的事情。你可以在此之前获得任何数量的声明，只要它们在文档正文结束之前不被调用。

Answer 2

我试图用非常简单的方式学习JavaScript中的流程 JavaScript示例，但三个浏览器（Chrome，IE和Firefox）都是三个显示不同的流动模式和不同的最终结果。

你在谈论的是HTML engine in different browsers。所以这是关于处理HTML而不是处理javascript ...

您如何了解这应该如何运作？

这取决于......我喜欢创建单页javascript应用程序，它们在window.onload（或DOMContentLoaded）事件触发之前不会加载很多HTML。所以我从空身开始，用javascript完全构建页面。通过某些项目，您需要优雅降级，并从HTML实现一些基本功能开始，您可以添加javascript以实现更高级的功能。在这种情况下，如果您的代码想要对DOM执行任何操作，则需要等待前面提到的事件。否则，无法保证浏览器将呈现DOM元素和执行javascript命令的顺序。所以我同意Diogo Sperb，你已经开始了一个糟糕的做法。 OFC。你可以在加载DOM之前运行javascript代码，但那些不应该涉及DOM。例如，您可以对服务器执行XHR请求，或使用历史API覆盖URI等等。您甚至可以使用文档片段创建DOM元素，但不应渲染它们。据我所知，呈现DOM元素是同步的，因此在加载DOM后你不会遇到类似的问题。

就是说，现在没有人使用alert()，我们使用console.log()，这不会阻止页面加载。

注意：我不明白为什么人们会贬低你的问题。我认为这是一个很好的javascript初学者问题。我猜仇恨会讨厌。： - ）

基本的javascript流程 - 在各种浏览器中

2 个答案: