HTML资源是怎么加载的

小编给大家分享一下HTML资源是怎么加载的，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

和龙ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

引入

完成了若干个基于WEB的项目, 也了解了从前端的js,css,html到后端python/php等, 二者如何交互, 最终浏览器如何执行, 这些在心里也已经很明确了. 不过一个问题一直萦绕在心中,那就是:

一个html有若干个外部资源(js,css,flash,image等),这些请求是何时下载的,又是何时执行的?

不清楚,不明白, 所以也就不知道我写的js究竟何时执行的, 也就不知道为什么很多高性能的建议是要将js置于一个 html底端的之前.

如果你也不是很明确,请来和我一起学习吧.

具体分析

首先我们来看一个示例的html页面,如下:

它有如下几种资源:

1. 3个外部js文件,1个inline js代码

2. 1个外部css文件, 1个inline css代码

3. 1个image文件,及1个js请求的image

总共是6个http request.

在分析之前,我们来看看firefox对这个html请求的结果, 如下图:

我们再看看chrome(linux)对这个html的请求结果,如下图(图比较小,可以在新标签中打开):

我们先分析下,然后再去说明这2种请求结果的不同.

请求分析

首先说明下面这些描述主要是基于自己google, 咨询朋友和在 SO 和 IRC 上获得, 我并没有阅读相关的spec(当然我很想阅读,如果知道相关spec的朋友请留言谢谢), 不能保证其正确性和准确性,风险自担 :D.

基于相关的调研, 我的理解为, 对于一个URI请求, 浏览器会按照下面的请求和执行顺序进行:

1. 一个线程对DOM进行下载(也就是html, 而不去管html中的外部资源)

2. 另外一个线程会开始分析已经下载的DOM, 并开始下载其中的外部资源(如js, css, image等)

3. 第三个线程(如果有的话)会去下载2正在下载的以外的外部资源

4. 如果允许更多的连接, 更多的线程会继续下载其它资源

一个请求可以同时有多少个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的应用等):

1. 只要浏览器"看到了"了js代码,它就会执行

2. 浏览器是从下到下,一行一行地执行

3. 如果js代码位于一个函数或者对象中,则只有当函数或者对象被调用时才会执行

4. 而所谓的direct code(不处于函数或者对象中的代码),则会从上到下顺序执行

5. 当css文件下载完成时, 相应的样式也会应用到DOM上

6. onload或者jquery的$(document).ready()是在DOM下载完成后执行

在实际的浏览器中, 一般遇到标签置于之前, 这样可以在大多数情况下都得到较好的性能.

对Firefox和chrome的请求分析

我们回过头来看下上面2个图中的请求响应图.

Firefox

有如下特征:

1. 首先下载html

2. html下载完成后, 从上到下依次下载外部文件(js, css,img)

3. js会block其它外部文件的下载

4. 其它文件会并行下载

chrome

有如下特征:

1. 首先下载html

2. 从上到下依次下载外部文件(js,css,img)

3. 各个资源的下载顺序是并行的

你可能会奇怪如果js可以并行下载,那么可能位于DOM下面的代码会先执行, 首先可以肯定的是 即使下面的js先完成下载,也不会影响到整体的从上到下的执行顺序,浏览器会维护这种顺序的关系, chrome的这种方式也是未来浏览器的一种趋势, 而这也是为什么chrome能够更快的原因之一.

以上是“HTML资源是怎么加载的”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！