In Search of Speed 学习笔记[收藏]

,a4J%Y{$E:s7e0   原雅虎首席性能官、现任Google Web性能专家Steve Souders，近期在LA隆重举行的SpeedGeeks会议上发表重要讲话：In Search of Speed（slides,video)，以下为学习笔记：51Testing软件测试网2ZEOrG?
51Testing软件测试网X3H {K
F+S
1.以iGoogle为例，前端页面组件渲染的时间占了整个页面打开时间的91%，前端优化的重要性不言而喻。
zu`*xf051Testing软件测试网?g]r H
2.前端优化十四条原则，是个人都知道，不必多说了。
+Q'jDra!]T$]0
}$Qa,~
i#b|$T03.如果想要更快一点，可以参考新书Even Faster Web Sites。51Testing软件测试网.S7T:T
Oa2n.V+~3{
51Testing软件测试网4xU&[Qk9Z%l
4. Google页面延时增加0.4秒，搜索量会下降0.6%；雅虎页面延时增加0.4秒，访问量会下降5-9%；Bing页面延时增加2秒，收入会下降4.3%。
wWPN|oG-Q051Testing软件测试网y)Db@5g3z#PN&e
5.高性能=更好的用户体验+更多访问量+更多收入+成本节约51Testing软件测试网-k0n3w|l
51Testing软件测试网U jD2s(L${ Je
6.为什么没有那么多人来做性能优化这么有前途的事呢？因为这他妈的太难了！51Testing软件测试网;].D,@ K+J
51Testing软件测试网b|&VfbY/?Vo
7.当然，如果这事没那么难的话，是个人都能做了！51Testing软件测试网 rZ[9n H m
51Testing软件测试网t-f)w#@4q G
8.我们今年的口号是：本来就快！（Fast by Default）
]]z
@2y:C-~0
4K3{"Z?#S7W09. Aptimize公司的性能优化神油：整合JS、整合CSS、Sprites、Data: URIs、更长的过期时间、精简JS和CSS、automatically in real time。51Testing软件测试网,k4f`3tk
51Testing软件测试网\3@%f Mi6A%x0f
10.在http://sharepoint.microsoft.com上抹了点神油，果然有奇效：Empty Cache的requests从96降到35，Primed Cache的requests从50降到9。JS减少了7个，CSS减少了12个，图片减少了25张。页面性能提升：Empty Cache - 46-64%；Primed Cache - 15-53%。详见：http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspx
C6G:x~h-s0H4S0
1\|x8\2H011.有家“典型电子商务网站”，名叫StrangeLoop Networks，自打抹了神油：每次访问页面数由11提升到16，浏览网站平均时间由24分钟提升到30分钟，转化率上升了16%，订单价值上升了5.5%。51Testing软件测试网ZN_xda$qp5l

7?$~g%t$B&C"M5Y#e012.为啥某些网站比较慢？“某些”包括但不限于：Google Mail、Google Docs、AOL、Twitter、ESPN、Best Buy、IKEA、CNN...（这些网站钱多人傻，快去推销优化服务！）
5}!~u@,o5^v2o5@!H#o051Testing软件测试网)Dnq)A1h~ N
13.原因是由于缺乏Progressive Rendering（渐进渲染）！51Testing软件测试网 P? ]nC4} or

%VTc!VY!Q014.对比五家搜索引擎：Google Search、Yahoo Search、Bing、Ask和AOL Search，页面打开0.5秒时，没有一个显示内容，等到1秒时，Google Search和Bing显示了主要内容，直到2秒时，Ask还是没有显示任何内容。
zi2Y`d@zeb0
g#PXl!{,BZW015.快使用双截棍：WebPagetest.org51Testing软件测试网.G,DWzrK

.H&i1k!_9G016.对比六家新闻网站：Yahoo News、CNN、CNET、Google News、NY Times和MSNBC，页面打开1秒时，Google News率先显示了Logo，直到4秒时，CNN还是空白一片。
:K)L$u?m
N }?0
knhs2i%h&X"C017. Progressive Enhancement：deliver HTML、defer JS、avoid DOM、decorate later。51Testing软件测试网!Q{2{3A+J JQB2C+Uo
51Testing软件测试网Nsbf*GN@nj0l p `
18.先做Progressive Enhancement，再做Progressive Rendering。
[ow0]#d*l4r,M2]051Testing软件测试网&g
u$_qX-^ BH8e
19.最近新闻：http://spriteme.org帮助优化sprites，http://www.browserscope.org用于对比不同的浏览器访问，HTTP Watch Studio支持HTTP存档格式（HAR），@font-face标记如果放在SCRIPT.标签下方则将导致IE浏览器阻止渲染。
;a'k U)Yj2Rb}(PX051Testing软件测试网|ioM|;tMuwxz ?
20.讲话要点，必须掌握：关注前端！使用YSlow和PageSpeed工具！Progressive enhancement -> progressive rendering!51Testing软件测试网@ L5]F8C3Ya

tv~_1KqNau.{$kk021.最后感言：网页速度是下一个竞争激烈的目标，必须在别人动手之前先优化自己！（否则会死得很难看，信不信？）51Testing软件测试网}8DUg-yG#k

cP(nO^:r TM0--转B2BPOOD-冯亮记录