根据你的样本，
<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>
大致执行流程如下：
- HTML 文档被下载
- HTML 文档的解析开始
- HTML解析到达
<script src="jquery.js" ...
jquery.js 被下载并解析- HTML解析到达
<script src="abc.js" ...
abc.js 被下载、解析并运行- HTML解析到达
<link href="abc.css" ...
abc.css 被下载并解析- HTML解析到达
<style>...</style>
- 内部 CSS 规则被解析和定义
- HTML解析到达
<script>...</script>
- 内部 Javascript 被解析并运行
- HTML解析到达
<img src="abc.jpg" ...
abc.jpg 已下载并显示- HTML解析到达
<script src="kkk.js" ...
kkk.js 被下载、解析并运行- HTML 文档解析结束
请注意，由于浏览器的行为，下载可能是异步和非阻塞的。例如，在 Firefox 中有此设置限制每个域的同时请求数。
同样取决于组件是否已经被缓存，在近期的请求中可能不会再次请求该组件。如果组件已被缓存，则组件将从缓存中加载，而不是从实际的 URL 中加载。
当解析结束并且文档准备好并加载时，将onload触发事件。因此，当onload被解雇时，$("#img").attr("src","kkk.png");运行。所以：
- 文档已准备就绪，已触发 onload。
- Javascript 执行命中
$("#img").attr("src", "kkk.png");
kkk.png 下载并加载到 #img
该$(document).ready()事件实际上是在所有页面组件加载并准备就绪时触发的事件。阅读更多相关信息：http : //docs.jquery.com/Tutorials : Introducing_$(document).ready()
编辑 - 这部分详细阐述了平行或非平行部分：
默认情况下，根据我目前的理解，浏览器通常以 3 种方式运行每个页面：HTML 解析器、Javascript/DOM 和 CSS。
HTML 解析器负责解析和解释标记语言，因此必须能够调用其他 2 个组件。
例如，当解析器遇到这一行时：
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
解析器将进行 3 次调用，两次调用 Javascript，一次调用 CSS。首先，解析器将创建此元素并将其与与此元素相关的所有属性一起注册到 DOM 命名空间中。其次，解析器将调用将 onclick 事件绑定到这个特定元素。最后，它会再次调用 CSS 线程以将 CSS 样式应用于此特定元素。
执行是自顶向下和单线程的。Javascript 可能看起来是多线程的，但事实上 Javascript 是单线程的。这就是为什么在加载外部 javascript 文件时，主 HTML 页面的解析被暂停的原因。
然而，CSS 文件可以同时下载，因为 CSS 规则总是被应用——也就是说元素总是用定义的最新 CSS 规则重新绘制——从而使其畅通无阻。
元素只有在解析后才能在 DOM 中使用。因此，在处理特定元素时，脚本始终放置在窗口 onload 事件之后或之内。
像这样的脚本会导致错误（在 jQuery 上）：
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>
因为在解析脚本时，#mydiv元素仍未定义。相反，这会起作用：
<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
alert($("#mydiv").html());
/* ]]> */</script>
或者
<script type="text/javascript">/* <![CDATA[ */
$(window).ready(function(){
alert($("#mydiv").html());
});
/* ]]> */</script>
<div id="mydiv">Hello World</div>
