网页的加载和执行顺序？

我已经完成了一些基于Web的项目，但是对于普通网页的加载和执行顺序，我考虑得并不多。但是现在我需要知道细节。很难从Google或SO找到答案，因此我创建了这个问题。

示例页面如下：

<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>

所以这是我的问题：

该页面如何加载？
加载的顺序是什么？
何时执行JS代码？（内联和外联）
CSS何时执行（应用）？
$（document）.ready什么时候执行？
会下载abc.jpg吗？还是只是下载kkk.png？

我有以下理解：

浏览器首先加载html（DOM）。
浏览器开始逐行从上到下加载外部资源。
如果<script>满足a，将阻止加载并等待，直到加载并执行JS文件，然后继续。
Other resources (CSS/images) are loaded in parallel and executed if needed (like CSS).

Or is it like this:

The browser parses the html (DOM) and gets the external resources in an array or stack-like structure. After the html is loaded, the browser starts to load the external resources in the structure in parallel and execute, until all resources are loaded. Then the DOM will be changed corresponding to the user's behaviors depending on the JS.

Can anyone give a detailed explanation about what happens when you've got the response of a html page? Does this vary in different browsers? Any reference about this question?

Thanks.

EDIT:

I did an experiment in Firefox with Firebug. And it shows as the following image: 替代文字