随着网页内容的越来越丰富,网页的打开速度也越来越慢。拖慢速度的一个重要因素是Http请求太多,页面中普遍存在多个CSS文件和js文件要调用,还有需要请求很多图片和其他资源,即使按照优化http请求的宗旨去合并css文件和js文件,那也至少得有两个请求,图片采用sprite方法合并,不考虑sprite方式对内存的消耗(参考To Sprite Or Not To Sprite),页面也得多一个请求;至于内联的图片和其他资源,则无法进行请求数优化。就目前的淘宝网首页来说,虽做过优化,请求数还是多达80+(包含广告代码及一些异步调用请求),在YSlow的 Make fewer HTTP request 一项中只得到F的评价。貌似现在也没有什么更好的解决办法。

资源包(Resource Packages)
Mozilla 的 Alexander Limi 正在为解决多请求优化不懈努力,他提倡使用资源包将所有HTTP请求合并为一个(参考Making browsers faster: Resource Packages),并致力于将此方法推行到所有浏览器,做到完全兼容。

如何使用?
通过所有平台都支持的zip格式,将HTTP请求的所有文件压缩到一个zip文件中,浏览器可以经由代码中的link元素引用这个文件,有点像智能打包。link元素的格式如下:

<link rel="resource-package" type="application/zip" href="site-resources.zip">

其中的type属性在html5中不是必须的。
除了按照文件的实际路径打包文件之外,我们还要手动或通过配置脚本建立一份对应的文件路径表,并且命名为manifest.txt:

javascript/jquery.js
styles/reset.css
styles/grid.css
styles/main.css
images/save.png
images/info.png

以便浏览器能在资源包中找到相应文件,还要约定这个文件必须放在资源包的首位。

看起来不错,整合后的文件可以大大减少HTTP请求,不过我猜测相应的也会使得这个请求变的很大,我们得花上很长时间去等待这个响应而看不到页面上的任何东西,这对体验是很大的影响。不过谁知道呢,纯属我个人YY,既然他标榜“让浏览器更快”,也许这个资源包支持一边下载一边显示也说不定呢!

值得高兴的是Mozila 已经在Firefox 3.7 版本采用了这个方案,到时候是驴是马拉出来溜溜就一清二楚啦,期待吧~~

, , ,
Trackback

2 comments untill now

  1. 有用,转了

  2. Chrome英文如何设置10px字体大小,无论怎么设置都只能显示12px?
    IE, FireFox, Safari下都没问题,是不是Chrome不支持12px以下的字体,或者有什么其它hack办法?

    nunumick 于 2009-12-4 13:01:10 回复

    当前版本的chrome的确存在这个问题,因为是浏览器的设置,所以暂时也无法通过样式去把效果呈现给客户端用户,如果只是自己看效果的话,可以把chrome的语言切换成英文。据说chrome4会修复这个问题,期待吧……

    金冈 于 2009-12-4 13:56:45 回复

    我用的就是chrome 4.0.249.11版的啊

    nunumick 于 2009-12-4 14:18:54 回复

    那就杯具了,改浏览器语言吧

    金冈 于 2009-12-4 14:23:21 回复

    改了,依然无效。
    google.com是这样写的<font size="-2">***</font>

    我要写进CSS该如何写呢

    nunumick 于 2009-12-4 14:46:17 回复

    <font size="-2">这种也没用吧,应该还是要浏览器支持才行,我试过改了语言就可以,等同于CSS的font-size:10px; 语言设置:选项->高级选项->网络内容:更改字体和语言设置->语言->谷歌浏览器语言 改成英文,重启浏览器

    金冈 于 2009-12-4 14:51:15 回复

    嗯,改成英文,就有用了,唉,杯具

Add your comment now

Please wrap all source codes with [code][/code] tags.