【发布时间】：2010-12-20 04:59:02
【问题描述】：
我做过一些基于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>，会阻塞加载，等待JS文件加载并执行后再继续。 - 其他资源（CSS/图像）并行加载并在需要时执行（如 CSS）。
还是这样的：
浏览器解析 html (DOM) 并以数组或类似堆栈的结构获取外部资源。 html加载完成后，浏览器开始并行加载结构体中的外部资源并执行，直到所有资源都加载完毕。然后根据 JS 的不同，DOM 会根据用户的行为发生变化。
谁能详细解释一下当你得到一个 html 页面的响应时会发生什么？这在不同的浏览器中会有所不同吗？关于这个问题的任何参考？
谢谢。
编辑：
我用 Firebug 在 Firefox 中做了一个实验。它显示为下图：
【问题讨论】：
-
Steve Souders 在这个领域做了大量的工作。 Google for steve+souders+high+performance 看看。
-
我不是说性能调优。我想知道细节。
-
通过阅读他的作品，我对“它”如何详细工作的理解增加了十倍，因此它仍然是一个有效的评论。版权不允许我在这里引用他的整本书，所以我仍然建议你查一下他的作品。
-
对事情发生顺序的一个很好的描述是here
标签： javascript html css