中国velocity web性能与运维大会 – part 1

这周二、周三是中国velocity web性能与运维大会,一位同事因故不能参加,于是我代替他参加了本次会议。

会议在西四环的世纪金源酒店,第一天早上是九点半开始第一个session,因为对路况预测不够,早上八点半才从甘家口出门,一路堵车很厉害,九点二十才到达会场。而此时门口排队check in的人还很多,把酒店楼梯都塞住了,场面比较混乱。不过幸好排了不到几分钟队后,一位会务MM说,因为会议快要开始了,大家可以现在先入场。

第一个session是steveWPO产业已经到来,其实就是一个开题演讲,因为大会所有的主题就是围绕着web性能来说的。

而接下来的三个session就是赞助者的广告时间罗,淘宝、基调网络、网宿轮番上台。

Facebook网站的Ajax化、缓存和流水线

上午最后一个session,是facebook蒋博士的“Facebook网站的Ajax化、缓存和流水线”。在主持人用英文介绍完他,他thank you以后,第一句话就是“其实我能说中文的”,把全场都逗笑了。整场也逗是用中文进行演讲,理解起来毫不费力。

他首先介绍了一个很重要的衡量网站用户体验的指标:TTI(time to interact),也就是页面主体部分加载完毕的时间。有了这个指标以后,他们可以将有限的资源优先分配到对用户体验有利的部分上。

Facebook网站的用户行为统计也是他们做性能优化的数据基础,他们的用户往往要一口气访问十几个甚至几十个页面,而且往往在3-5个页面以后会回到自己的个人主页。

接下来主要介绍了三个用来加速facebook的前端技术:quickling,pageCache,bigpipe

  • quickling技术是一个使用异步请求代替页面跳转的技术;
  • pageCache就是一个自动将页面缓存在客户端的技术,只有结合quickling的无刷新技术才能实现。
  • bigpipe是一个采用流水线串行处理技术,将所有页面非核心部分,通过ajax异步传输到客户端的技术。

quickling

quickling技术用异步请求代替页面跳转以后,服务端不用拼接整个页面,而是只传送页面中改变了的部分到浏览器,不但服务器压力减轻了,而且传输量也减少了。数据显示,使用了这个技术以后,加载时间降低了10-30%,生成时间降低了20-30%。

pagecache

pageCache技术会将页面缓存在客户端,做缓存往往要面对实时性和数据一致性的挑战。比如说,如果cache了某个页面,等用户回来的时候,这个页面上的内容已经被其他用户改变了,cache的页面就不是实时的了;或者用户在cache的页面上进行了一些操作,下次再访问这个页面的时候,如果再使用cache中的页面,数据就不一致了。

为了解决实时性,facebook增加了一个服务端的事件回调,如果发现本地页面和远程页面不一致,就刷新缓存;为了解决数据一致性,在客户端发生的任何操作都会被记录下来,下次返回到这个页面的时候回放操作。

bigpipe

bigpipe会对页面所有非核心部分进行异步流水线处理,这时候TTI就派上用场了,bigpipe处理的是与TTI无关的模块,这些模块可以异步加载,为了不加重服务器的负担,facebook没有采用并行加载,而是采用了流水线式的串行加载。同时,创造了一个编程模型,可以很方便的创建和添加一个模块到页面上。

上午这个最后的压轴还是很精彩的,会后还有很多人围着蒋博士请教一些细节问题。facebook的这些手段其实在我们的产品中也有零散的用到,但是完全没有这样成体系,有一套基础架构和前后端统一的框架来保证。

下午第一场是Douglas的“更好的使用javascript”,都是大家熟知的一些东西,如果你看过老道的书,就会发现这些东西在他的书里都有。

YouTube的前端性能改进:逐步增强与超越

第二场是Youtube Alex的“YouTube的前端性能改进:逐步增强与超越”,他主要介绍了四个东西:

  • 把js放在底部(确切的说是合理的位置)
  • 预加载video连接
  • 产品方面,采用了lightweight version来照顾一些网络情况不好的用户
  • UIX widget系统

比较有意思的是后面两点。

lightweight version

轻量版本这是一个从产品方面做出调整,来满足产品的性能要求的一个手段,youtube将原来160K的页面瘦身到18K,保证网络情况不好的用户能顺利加载。

而如何找到这些用户呢?两个手段:通过ip地理分布定位;通过客户端js代码判断加载速度定位。

UIX widget系统

这是一个UI组件框架,主要思想是:

  1. 基于行为
  2. 统一的事件处理,整个UIX widget只有一套事件,挂载在document上
  3. class matching,js通过class找到要渲染的DOM元素,将他们渲染成widget
  4. 随时注册,渲染组件。

这和百度内部的一套UI框架思想有些类似。不过如果进行统一的事件管理,一般来说,这样只适合页面上几乎没有第三方脚本代码的产品,我不知道Youtube是否已经解决了与第三方脚本兼容的问题,而会后Alex给我的答案是,Youtube中几乎没有第三方代码,他们可以放心的接管所有事件。

下午的第三个session是Yahoo的构建Yahoo下一代Mail,但是我的笔记本没有电了,跑到墙壁的角落去蹲着充电,很多要点听的不是很清楚。只是发现Yahoo mail也实现了一套前后端模板统一技术,和公司内部的一些想法不谋而合。

静态网页资源的管理和优化

下午最后一个session是facebook魏博士的“静态网页资源的管理和优化”,这个session介绍了一个全方位的静态资源管理系统,这个系统中他们会将产品中的所有静态资源进行智能化打包。

什么是“智能化打包”呢?开发产品的时候,我们往往要进行模块化开发,比如说个人主页上有很多个模块:搜索框,广告,推荐好友,提醒模块等等,这些模块有自己独立的js文件和CSS文件,在上线的时候我们要把这些文件打包到一起。这个系统能帮工程师自动打包这些静态资源。

看起来很简单,实际这个系统需要对很大规模的静态资源进行处理,按照魏博士的话说,所有的静态资源的组合超过400万种。静态资源有不同的大小,页面需要的模块也在不停的变化,打包算法要根据产品的变化而调整,现在facebook每周都会上线一个新的打包算法。他们的这个算法甚至支持把css里面的静态背景图片自动的打包成一个。

将来,他们还希望这个系统能自动预测用户的行为,分辨用户的浏览器,给每个用户一套量身定做的静态资源。让加载的速度更快。

由于篇幅和时间关系,第一天晚上和第二天的内容将在接下来的blog中发出,欢迎订阅我的blog。

如果你也参加了本次大会,或者你对上面的内容的细节有兴趣,欢迎在下面留下你的评论,或者follow我的twitter进行进一步交流。

4 条评论

  1. idmar 于 2010-12-10 @ 19:10:53

    问个无关的问题,sharej是你自己开发的平台么?

  2. berg 于 2010-12-10 @ 21:44:49

    [Comment ID #12894 Will Be Quoted Here]

    嗯,是的。中间有几位其他的同学也断续参与过。

    不过现在已经将近一年没有升级和维护了。

  3. mytuan 于 2010-12-11 @ 22:09:21

    也问个无关的问题,能否方便透露这个空间是哪里租的,世纪互联好像不对个人吧。谢谢

  4. berg 于 2010-12-11 @ 22:11:04

    [Comment ID #12903 Will Be Quoted Here]

    对个人的,你直接联系他们的销售就可以了

发表评论

火花来自思想的碰撞,请留下你宝贵的评论吧: