Velocity 2011会议分享

感谢公司和部门的支持，6月12号我和其它同事一起前往美国参加了Velocity 2011的会议，在此期间学习到了很多性能优化方面的经验和方法，通过本文整理出来分享给大家。

启程

我们乘坐12号下午4点的国航飞机出发，经过11小时到达了旧金山国际机场，由于时差的关系，到了旧金山后的当地时间是12号中午12点，感觉像穿越了。

下飞机后我们租了2辆车，在美国租车是最经济方便的交通工具，因为地广人稀，除了大城市其它地方都很少见到公交和出租车，导航仪很精确，很顺利就从机场开到了宾馆。

参观Facebook总部

13号我们参观了公司在Cupertino的办公室，然后在HR的带领下驱车前往Facebook总部进行参观，Facebook内部不大，只有2层办公室，里面的场景和电影social network中见到的一样，不像想象中的吵，但也不安静，很多人都戴着耳麦，由于签署了保密协议不能拍照片，感兴趣的同学可以观看Facebook官方的MTV Diary of Facebook，幸运的是我们在办公室里还见到了Mark。

然后我们在一个会议室里和2位Facebook工程师简单进行了交流，对Facebook最大的感受就是其内部的小巧和高效，像一个小公司一样在运作，每个工程师都可以自由修改任何Facebook的代码（当然，会有code review和自动化测试才能上线），Facebook有健全的小流量测试机制来不断改进产品，任何人都能提需求，然后通过对比测试来决定某个功能是否大规模部署，他们没有专门的QA，而是由工程师自己来保证质量。

保持小巧是Facebook高效率运作的一个重要原因，目前Facebook的工程师只有500人左右，而且他们不想增长太快。在这次Velocity大会上Jonathan的演讲也提到了Facebook的内部的工程师文化：small and hungry，在对php进行优化时他们最终选择hiphop这个高风险但高收益的方案，感觉很少有大公司会这么激进。

之前网上有篇文章How Facebook Ships Code谈到了Facebook内部运作的很多细节，感兴趣的同学可以阅读，与传统的企业相比确实有很多值得借鉴的地方。

6月14号的workshop

由于每个分会场的人都太多了（超过400），第一天的workshop基本上相当于演讲，之前还以为主要是动手实验。

接下来我会列举出每个session相关的信息，大家可以点击session标题浏览详细的信息，其中大部分session都有slide可以下载，有些还有视频（youtube），而对于还没有视频的session请耐心等待一段时间。

Performance Tools

这个session主要介绍了4个性能优化相关的工具：WebPagetest、Mobitest、ShowSlow、dynatrace。

首先介绍的是WebPagetest，这是google员工Patrick Meenan全职开发的性能监测工具，它可以通过截图来直观地看到页面加载的过程，并能进行视频对比，方便演示性能优化结果，WebPagetest是目前功能最全面的开源监测工具，还可以部署到本地机器，方便进行内部的性能测试。

Mobitest是专门用来测试iOS和android页面性能的在线服务，可以在线免费使用，但由于移动设备的局限性（性能、相关工具），能监测到的信息要比桌面上的少。它的实现原理是在这些移动设备上运行一个自己开发的app，监听服务器的指令然后调用内嵌的webkit来监测页面性能。

ShowSlow是一个聚合YSlow、Page Speed、dynaTrace测试结果的平台，方便浏览，并能查看历史数据，它的实现方法是通过收集beacons结果。

dynatrace AJAX就不用多介绍了，它目前最强大的页面性能监测工具，可以详细列出页面渲染中详细的信息，甚至是每个函数的执行时间。

Analyzing the Performance of Mobile Web

Ariya的这个演讲是这次会议最好的演讲之一，因为Ariya是WebKit的reviewer之一，他对WebKit有深入的研究，提供了不少移动设备如何进行性能优化的思路，以下是我总结的要点：

• 监测移动设备性能的方法
  • 源码注入方式，在相关部分加上日志，可以得到最详细的数据，但需要重新编译
  • 通过代理的方式，类似Fiddle 2，不过有局限
  • 通过高速摄像头，可以方便得到视觉效果，而且不影响运行的性能，但不能得到更多的数据，且不好进行分析
• PhantomJS
  • 这是一个基于WebKit的命令行工具，可以在JS中调用WebKit引擎，方便进行自动化测试
• 通过代码注入方式来监测性能
  • 可以得到页面各元素渲染的顺序
  • 可以得到细致的元素速度数据
  • JS引擎GC的情况
  • 他采用的方法是修改android的代码，然后重新编译，在绘图部分打日志
• android-tools
  • android的Web类应用开发和调试工具，包括eventrecoder和remotejs
  • remotejs可以实用console.log来获取页面中的数据，执行js等，解决了如何方便调试的问题
  • eventrecoder可以用来进行android上web的单元测试
• hammerjs
  • 一个JS的shell，基于v8实现，类似nodejs，不过功能要简单很多
  • 其中有一个模块Reflect可以用来分析js的语法，它的实现居然是从JavaScriptCore中将解析部分剥离出来，生成的结果类似SpiderMonkey的parser，这个工具可以用来简化js相关分析工具的开发。

Ariya还提供了一些性能优化和需要注意的事项，如避免创建对象等，具体请参考其slide，建议大家等这个视频出来后都看一下。

下面是其中的一页，整个slide做得相当漂亮

Mobile Web & HTML5 Performance Optimization

整体来看这个session没有什么亮点，对于mobile web开发不太了解的同学可以看看，系统了解一下，演讲者写过很多书，比较善于整理和总结，但缺乏新意。

6月15号的会议

15号是velocity第一天的正式会议，sessions很多，整体时间也比14号长。

JavaScript & Metaperformance

果然到处都能见到Douglas，这次除了介绍js语言特点以外还不忘鄙视了一下java，感兴趣的同学可以看看ppt。

Douglas说现在的JS性能测试都是骗人的，除了JSMeter看上去还行。

接下来是大家常听到的：DOM是瓶颈，大部分时间花在layout、painting等工作上，不要过早优化，避免导致代码不易维护。。。

然后他说JS中还是有优秀部分的，顺带推广自己的书JavaScript: The Good Parts。

最后忽悠大家用JSLint来作为性能监测工具，这。。。

Testing and Monitoring Mobile Apps

主要是Keynote产品的广告，不过做得很不错，介绍了Mobile Device Perspective 5，它是一个非常强大的手机测试工具，可以远程操作真实的iphone、android手机，还可以运行自动化脚本，监测应用性能等，是移动设备开发和性能优化的利器。

但实现原理不清楚，怀疑是在越狱的手机上运行后台进程，大家可以通过看视频了解其功能，这是我15号上午印象最深的一个session，欢迎了解内幕的同学指教。

Real-Time Real-Fast

主要谈使用WebSocket来减少overhead，可以用于实时性要求高的场景，然后推广了一下dojo中的socket API，它可以简化WebSocket的开发，并自动fallback到传统的long-polling方式，其它没听到什么特别的。

Performance Measurement and Case Studies at MSN

MSN的工程师分享了在性能优化方面的经验和内部数据，我这边记的一些要点：

• 之前太过于关注下载时间等网络数据，缺乏对实际展现性能的关注
• 应该更多关注渲染及展现时间，并提议浏览器增加这些监测API
• js越来越大了，要将js放底部或延迟加载及执行
• 延迟广告的加载，看上去他们的广告长宽是固定的，所以延迟是可行的
• 使用Data URL来显示缩率图，减少请求数

建议简单看一下这个slide，里面有一些性能优化对比测试的数据。

Improving Performance by Changing the Rules – From Fast to SPDY

主要介绍了SPDY对http的优化对比，在3G网络下性能提升效果显著，看slide就好了，没太多可听的，虽然Google的ssl请求都支持SPDY了，但其它网站及少有支持的。

Understanding Mobile Web Browser Performance

主要内容是介绍了手机中的网络情况，手机为了节能，网络不会一直开启，所以初次打开时会有启动网络的时间，而且3G网络延迟还是很高，也许4G会好点。

在android中只有4个线程来处理http请求，所以android中浏览器的并发不会超过4个。

android中的浏览器默认打开了pipelining，是极少数默认开启这个技术的浏览器。

10 Tricks for Mobile Performance

介绍了针对移动设备进行性能优化的建议，具体内容建议看看slide就好了。

Know Your Engines: How to Make Your JavaScript Fast

重点推荐一下David的这个session，David是Mozilla的JS引擎工程师，之前在他的blog上学习到了很多JS引擎优化的细节，这次又有不少收获，建议对JS引擎实现不太了解的同学抽空听听这个session，可以学到很多知识。

David首先讲解了JS引擎中的JIT和GC实现原理，然后介绍如何根据这些原理来优化JS代码，如避免动态改变对象的类型来优化JIT的执行、减小使用全局变量来减小GC、避免使用稀疏的数组等。

Take it all off! Lossy Image Optimization

主要针对如何优化图片这一主题，详细介绍了如何优化图片的大小，包括png、jpeg，有损、无损压缩等细节。通过一定程度的有损压缩，在性能和效果上进行权衡。

从目前HTTP Archive的数据来看，图片是占带宽最多的部分（60%左右），对其进行优化可以明显减少带宽消耗。

WebPagetest Update

WebPagetest的作者Patrick详细介绍了WebPagetest这一年来的改进，包括：

• 支持dynaTrace
• Web Page Replay
• 对外API
• 提供WPT Monitor来监控页面性能变化的情况

建议关注这个性能优化工具。

6月16号的会议

Holistic Performance

John介绍了jQuery中如何进行性能优化的，一些注意的点等：

• 需要进行全局考虑，运行快的代码有可能耗cpu和内存
• 用JS字典作为例子来解释性能优化需要考虑很多方面，包括文件大小、cpu、内存等，之前John在他的blog上讨论过
• jQuery性能优化的准则：
  • 通过JSPerf来测试优化效果，JSPerf基于Benchmark.js，是一个很优秀的JS性能测试工具，它通过很多方法来保证测试结果的准确性
  • 考虑全局优化，细节优化意义不大，纯js的性能问题很少见，基本上都是DOM性能问题
  • 保持简洁的代码，避免为了性能而减低可读性
  • 保证IE的性能，即便IE是最慢的浏览器，但由于市场占用率高，IE的性能是最重要的

Making the Web Instant

介绍了Chrome中的prerender，宣传视频很唬人，将原先需要等待6秒的页面降到了0秒，看来要是大家都用Chrome，咱们也没必要做性能优化了。

浏览器专栏

浏览器专栏和去年在北京的velocity类似，主要介绍浏览器的一些最新的进展，Chrome、Firefox、IE平时大家也都比较了解，所以没太多特别的地方。

不过今年Opera首次出现，介绍了Opera的产品线，Opera在移动领域有两个版本，mini和mobile，mobile是全功能的，而mini的渲染是由服务端完成的，原来Opera还有一个模拟器，可以用它来在桌面测试Opear mobile的展现效果。

HTML5, Flash and the Battle for Faster Cat Videos

来自YouTube的工程师介绍了YouTube中视频播放器的一些经验，并对HTML5中的video标签和Flash进行了对比，HTML5最大的优势是能和页面中的其它元素更好地结合，而Flash目前在性能上要比HTML5好，尤其是视频加载的速度。

最后建议主要使用Flash，而专门针对iOS用户提供HTML5版本，因为iOS对YouTube API流量的贡献不小。

The Impact of Ads on Performance and Improving Perceived Performance

这个session我并没有听，不过从发出来的ppt看，内容还是不错的，介绍了Yahoo mail中如何改进广告加载来提高页面性能，有很多细节的技术方案。

参观Google总部

17号我们前往位于Mountain View的Google总部进行了参观，正如传闻所说的，Google总部很大，里面人很多。

看到了传说中的恐龙骨架、飞船、大Nexus One、全景Google map、沙滩排球场，比起facebook工位要宽敞不少，还有很多4人一间的房间，里面很安静，传说中空气净化开得很足也是真的，办公室里面空气质量很不错，关于Google总部的情况大家可以搜索相关的资料，网上说的基本上靠谱。

Google总部里有很多餐厅，里面有各种风格的食物，还有中国、印度等不同地区的口味，比Facebook要大得多。

这里感谢一下Tim在百忙中抽空带我们到处参观。

整体感受

这里零碎写下一些自己一些参会的感受：

• 和国内相比还是更容易遇到牛人，比如Ariya和David的两个session是我觉得收获最大的，但在国内很难听到这样深入的演讲
• 最头疼的问题是时差，上午11点就相当于北京夜里2点，影响了开会的效率
• 今年性能优化主题已经逐渐转向了自动化测试和持续集成，通过自动化的方法来保证性能
• 标准化也是一个很大趋势，beacons和HAR这两个标准都逐渐被大家接受
• 数据分析对性能优化来说至关重要，Facebook在这方面做得很专业，从他们招聘Web Optimization工程师的职位要求也能看得出来

最后，除了开会，我们还抽空参观了漂亮的斯坦福大学：

最后去参观了宏伟的金门大桥，硅谷和旧金山的气候差距很大，忽然就变成阴云密布了：