According to your sample,
(根据您的样本，)
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="abc.js" type="text/javascript">
</script>
<link rel="stylesheets" type="text/css" href="abc.css"></link>
<style>h2{font-wight:bold;}</style>
<script>
$(document).ready(function(){
$("#img").attr("src", "kkk.png");
});
</script>
</head>
<body>
<img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
<script src="kkk.js" type="text/javascript"></script>
</body>
</html>
roughly the execution flow is about as follows:
(执行流程大致如下：)
- The HTML document gets downloaded
(HTML文档已下载)
- The parsing of the HTML document starts
(HTML文档的解析开始)
- HTML Parsing reaches
<script src="jquery.js" ...(HTML解析达到<script src="jquery.js" ...)
-
jquery.js is downloaded and parsed(jquery.js已下载并解析)
- HTML parsing reaches
<script src="abc.js" ...(HTML解析达到<script src="abc.js" ...)
-
abc.js is downloaded, parsed and run(abc.js已下载，解析并运行)
- HTML parsing reaches
<link href="abc.css" ...(HTML解析达到<link href="abc.css" ...)
-
abc.css is downloaded and parsed(下载并解析了abc.css)
- HTML parsing reaches
<style>...</style>(HTML解析达到<style>...</style>)
- Internal CSS rules are parsed and defined
(内部CSS规则被解析和定义)
- HTML parsing reaches
<script>...</script>(HTML解析达到<script>...</script>)
- Internal Javascript is parsed and run
(内部Javascript被解析并运行)
- HTML Parsing reaches
<img src="abc.jpg" ...(HTML解析达到<img src="abc.jpg" ...)
-
abc.jpg is downloaded and displayed(下载并显示abc.jpg)
- HTML Parsing reaches
<script src="kkk.js" ...(HTML解析达到<script src="kkk.js" ...)
-
kkk.js is downloaded, parsed and run(kkk.js已下载，解析并运行)
- Parsing of HTML document ends
(HTML文档解析结束)
Note that the download may be asynchronous and non-blocking due to behaviours of the browser.
(请注意，由于浏览器的行为，下载可能是异步的并且是非阻塞的。)
For example, in Firefox there is this setting which limits the number of simultaneous requests per domain.(例如，在Firefox中，此设置限制了每个域的同时请求数。)
Also depending on whether the component has already been cached or not, the component may not be requested again in a near-future request.
(同样取决于组件是否已经被缓存，在不久的将来请求中可能不会再次请求该组件。)
If the component has been cached, the component will be loaded from the cache instead of the actual URL.(如果组件已被缓存，则会从缓存而不是实际URL加载组件。)
When the parsing is ended and document is ready and loaded, the events onload is fired.
(解析结束并且文档准备就绪并加载后，将触发onload事件。)
Thus when onload is fired, the $("#img").attr("src","kkk.png");(因此，在触发onload时， $("#img").attr("src","kkk.png");)
is run.(运行。)
So:(所以：)
- Document is ready, onload is fired.
(文档准备就绪，触发了onload。)
- Javascript execution hits
$("#img").attr("src", "kkk.png");(JavaScript执行会命中$("#img").attr("src", "kkk.png");)
-
kkk.png is downloaded and loads into #img(kkk.png已下载并加载到#img)
The $(document).ready() event is actually the event fired when all page components are loaded and ready.
($(document).ready()事件实际上是所有页面组件均已加载并准备就绪时触发的事件。)
Read more about it: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()(进一步了解它： http : //docs.jquery.com/Tutorials : Introducing_$（document）.ready（）)
Edit - This portion elaborates more on the parallel or not part:(编辑-此部分在并行或非并行方面详细说明：)
By default, and from my current understanding, browser usually runs each page on 3 ways: HTML parser, Javascript/DOM, and CSS.
(默认情况下，根据我目前的理解，浏览器通常以3种方式运行每个页面：HTML解析器，Javascript / DOM和CSS。)
The HTML parser is responsible for parsing and interpreting the markup language and thus must be able to make calls to the other 2 components.
(HTML解析器负责解析和解释标记语言，因此必须能够调用其他2个组件。)
For example when the parser comes across this line:
(例如，当解析器遇到此行时：)
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
The parser will make 3 calls, two to Javascript and one to CSS.
(解析器将进行3次调用，其中两次调用Javascript，一次调用CSS。)
Firstly, the parser will create this element and register it in the DOM namespace, together with all the attributes related to this element.(首先，解析器将创建此元素并将其与所有与此元素相关的属性一起注册到DOM名称空间中。)
Secondly, the parser will call to bind the onclick event to this particular element.(其次，解析器将调用将onclick事件绑定到此特定元素。)
Lastly, it will make another call to the CSS thread to apply the CSS style to this particular element.(最后，它将再次调用CSS线程，以将CSS样式应用于此特定元素。)
The execution is top down and single threaded.
(执行是自上而下的，是单线程的。)
Javascript may look multi-threaded, but the fact is that Javascript is single threaded.(Javascript可能看起来是多线程的，但事实是Javascript是单线程的。)
This is why when loading external javascript file, the parsing of the main HTML page is suspended.(这就是为什么在加载外部javascript文件时，HTML主页面的分析被暂停的原因。)
However, the CSS files can be download simultaneously because CSS rules are always being applied - meaning to say elements are always repainted with the freshest CSS rules defined - thus making it unblocking.
(但是，可以同时下载CSS文件，因为始终会应用CSS规则-也就是说，始终使用定义的最新CSS规则来重新粉刷元素-从而使其畅通无阻。)
An element will only be available in the DOM after it has been parsed.
(元素只有在解析后才能在DOM中使用。)
Thus when working with a specific element, the script is always placed after, or within the window onload event.(因此，当使用特定元素时，脚本始终放置在窗口onload事件之后或之内。)
Script like this will cause error (on jQuery):
(这样的脚本将导致错误（在jQuery上）：)
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
Because when the script is parsed, #mydiv element is still not defined.
(因为在解析脚本时，仍未定义#mydiv元素。)
Instead this would work:(而是可以这样：)
<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
OR
(要么)
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
