各浏览器加载资源的方式区别

这个总结来源于一次优化的请求,最初某个页面的加载十分缓慢,load事件迟迟无法触发,因此希望可以通过对静态文件分域名等方式对页面的外部资源进行优化,拿得load事件尽可能早地触发。于是我查看了页面的源码,并对外部资源进行了整理,基于下面2个理念画出了一个推测的瀑布图:

  • 浏览器对同一个域只能并发2个HTTP请求 - 网上盛传已久。
  • javascript文件的加载会阻塞浏览器其他资源的加载 - 同样网上盛传已久。

然而,当我看到各浏览器中实际的瀑布图时,我知道自己又犯了一个简单的错误:太过相信所谓的权威和大众的声音,而没有更早地进行实践来检验理论的正确性……

本篇文章就使用几种流行的浏览器,针对同一个页面的外部资源加载过程进行分析,推测各浏览器加载外部资源的策略、特征,并最后给予一定的比较和总结。

测试样例

测试的页面结构如下:

  • head:1.css + 1.js
  • body:1.jpg + 2.jpg + 2.js + 2.css + 3.jpg + 4.jpg + 3.css + 3.js + 5.jpg + 6.jpg

共12个外部资源,加上页面本身,一次完整的加载一共有13次HTTP GET请求。

针对每一个外部资源,服务器首先会休眠5秒的时间,随后再返回相应的内容,以方便查看整个外部资源的加载过程。

测试的浏览器如下:

  • IE6
  • IE8
  • Firefox3.6
  • Firefox4.0 beta12
  • Chrome 8
  • Opera 11

IE6

IE6的瀑布图非常传统,其特征有:

  • 各资源按照在HTML中出现的顺序进行加载。
  • javascript文件会阻塞其后所有资源的加载。
  • 最大并发HTTP连接数为2个。

可见网上盛传的2个"误区"都来自IE6统治浏览器市场的时代,针对IE6的优化太多太多,大家也就习惯性地将这些结论作为公理来使用了。

IE8

和IE6完全不同的瀑布图,其特点有:

  • 最大并发HTTP连接数为6个。
  • javascript文件已经不会阻塞其他资源的加载,甚至多个javascript文件可以一起加载,并且会保证执行的顺序。
  • 会分析HTML结构,优先下载script和link标签定义的外部资源。

Firefox3.6

和IE8的几乎完全一样:

  • 最大并发HTTP连接数为6个(可在about:config中修改)。
  • javascript文件不会阻塞其他资源的加载,多个javascript文件可以一起加载。
  • 会分析HTML结构,优先下载script和link标签定义的外部资源。

Firefox4 beta12

不知是因为设计理念上的不同,还是因为beta版未照顾到这一块,Firefox4反而退化了,和Firefox3.6的区别主要体现在对资源类型的处理上,Firefox4不再严格地优先下载script和link标签定义的外部资源,而是按照HTML结构中出现的顺序来进行加载。

Chrome8

Chrome自带的工具不能很清楚地表示各请求的开始时间,所以使用了Fiddler的瀑布图,从图上可以看出,Chrome也是比较特立独行的一位,其特点有:

  • 最大并发HTTP连接数为6。
  • head部分的资源会单独下载,且阻塞body中的其他资源的加载。
  • 会优先加载script和link标签定义的资源。

Opera11

先报怨一下,Dragonfly不怎么好用来着……Opera的资源加载也比较有特色,而且很难看出规律,只能大致总结一下:

  • Opera的最大并发HTTP连接数默认为16,可在opera:config - Performance - Max Connections Server查看和修改。雅加达娱乐城
  • javascript文件的加载会阻塞其他script和link标签定义的外部资源的加载,如图中的2.js。但不会阻塞图片等其他资源的加载,如图中的3.js。
  • 会一定程度上对资源的优先级进行优化,但由于javascript文件要阻止后续部分资源的加载,又为了充分利用最大HTTP连接数,因此不能严格先加载所有的script和link标签定义的资源,导致瀑布图上各类型资源有相互穿插,难寻规律。

总结

抛开IE6不论的话,除非是在线相册之类外部资源非常多的页面,不然没必要去追求静态资源的分域名优化。

针对IE6进行静态资源分域名优化时,要严格注意javascript文件对后续资源的阻塞,进行精确计算和设计后保证资源最完美地分域名存储,以提供最大并行度。

鉴于Chrome对head部分的资源会独立加载,当head部分用不满6个HTTP并发数时,是否可以将资源移到body中呢?在body中的资源又会引起其他的问题,需要谨慎考虑。

Opera的行为比较怪异,似乎主动设计了一个很麻烦的算法,不过考虑到其占有率,就先放在一边吧……而且号称最快的浏览器的Opera,在加载javascript文件时竟然如此笨拙……

Firefox4 beta12的行为让人无法理解,看来要追踪RC版是否还存在这个问题,如果存在的话可以考虑找Mozilla报个问题了。

对各浏览器加载外部资源的策略的掌握,是WPO的基本元素,虽然一直想当一个WPO的专家,却在这方面迟迟不愿实践,实在有愧于自己的理想……

时间: 2024-10-09 21:52:28

各浏览器加载资源的方式区别的相关文章

[转]预加载资源研究

原文: http://www.otakustay.com/prefetch-resource/ 什么是预加载 所谓预加载,就是通过一定的编程方法,使浏览器在空间的时候,在后台通过HTTP请求访问某些资源.当用户在一段时间后真正使用这些资源的时候,相比一个完整的(返回200)的请求,可以更快地获得这些资源(返回304或者直接命中浏览器缓存). 预加载在部分情况下有着十分重要的意义,特别是当确定某些资源用户在短时间内会使用,如分页列表的上一页和下一页.以及一些常用的LOGO之类的图片等. 预加载资源

Aery的UE4 C++游戏开发之旅(4)加载资源&创建对象

目录 资源的硬引用 硬指针 FObjectFinder<T> / FClassFinder<T> 资源的软引用 FSoftObjectPaths.FStringAssetReference TSoftObjectPtr<T> 同步加载资源 LoadObject/LoadClass TryLoad/LoadSynchronous 异步加载资源 FStreamableManager.RequestAsyncLoad() 卸载资源 创建对象 创建一般对象 创建Actor派生类

浏览器加载模式:window.onload和$(document).ready()的区别(详解)

jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: window.onload = function () {}; //JavaScript等待加载 $(document).ready(function () {}); //jQuery等待加载load和ready区别 window.onload $(document).ready() 执行时机 必须等待网页

[转] 静态资源的分布对网站加载速度的影响/浏览器对同一域名下并发加载资源数量

静态资源的分布对网站加载速度的影响 / 浏览器对同一域名下并发加载资源数量 / browsers network-http-persistent-max-connections-per-server 引文:浏览器在同一个域名下并发加载的资源数量是有限的,访问淘宝首页需要加载126个资源,那么如此小的并发连接数自然会加载很久,所以前端开发人员往往会将上述这些资源文件分布在多个域名下,变相的绕过浏览器的这个限制,同时也为下文的CDN工作做准备 [ 摘自:<淘宝技术这十年>P6-P7 ] 不同浏览器

浏览器~加载,解析,渲染

昨天为了 了解浏览器是怎么处理(.html..css..js)这些文件,我看了网上的好多资料,这好多资料中,有很多是通过转载.或是转载后加之自己的理解,但是因为自己对专业的词汇理解不好,还有一些作者将不同浏览器的处理过程混着说,总之,看完了,还是有很多疑虑的地方.我先根据昨天了解到的内容总结一下,日后随着学的深了,再回过来补充.2014.11.6 why 为什么要了解浏览器加载.解析.渲染这个过程? 了解浏览器如何进行加载,我们可以在引用外部样式文件,外部js时,将他们放到合适的位置,使浏览器以

【来自简书】浏览器~加载,解析,渲染

昨天为了 了解浏览器是怎么处理(.html..css..js)这些文件,我看了网上的好多资料,这好多资料中,有很多是通过转载.或是转载后加之自己的理解, 但是因为自己对专业的词汇理解不好,还有一些作者将不同浏览器的处理过程混着说,总之,看完了,还是有很多疑虑的地方. 我先根据昨天了解到的内容总结一下,日后随着学的深了,再回过来补充. why 为什么要了解浏览器加载.解析.渲染这个过程? 了解浏览器如何进行加载,我们可以在引用外部样式文件,外部js时,将他们放到合适的位置,使浏览器以最快的速度将文

浏览器加载时间线

浏览器加载时间线 创建document对象,添加节点对象(也就是开始搭建dom结构树),此时document.readyState = "loading" 遇到link外部css文件,创建新的线程加载,继续解析文档 遇到script引入外部js,并且如果没有设置async.defer,浏览器加载该js文件时会阻塞html的解析过程,一直等待js加载并执行完成 遇到script外部js,并且设置有async.defer,浏览器创建新线程加载,并且继续解析文档,对于async属性的脚本,脚

浏览器加载解析渲染网页原理

浏览器加载网页资源的原理 JS与CSS阻塞 重排与重绘 一.浏览器加载网页资源的原理 1.HTML支持的组要资源类型 在浏览器内核有一个管理资源的对象CachedResource类,在CachedResource类下有很多子类来分工不同的资源管理,这些资源管理子类分别是:  资源  资源管理类  HTML  MainResource ===> CachedRawResource  JavaScript  CachedScript  CSS  CachedCSStyleSheet  图片  Cac

浏览器加载、解析、渲染的过程

最近在学习性能优化,学习了雅虎军规 ,可是觉着有点云里雾里的,因为里面有些东西虽然自己也一直在使用,但是感觉不太明白所以然,比如减少DNS查询,css和js文件的顺序.所以就花了时间去了解浏览器的工作,有一篇经典的文章<how browsers work> ,讲的很详细,也有中文译本 .不过就是文章有点太长,也讲了一堆东西,还是自己总结一下. 为什么要了解浏览器加载.解析.渲染这个过程? 好,我们先说一下,为什么要了解这些呢?如果想写出一个最佳实践的页面,就要好好了解. 了解浏览器如何进行加载