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

Basic javascript flow - in various browsers

本文关键字：浏览器 javascript      更新时间：2023-09-26

我正试图用一个非常简单的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>

我所看到的是"第1段"文本显示在Chrome浏览器后的警报等其他两个警报也。IE和Firefox似乎在做正确的事情——在警告之前显示文本。

在IE和Firefox之间，IE的背景是红色的，Firefox的背景是黄色的。所以不确定该怎么解释…所有浏览器的行为都是不同的。

你怎么知道这到底是怎么工作的?

编辑:删除与这个问题无关的var x=10。问题是如何解释在相关文本之前显示警报的chrome行为-以及为什么bgcolor在一种情况下被覆盖而在其他情况下没有被覆盖。

欢迎来到浏览器中的JavaScript世界。不同浏览器之间的行为是不同的，不例外。

知道你的代码所做的是不被推荐的应该会有所帮助。任何有实际作用的JavaScript语句(比如你的警报)应该只出现在body标签结束之前。

当你不尊重这一点，并试图在浏览器仍在渲染页面时运行代码时，糟糕的事情就会发生。但是，在此之前可以有任意数量的声明，只要在文档主体结束之前不调用它们。

我试图学习流在JavaScript与一个非常简单的JavaScript的例子，但三个浏览器(Chrome, IE和Firefox)都其中三种表现出不同的流动模式和不同的最终结果。

你说的是不同浏览器中的HTML引擎。所以这是关于处理HTML而不是处理javascript…

你怎么知道这到底是怎么工作的?

那取决于……我喜欢创建单页javascript应用程序，它在窗口之前不会加载太多HTML。onload(或DOMContentLoaded)事件触发。所以我从一个空的主体开始，完全用javascript构建页面。在一些项目中，你需要优雅地降级，你可以从HTML开始实现一些基本功能，然后添加javascript来实现更高级的功能。在这种情况下，如果代码想对DOM执行任何操作，则需要等待前面提到的事件。否则，无法保证浏览器呈现DOM元素和执行javascript命令的顺序。所以我同意Diogo Sperb的观点，你从一个糟糕的练习开始。离岸金融中心。您可以在DOM加载之前运行javascript代码，但这些代码不应该涉及DOM。例如，你可以向服务器发出XHR请求，或者使用历史API来覆盖URI，等等……您甚至可以通过使用文档片段创建DOM元素，但不应该呈现它们。据我所知，呈现DOM元素是同步的，所以你不会有类似的问题后，DOM加载。

只是提一下，现在没有人使用alert()，我们使用console.log()，它不会阻止页面加载。

注意:我不明白为什么人们不给你的问题投票。我认为这是一个很好的javascript初学者问题。我猜恨我的人会恨我的。: -)

相关文章：