基本的JavaScript流程 - 在各种浏览器中 [英] Basic javascript flow - in various browsers
问题描述
以下是代码：
<！DOCTYPE html>
< html>
< head>
< title> Test 01< / title>
< script type =text / javascript>
document.bgColor =red;
< / script>
< / head>
< body bgColor =yellow>
< p>段落1< / p>
< script> alert（para 1之后）;< / script>
< p>段落2< / p>
< script> alert（para 2之后）;< / script>
< p>段落3< / p>
< script> alert（para 3之后）;< / script>
< / body>
< / html>
我所看到的是段落1文字在警报之后在Chrome中显示另外两个警报也是如此。 IE和Firefox似乎正在做这件事 - 在提醒之前显示文本。
而在IE和Firefox之间，IE以红色背景和Firefox结束与黄色。所以，不知道究竟该怎么解释..行为是不同的所有浏览器。
你怎么知道这是如何工作的？
编辑：删除与此问题无关的var x = 10。问题是如何解释在相关文本之前出现警报的色彩行为 - 以及为什么在一种情况下bgcolor被覆盖而不是在其他情况下。
我正在尝试使用一个非常简单的
JavaScript但是三个浏览器（Chrome，IE和Firefox）的所有
三个都显示不同的流程模式和不同的最终结果。
你在说的是不同浏览器中的 HTML引擎。所以这是关于处理HTML，而不是处理JavaScript ...
$ b
你怎么知道这是如何工作的？
这取决于...我喜欢创建单页JavaScript应用程序，它不会在window.onload（或DOMContentLoaded）事件触发。所以我从一个空的身体开始，并用JavaScript完全构建页面。通过一些项目你需要优雅的退化，你开始一个HTML实现一些基本的功能，你可以添加JavaScript来实现更多的高级功能。在这种情况下，如果你的代码想用DOM来做任何事情，你需要等待之前提到的事件。否则，不能保证浏览器将呈现DOM元素和执行JavaScript命令的顺序。所以我同意Diogo Sperb，你已经开始了一个不好的做法。 OFC。您可以在DOM加载之前运行JavaScript代码，但这些代码不应涉及DOM。你可以做例如XHR请求到服务器，或者使用历史API来覆盖URI，等等。你甚至可以通过使用文档片段来创建DOM元素，但是你不应该渲染它们。据我所知，渲染DOM元素是同步的，所以你不会有类似的问题，加载DOM后。
只要提到，没有人使用 alert（）现在我们使用 console.log（），它不会阻止加载页面。
$ b
注意：
我不明白人们为什么会低估你的问题。我认为这是一个很好的JavaScript初学者问题。我想哈特会讨厌： - ）
I am trying to learn the flow in JavaScript with a very simple JavaScript example but three browsers (Chrome, IE and Firefox) all three are showing different flow patterns and different end results. I know there are cross-browser issues that are to be expected, but this one is super simple. So I am trying to understand how to interpret how JavaScript actually flows.
Here is the code:
<!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>
What I am seeing is that the "Paragraph 1" text is showing up in Chrome after the alert and so on with the other two alerts also. IE and Firefox seem to be doing the right thing here - showing the text before the alert.
And between IE and Firefox, IE is ending up with a red background and Firefox with yellow. So not sure exactly what to interpret.. behavior is different for all the browsers.
How do you learn about how this is exactly supposed to work?
Edit: removing the var x=10 that is not relevant for this question. And the question is how do you interpret chromes behavior where the alert is showing up before the relevant text - as well as why the bgcolor is being overridden in one case whereas not in others.
I am trying to learn the flow in JavaScript with a very simple JavaScript example but three browsers (Chrome, IE and Firefox) all three are showing different flow patterns and different end results.
What you are talking about is the HTML engine in different browsers. So this is about processing HTML rather than processing javascript...
How do you learn about how this is exactly supposed to work?
That depends on... I like to create single page javascript applications, which don't load much HTML before the window.onload (or DOMContentLoaded) event fires. So I start with an empty body and build the page completely with javascript. By some of the project you need graceful degradation and you start with a HTML implementing some basic features and you can add javascript to implement more advanced features. By this scenario you need to wait the previously mentioned events if your code wants to do anything with DOM. Otherwise there is no guarantee about which order the browser will render DOM elements and execute javascript commands. So I agree with Diogo Sperb, you have started with a bad practice. Ofc. you can run javascript code before the DOM loads, but those should not involve the DOM. You can do for example XHR requests to the server, or use the history API to override the URI, etc... You can even create DOM elements by using document fragments, but you should not render them. As far as I know rendering DOM elements is sync, so you won't have similar problems after the DOM is loaded.
Just to mention, nobody uses alert() nowadays, we use console.log(), which does not block the page from loading.
Note: I don't understand why people are downvoting your question. I think it is a good javascript beginner question. I guess haters gonna hate. :-)
这篇关于基本的JavaScript流程 - 在各种浏览器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
