你真的知道一个HTML及资源是如何load的吗(了解各个部分是何时下载和执行的)
你真的知道一个HTML及资源是如何load的吗(了解各个部分是何时下载和执行的)
2009-12-03 01:09 by Tower Joo, 3741 visits, 网摘, 收藏, 编辑
你真的知道一个HTML及资源是如何load的吗(了解各个部分是何时下载和执行的)
本博客所有内容采用 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个外部css文件, 1个inline css代码
- 1个image文件,及1个js请求的image
总共是6个http request.
在分析之前,我们来看看firefox对这个html请求的结果, 如下图:
我们再看看chrome(linux)对这个html的请求结果,如下图(图比较小,可以在新标签中打开):
我们先分析下,然后再去说明这2种请求结果的不同.
请求分析
首先说明下面这些描述主要是基于自己google, 咨询朋友和在 SO 和 IRC 上获得, 我并没有阅读相关的spec(当然我很想阅读,如果知道相关spec的朋友请留言谢谢), 不能保证其正确性和准确性,风险自担 :D.
基于相关的调研, 我的理解为, 对于一个URI请求, 浏览器会按照下面的请求和执行顺序进行:
- 一个线程对DOM进行下载(也就是html, 而不去管html中的外部资源)
- 另外一个线程会开始分析已经下载的DOM, 并开始下载其中的外部资源(如js, css, image等)
- 第三个线程(如果有的话)会去下载2正在下载的以外的外部资源
- 如果允许更多的连接, 更多的线程会继续下载其它资源
一个请求可以同时有多少个connection(线程), 取决于不同的浏览器, http1.1 标准中规定的是对于同一个server/proxy(也就是hostname) 不超过2个connection, 但是在实际的浏览器实现中, 具体如下:
Firefox 2: 2 Firefox 3: 6 Opera 9.26: 4 Opera 9.5 beta: 4 Safari 3.0.4 Mac/Windows: 4 IE 7: 2 IE 8: 6
所以请根据这个实际情况来思考上面的下载顺序.
然后我们看执行顺序(js的执行, css的应用等):
- 只要浏览器"看到了"了js代码,它就会执行
- 浏览器是从上到下,一行一行地执行
- 如果js代码位于一个函数或者对象中,则只有当函数或者对象被调用时才会执行
- 而所谓的direct code(不处于函数或者对象中的代码),则会从上到下顺序执行
- 当css文件下载完成时, 相应的样式也会应用到DOM上
- onload或者jquery的$(document).ready()是在DOM下载完成后执行
在实际的浏览器中, 一般遇到<script>标签会自动block住其它线程的下载, 如firefox, 这也是为什么 在web开发中常常推荐将<script>标签置于</body>之前的原因.
但是并非所有的浏览器都block, 如chrome并不会block住其它的connection. 所以具体的load还需要参考具体的浏览器实现.
建议, 将<script></script>标签置于</body>之前, 这样可以在大多数情况下都得到较好的性能.
对Firefox和chrome的请求分析
我们回过头来看下上面2个图中的请求响应图.
Firefox
有如下特征:
- 首先下载html
- html下载完成后, 从上到下依次下载外部文件(js, css,img)
- js会block其它外部文件的下载
- 其它文件会并行下载
chrome
有如下特征:
- 首先下载html
- 从上到下依次下载外部文件(js,css,img)
- 各个资源的下载顺序是并行的
你可能会奇怪如果js可以并行下载,那么可能位于DOM下面的代码会先执行, 首先可以肯定的是 即使下面的js先完成下载,也不会影响到整体的从上到下的执行顺序,浏览器会维护这种顺序的关系, chrome的这种方式也是未来浏览器的一种趋势, 而这也是为什么chrome能够更快的原因之一.
有意思的一个插曲
在提出这个问题后,我便多方入手, 向朋友咨询, 向 SO 提出问题, 甚至去Firefox的 IRC 进行了提问,
回答的朋友还都是很耐心的, 不过, 他们大多向我问了一个问题 做WEB开发, 你为什么要了解这些细节.
对于这样的问题,我还是比较纳闷的, 我一直认为 一个好的程序员,不仅需要知道how, 还要知道what, 甚至why,
知道how,只说明你是一个合格的码工,只会简单地使用别人提供的东西来开发.
知道what, 说明你开始去关注背后是如何实现的, 随着时间推进, 这时候你会逐渐成为一个有经验的程序员.
知道why, 说明你开始向hacker的路迈进了, 开始逐步走向了技术牛人的路线了,长此以往你会有很大的成长的. 参考 How To Become A Hacker.
让我们去享受细节,本质的快乐吧,而不是只停留在我会的层面那么表面的快乐.
结论
浏览器是各大厂商抢占的市场,无论是自主(Firefox, chrome, IE, Opera, Safari)或者基于一定的内核(遨游, 搜狗, TT, 360等), 但是可以肯定的是浏览器会更加强大, 遵守规范, 更快的响应等, 而我们WEB程序员的日子也会好过很多.
本文部分细节还是比较含糊, 后面可能还会在写一篇文章来进行更彻底,清晰的说明.
欢迎讨论.
后记
这次是不惜血本了, 之前积累了快400的 SO reputation score, 一下压出去了150个来寻找最满意的答案.
具体大家可以参考:
Load and execution sequence of a web page?
帖子中有较详细的回答,可以作为参考.
参考资料
- Load and execution sequence of a web page?
- JavaScript DOM load events, execution sequence, and $(document).ready()
- JavaScript Execution Order
- Newbie - when is the CSS applied?
本文的源码
本文的rst源码链接在 这里 .
点击 下载pdf阅读 (如果浏览器不支持直接打开,请点击右键另存)
转载于:https://www.cnblogs.com/China-Dragon/archive/2009/12/07/1618755.html
你真的知道一个HTML及资源是如何load的吗(了解各个部分是何时下载和执行的)相关推荐
- 穷学计算机富学金融家里有矿,穷学IT,富学金融?亲身体验告诉你IT真的是一个不用拼爹的行业...
原标题:穷学IT,富学金融?亲身体验告诉你IT真的是一个不用拼爹的行业 知乎上有一个问题"大学学什么专业最好?",里面有一个高赞回答: 相信很多人都注意到了"穷搞IT,富 ...
- 也许你真的需要一个扩展屏幕, 让你的工作效率成倍增加
本文是众多使用技巧中其中的一篇, 全部使用技巧点击链接查看, 或直接查看本专栏其他文章, 保证你收获满满 我主页中的思维导图中内容大多从我的笔记中整理而来,相应技巧可在笔记中查找原题, 有兴趣的可以去 ...
- 微软官网真的是一个神奇的地方,高清壁纸,直接下载
目标网址:https://wallpapers.microsoft.design/ 微软官网真的是一个神奇的地方,今天浏览发现里面竟然还藏着一个超清高质量壁纸板块,实在是太喜欢里面的壁纸风格,虽然不是 ...
- C++核心准则讨论:如果一个类是资源句柄,则它需要一个构造函数,一个析构函数以及复制和/或移动操作
Discussion: If a class is a resource handle, it needs a constructor, a destructor, and copy and/or m ...
- 一个神奇的资源网站「有趣网站收藏家」共有186个站点资源-北忘山修改版
一个神奇的资源网站「有趣网站收藏家」共有186个站点资源-北忘山修改版 网站介绍 这个网站有点东西,目前收集了186个资源,小北当时拔下来之后发现都是作者纯html手写的,意思就是每每添加网站都是手动 ...
- 如何快速搭建一个 linux 全方位资源监控系统并带有炫酷的表盘图形统计?
如何快速搭建一个 linux 全方位资源监控系统并带有炫酷的表盘图形统计? 使用prometheus.grafana或者zabbix 这些监控软件,也是非常不错的一个选择,但是还有更简单.更小巧的统计 ...
- 你真的需要一个(专门的)向量数据库么
随着 LLM 的火爆,向量数据库也成为了一个热门的话题.只需要一些简单的 Python 代码,向量数据库就可以为你的 LLM 插上一个廉价但极有效的"外接大脑".但是,我们真的需要 ...
- inno setup 另一个程序正在使用此文件_STEP 7-MicroWIN SMART程序的上传与下载方式
S7-200 SMART的编程软件叫做STEP 7-MicroWIN SMART,能够实现对S7-200SMART系列PLC的编程与监视工作. STEP 7-MicroWIN SMART官方的版本已经 ...
- Cocos2dx游戏开发系列笔记7:一个简单的跑酷游戏《萝莉快跑》的消化(附下载)
懒骨头(http://blog.csdn.net/iamlazybone QQ124774397 青岛 ) 或许有天 我们羡慕和崇拜的人 因为我们的努力 也会来了解我们 说不定 还会成为好友 骨头喜 ...
最新文章
- 实践操作:六步教你如何用开源框架Tensorflow对象检测API构建一个玩具检测器
- my friends
- AS整理代码快捷键 ctl+alt+L
- 一道微软面试题的运算过程解析
- Java开发经典面试题分享,建议收藏
- 北大CIO走进龙泉寺交流研讨会圆满举行
- python tkinter grid布局
- 2022电工杯A题利用启发式算法寻优
- html5怎么把图片置顶,html/css如何让图片上下居中(居中垂直)?
- 2021-11-04
- google chrome 同步书签 查看gmail邮箱 谷歌浏览器同步助手
- MATLAB串口操作
- 由滤波器系数绘制尺度函数和小波函数图像的Matlab程序
- 常用离散、连续分布及期望、方差总结
- [附源码]SSM计算机毕业设计中青年健康管理监测系统JAVA
- MOOS-ivp 使用qt创建一个moosapp
- 永信至诚打造企业安全人才提升方案 补齐企业安全短板
- UE4学习笔记:混合空间(BlendSpace)的使用
- Docker原理之架构篇 --- 总体架构
- 程序数据的集散地:数据库
热门文章
- java api使用ElastichSearch指南
- vue+elementUI开发实践问题总结
- Hibernate学习系列————注解一对多单向实例
- linux -- read(), write()
- 1-3-顺时针旋转矩阵
- linux命令行抓取网页快照-(xvfb+CutyCapt)
- Tomcat配置和Web应用程序开发
- ASP.NET 2.0新特性视频教程下载
- Android应用开发—如何解决handler的警告:Handler Class Should be Static or Leaks Occur
- Django二次开发对接FastDFS