Velocity@Beijing分享

       O'Reilly Velocity China 2010 ，在北京举行了为期两天的大会，由 O'Reilly 和 Taobao 联合主办，本次大会的主题是 ”Fast by default( 与生俱来的快 )” ，关注 web 性能（更多为前端性能）和运维。

       自己有幸参加了首次在中国举行的 Velocity 大会，自我总结有以下几点：

1、  WPO web performance optimation

2、  运维（比如 taobao 如何管理 15,000 台服务器）

3、  Automate

 

一些数据

Data@Taobao

•    Alexa 排名 13

•    10 亿日 PV

•    15,000 服务器

•    带宽 318G/410G

 

Data@Facebook

•    +5 亿的活跃用户，超过一半每天访问

•    200 亿日 PV

 

Performance 带来的价值

 

WPO

•    Web Performance Optimization

–  Drives traffic

–  Improves UX

–  Increases revenue

–  Reduces costs

 

 

How to WPO

Measure	•    Yahoo! 　 Boomerang •    Stevesouders.org/episodes •    Jiffy •    WebPagetest.org •    ShowSlow.com
Profile	•    Firebug •    Fiddle •    HttpWatch •    Speed Tracer •    Web Inspector •    Dyna Trace
Research	•    Domain sharding •    Concatenation •    Sprites vs. MHTML •    WebP (A new image format for the Web) •    Prefetch •    SPDY, cwnd=10
Best practices	•    High performance Even faster web sites •    High performance JS •    Code.google.com/speed •    Developer.yahoo.com/performance •    Stevesouders.com/blog •    Perfplanet.com
Evangelize （传道）	•    Velocity conference •    Workshops •    University •    Case studies •    blogs
Lint	•    Page Speed from google •    YSlow
Automate	如何做到自动化的性能优化？参见下面

 

Facebook 的 3 个前端优化框架

•    Quickling ajaxifies the whole web site

•    PageCache cache user-visited page in browser

•    BigPipe pipelines website

 

Quickling
remove redundant work via ajax

 如上图，从首页跳转到图片 detail 页面，红框标示的部分，它们是不变化的，因此可以不用每次页面请求，都从服务器端生成这些内容，这也是 Quickling 的出发点（创新无处不在）

实现示意图：

 

PageCache

Cache visited pages in client side.

如下图，在用户访问 facebook 网站时，分析用户行为发现，一般情况下，用户会多次访问首页，因此可以 cache 第一次访问，后面的请求都从本地 cache 取数据即可。

PageCache 的实现有几个难点：

•     实时更新

•     Cache 一致性

      至于作者如何解决的，还是详细看他的 ppt 吧（ http://velocity.oreilly.com.cn/ppts/ChanghaoJiang.pdf ）。

 

BigPipe

Pipeline website

 如上图，为一般情况下，一个页面从服务器生成，到网络传输，最后到客户端渲染的过程。可见它是一个串行的过程。

Facebook 的工程师，经过分析，发现一个页面（如下图），可以分成许多 Pagelets ，它们间相互影响不大，可以拆开来分别加载。

 

BigPipe 后，页面加载的方式变为如下方式，这样可以有效改进用户感知的页面加载时间。

更多，也请查看作者的 ppt （ http://velocity.oreilly.com.cn/ppts/ChanghaoJiang.pdf ）

 

一些个人总结

•    性能提升可以带来流量、带来收入

•    前端性能优化很重要

•    有专门的团队、专门的人在做

•    人是最不可靠的，靠系统，靠自动化

•    持续的做，不是三天打渔，两天晒网

 

 

资源连接

Boomerang （ Boomerang is a piece of JavaScript that you add to the bottom of your Web pages, where it measures page-load time, among other things, and beacons the results back to your server ） ：

http://developer.yahoo.com/blogs/ydn/posts/2010/06/performance_testing_with_boomerang/

Jiffy: http://code.google.com/p/jiffy-web/

SPDY ： http://www.guao.hk/tag/spdy

Page Speed: http://code.google.com/speed/page-speed/

WebP: http://code.google.com/speed/webp/

Speed Tracer: http://code.google.com/webtoolkit/speedtracer/

Web Inspector: http://trac.webkit.org/wiki/WebInspector

Dyna Trace: http://www.dynatrace.com

Velocity china pdf: http://velocity.oreilly.com.cn/index.php?func=slidesvideos

评论

7 楼 cqwww 2010-12-16  

ericslegend 写道

SeanHe 写道

whaosoft 写道

倒是感觉 freemarker比这个好点是的...不知道大家什么感觉

此Velocity非彼Velocity -_-!

God!这都会和freemarker扯上关系

。。。。。。。。我理解有误，看来 -_-!

6 楼 lijingyao8206 2010-12-15  

感觉不错，虽然不能去会场但是还是看了些视频和pdf。速度确实是硬道理，尤其是应用的规模达到一定程度，数据存储，并发请求都上升到一定的数量级的时候。国内外的大网站大公司应该多交流，共赢和分享。这方面觉得国内做得不够，不过也在不断尝试和创新。希望TX这种大公司好好思考，开放……

5 楼 xiaoyu 2010-12-15  

这次北京，还是老外的公司共享的比较多， O'Reilly 和 Facebook ， 国内的那些，不说了。。。。。

4 楼 csd_ali 2010-12-15  

O'Reilly 一直致力于帮助大家构建更出色的互联网。由 O'Reilly 和淘宝网合办的 O'Reilly Velocity China 2010 即是出于这样目标的会议，今年的主题是“与生俱来地快”。

网络公司无论规模大小都面对着同样的挑战──页面必须快，基础架构必须伸缩自如，网站和服务必须稳定可靠，还不能让团队手忙脚乱。O'Reilly Velocity 就是寻找答案最好的地方。在这里你可以向同行学习，和专家交换想法，分享和获得有关 Web 性能和运维的最佳实践和经验教训。

本次 Velocity 中国大会精英云集，会议 Steve Souders 和章文嵩博士邀请国内外著名公司的技术专家，分享性能与运维前沿技术的最佳实践，包括 Google、Yahoo!、Facebook、Youtube，同时国内互联网企业阵容也空前强大，除淘宝网外还包括阿里云、百度、腾讯、盛大、新浪、网易、凤凰网等诸多名企的技术专家确认出席。
构建更快速的 Web 应用

Velocity 会议向您提供优化 Web 页面的最佳实践，内容涉及网站前后端方方面面。即使您的网站已经优化，也同样会受益于此次会议，将使你的应用带来更出色的用户体验乃至改善你的公司的经营状况。

http://velocity.oreilly.com.cn

3 楼 ericslegend 2010-12-15  

SeanHe 写道

whaosoft 写道

倒是感觉 freemarker比这个好点是的...不知道大家什么感觉

此Velocity非彼Velocity -_-!

God!这都会和freemarker扯上关系

2 楼 SeanHe 2010-12-15  

whaosoft 写道

倒是感觉 freemarker比这个好点是的...不知道大家什么感觉

此Velocity非彼Velocity -_-!

1 楼 whaosoft 2010-12-15  

倒是感觉 freemarker比这个好点是的...不知道大家什么感觉