你真的知道一个HTML及资源是如何load的吗(了解各个部分是何时下载和执行的)
原文地址：http://www.cnblogs.com/mindsbook/archive/2009/12/03/sequence_of_response.html
本博客所有内容采用 Creative Commons Licenses 许可使用. 引用本内容时，请保留 朱涛, 出处 ，并且 非商业 .
点击 订阅 来订阅本博客.(推荐使用 google reader, 如果你的浏览器不支持直接订阅,请直接在 google reader 中手动添加).
点击 下载pdf阅读 (如果浏览器不支持直接打开,请点击右键另存)
摘要
本文主要介绍浏览器请求一个URI后, 相应的html及其包含的外部资源(如js/css/image/flash)的下载顺序及其执行顺序.
在文中会有一个具体的例子来说明.
Contents
摘要
引入
具体分析
请求分析
对Firefox和chrome的请求分析
Firefox
chrome
有意思的一个插曲
结论
后记
参考资料
本文的源码
引入
完成了若干个基于WEB的项目, 也了解了从前端的js,css,html到后端python/php等, 二者如何交互, 最终浏览器如何执行, 这些在心里也已经很明确了. 不过一个问题一直萦绕在心中,那就是:
一个html有若干个外部资源(js,css,flash,image等),这些请求是何时下载的,又是何时执行的?
不清楚,不明白, 所以也就不知道我写的js究竟何时执行的, 也就不知道为什么很多高性能的建议是要将js置于一个 html底端的</body>之前.
如果你也不是很明确,请来和我一起学习吧.
具体分析
首先我们来看一个示例的html页面,如下:
<html>
<head>
<script src="/static/jquery.js" type="text/javascript"></script>
<script src="/static/abc.js" type="text/javascript">
</script>
<link rel="stylesheets" type="text/css" href="/static/abc.css"></link>
<script>
$(document).ready(function(){
$("#img").attr("src", "/static/kkk.png");
});
</script>
</head>
<body>
<div>
<img id="img" src="/static/abc.jpg" style="width:400px;height:300px;"/>
<script src="/static/kkk.js" type="text/javascript"></script>
</body>
</html>
它有如下几种资源:
3个外部js文件,1个inline js代码
1个�
