在Yslow 34 Rules之后 -- 网站性能优化思路和进展
WPO(Web Performance Optimization , 网站性能优化)近年来发展迅猛,期间YAHOO做出了重要贡献,YSlow的14条军规,20条最佳实践影响深远.去年Steve出版了第二本书,Velocity大会也从2008开到了2010.各个网站越来越重视速度,也有越来越多开发者投入到WPO大业当中.
在一次内部分享中,整理了Yahoo Rules之外WPO的一些新进展,大杂烩只是表象,那多是些别人做了的事情.重要的是在当前时期,WPO逐渐进入精耕细作的阶段,在放之四海而皆准的Rules被巨头们提炼的七七八八之后.如何结合自己的应用做最合适的优化?遵循怎样的思路,借助什么样的工具去发现问题,解决问题?从这些新进展中可以看出些端倪,在这里记录一下.
PPT在此,前21页可以飞速掠过,字体很杯具丫 (>_<)!
先说思路:
YAHOO将Rules分成Content, Server, Cookie, CSS, JavaScript, Images, Mobile七类是一种思路,让开发这快速定位到技能相关类别.但是作为前端很可能要同时关注其中N个类别.我们从另一个角度来看,网页的展现有loading阶段和render阶段,render阶段还是js,css,html三类前端技术,而在loading阶段我们则需要关注http:减少http数,优化单个http的各个时间段,减少收发数据量,有效利用缓存等等,如下图:
我们要先分析哪个部分慢了,哪里可能有提升空间,再着手改进.
再说工具:
借助四类方面的四类工具帮助,更好的覆盖前面优化思路中的各个方面:
一.数据包嗅探工具:
这类工具关注HTTP的方方面面细节,分析请求间顺序和单个http请求各个阶段的耗时情况.
典型的如HttpWatch,Firebug的网络页签,Fiddler等等.
另外还有一些全网监控工具可以获得各个地点监测结果,如基调网络.
二.运行时分析工具:
这类工具则更关注运行时JS的性能,各阶段内存和CPU的使用情况.
典型的如Firebug Profiler, Page Speed Activity一些高阶的性能探测工具如Web Page Test, Dynatrace Ajax也都在监控这些方面.
三.内存结构分析工具:
这类的工具还在起步阶段,随着复杂Web2.0应用的内存泄露风险,随着手持设备上web app的发展,内存使用再次变得重要起来.
主要的IE内存泄露的诊断工具Drip, sIEve, JS Memory Leaks Detector.
而在内存快照方面Mozilla有其研究,但Chrome先转化为了实践.在Chrome自带的开发者工具中有一个"Profiles"页签,其中一项功能"Heap Snapshots"提供内存快照,可以从两个角度观察内存结构,可以多次快照比较差异.在前天的Chrome推介会上,Google的同学也说这个工具还不够强壮.但是我们仍然可以用好它!回想在firebug之前删代码+alert是定位问题的不二法门,在内存分析工具不够健壮时,我们只要多做些test页,单独测试我们怀疑的关注的部分就好了.
四.浏览器内各子系统性能开销分析工具:
我们常说"二八"原则,如果浏览器大量精力耗费在了Dom访问中,而我们却在优化一个仅2%开销的算法上,显然是没有抓住主要矛盾.
在这方面IE一直走在前面,最近的一篇文章刚刚披露了IE各个子系统和若干网页展现时各子系统开销分析,借助这类工具能更好的结合自身应用找到优化关键点.
巨头们精耕细作的实践案例二则:
Flush the Buffer Early是Yahoo Rules之一.推荐的Flush时机是</head>之后,可以让浏览器先行下载<head>中引入的css,js,如下:
