破而后立 -- 看Google如何超越网页性能优化

2010-11-12 19:31

破而后立 -- 看Google如何超越网页性能优化

by

at 2010-11-12 11:31:31

original http://limu.iteye.com/blog/809630

        还是网站性能优化的话题,大家都知道YSlow34条,前阵子我分享了在Yslow 34 Rules之后 -- 网站性能优化思路和进展,我将网站性能优化的思路分浏览器和HTTP两大块,简单画了画.主要说明我们做优化先要知道我们真正要的是什么?肯定不只是YSlow高分而已.



        接下来分享了Facebook的BigPipe技术分析,说明在Rules被默认遵守的情况下,如何求得更劲爆的优化结果?那就明确自己想要的,然后结合自己的站点精耕细作.如是才有"大水管子"这样几近神作的优化方案产生.

        今天忍不住说说Google.当然不是说PageSpeed这个"山寨更牛掰"的YSlow.说说当网页性能优化碰到Google这个睥睨天下的主儿会有怎样的火花.

        我们将网页性能优化分为浏览器和HTTP两部分.浏览器慢怎么办?HTTP慢怎么办?这两个问题Google的答案是:新做个浏览器!新制定一个网络通信协议!破而后立,真正的突破了固有的浏览器和HTTP范畴,可以实现的就太多了.

新浏览器Chrome:
        大家会觉得,破掉了意义有多大,chrome浏览器2年多了覆盖量又有多少?但从另一个角度看Chrome的出现最大程度的带动了JavaScript引擎的提速.现在如果不重写JS引擎,让JS运行速度接近或超过Chrome,好意思Release一个浏览器的新版本么?记忆犹新的是在v8发布之后,微软Sliverlight未来的竞争对手迅速从flash转向JavaScript.,这绝对是我这类Jser喜欢看到的消息.
        Chrome是一个如此活跃的浏览器,如今已经有了7的稳定版,8的测试版,9的开发版...依托这个平台Google可以不再依赖Gear这种给别人打补丁的模式,迅速的将其想法实现.比如HTML5,比如后面介绍的几项革新.

新协议SPDY
        SPDY(http://dev.chromium.org/spdy/),Google研发的新一代网络通信协议.Google宣称SPDY比HTTP快两倍.SPDY的核心是一个在网络间传输内容的应用层协议,其特点是即便在多重数据流传输时依然拥有极小的延迟,请求分优先级,可对HTTP报头做压缩。
        多重数据流:相当于协议原生支持的combo.很好的解决了链接过多的问题.同时也相当于原生的Streaming的支持,BigPipeComet都是基于Streaming.
        请求优先级:现在越来越多的页面靠大量的外联JS和异步Ajax支持.而当前XHR,JS和图片都是通过一样的HTTP载入,特别是XHR和JSONP异步的脚本加载请求常常会和图片请求并发,那么相互之间的必然存在浏览器资源竞争.在淘宝搜索结果页的最近一次优化的一个目标就是通过请求顺序的重排,一定程度缓解页面加载时图片请求对JSONP请求的严重影响.优化前问题在IE6下尤其明显,4k的JSONP请求,在HTTP的接收数据阶段竟然用了400ms.SPDY在协议级别优先级定义可以完美的解决这个问题.
        HTTP报头压缩:弥补了Gzip不能压缩HTTP头的遗憾.
        所以我们看到我们面向HTTP做的很多优化,SPDY都考虑到并提供了更好的解决方案.而SPDY是否能让信息在传输过程中被拦截,解析,过滤变得更难是另一个让人感兴趣的话题.

新的视频图像格式WebM,WebP
        WebM包括:VP8:高质量的视频编码,以BSD式的免费授权形式提供给所有人使用.Vorbis:开源并已经被广泛部署使用的音频编码.一个基于Matroska子集的视频容器.HTML5通过标签嵌套的方式让网页各种视频格式之间优雅降级,WebM的推广不成问题.
        WebP比JPEG多压缩40%容量的图片格式,与WebM同样开源.关于WebP的推广,我想甚至可以参照Gzip的模式,当浏览器accept-webp的时候,server端把webp发回去.在图片CDN源可以在第一次接到accept-webp请求时把jpeg转换为webp并缓存起来.

        如何做网页性能优化?Chrome,SPDY,WebM,WebP等等就是手握全球6.4%流量的巨头给出的答案.肯定还有很多我还不知道,但这些已足够激动人心..

          <br><br>
          <span style="color:red">
            <a href="http://limu.iteye.com/blog/809630#comments" style="color:red">已有 <strong>0</strong> 人发表留言,猛击-&gt;&gt;<strong>这里</strong>&lt;&lt;-参与讨论</a>
          </span>
          <br><br><br>

ITeye推荐