1. 淘宝搜索前端优化
文河
1.0 2011-1-5 1

2. About Me
• 文河（许阳寅, Frank Xu）
• 淘宝UED - 搜索 – 前端开发
• Contact
– f2e.us
– @yyfrankyy
– yyfrankyy@gmail.com
• Focus on:
– JavaScript
– Frontend Performance

3. Agenda
• 规则与工具
• 淘宝搜索前端优化实践

4. 规则
• YAHOO
– Best Practices for Speeding Up Your
Web Site
• Google
– Web Performance Best Practices
• 80/20

5. YSlow
Both
via @souders
use CSS sprites
combine scripts use a CDN
combine stylesheets configure ETags
add an Expires header use GET for Ajax requests
gzip responses reduce # of DOM elements
put stylesheets at the top no 404s
put scripts at the bottom avoid image filters
avoid CSS expressions optimize favicon
make JS and CSS external
reduce DNS lookups Page Speed
minify JS and CSS defer loading JS
avoid redirects remove unused CSS
remove duplicate scripts use efficient CSS selectors
make Ajax cacheable optimize images
reduce cookie size optimize order of CSS & JS
use cookie-free domains shard domains
don't scale images leverage proxy caching

6. 规则乊外
• 为什么脚本要放在文档最后？
• 为什么要把所有文件合并？
• 为什么要避免CSS Expressions？
• ……

7. 规则乊外
via @kavenyan

8. 工具
• 综合评价
– YSlow/PageSpeed
– WebPageTest
• 瀑布流
– Firebug -> Network
– HttpWatch
• 代码性能
– dynaTrace Ajax Edition

9. 实战 - Why Search?
• 一个页面
• N个模块自由组合
– ShortLinks
– Shortcuts
– Properties
– Categories
– Search List
– P4P(item/shop)
– ……

10. What can we do?
• 配置优化
• 代码优化
– 精简代码（减少请求和传输量）
– 提高代码执行性能
• 策略优化
– 延迟加载
– 预加载

11. 实战 – 配置优化
• CDN
• Keep-alive
• Cache-Control
• Cookieless domain
• Gzip
•…

12. 实战 – 精简HTML
• Why?
– 减少传输时间（S/S和C/S的时间）
– 减少应用服务器内存占用
– 减少DOM节点（浏览器内存占用）
• How?
– 压缩（去除空格）
– 优化结构（优雅降级：圆角/阴影/渐变……）
– 分段flush

13. 实战 – 精简HTML
• 类目List压缩HTML
– 服务器QPS减少30%
• Multi flush
– First Byte
– Bigpipe/Google Instant
– 淘宝排行榜
Html大小 DOM节点
基屏 7.2k 1170
全部加载 124.7k 13777

14. 实战 – 精简CSS
• Why?
– 需要第一个被加载
– <head/>里的CSS阻塞HTML渲染
• How?
– 压缩（YC）
– 跟特定结构内聚（模块化）
– 移除基屏非必需样式
– 简化选择符复杂度

15. 实战 – 精简CSS
• s.taobao.com
• search.china.alibaba.com

16. 实战 – 精简图片
• Why?
– 避免页面加载期间大面积空白
– 加快“响应”速度
– 大sprite耗内存
• How?
– 理解图片（图片格式与设计那点事儿）
– 使用CSS3+Filter（适当时候降级）
– 背景图片增加相关背景色

17. 实战 – 精简图片/降级

18. 实战 – 精简JS
• Why?
– 阻塞线程（页面停止下载和渲染）
• How?
– 压缩（YC/CC）
– 按需加载

19. initial payload and
execution Functions Executed before
JavaScript onload
www.aol.com 324 K 30%
www.ebay.com 234 K 34%
www.facebook.com 553 K 7%
www.google.com/search 21 K ??%
www.bing.com/search 10 K 35%
www.msn.com 152 K 55%
www.myspace.com 248 K 29%
en.wikipedia.org/wiki 99 K 19%
www.yahoo.com 381 K 33%
www.youtube.com 274 K 16%
229 K avg 29% avg
via @souders

20. 实战 – Module Loader
• Loading Script Without Blocking
• Loader
– ControlJS
– LabJS
– YUI Loader
– KISSY Loader
–…

21. 实战 – SRP优化
• 为下一页预加载
– 客户端缓存
• 文档前发请求
– 打开连接（youtube）
– 提前获取重要信息（P4P/SPU）

22. 实战 – 旧系统优化
• 让所有人知道你的优化
• 80/20，先改最痛的地方
• 数据驱劢
– 优化结果由数据支撑
– 关注业务数据变劢
• 优化沉淀
– 性能分析数据/讨论结果
– 优化的权衡过程

23. 实战 – SRP优化
• 分析瓶颈，得到80/20中的80
• 记录优化前的数据
– 请求数量/域名数量
– 文件大小
– DOM节点
– 业务数据

24. 实战 – SRP优化

25. 实战 – SRP优化
• 瀑布流分析
– 域名数（DNS）
– 连接数（CDN-COMBO）
Browser HTTP/1.1 HTTP/1.0
IE 6,7 2 4
IE 8 6 6
Firefox 2 2 8
Firefox 3 6 6
Safari 3,4 4 4
Chrome 1,2 6 6
Opera 9,10 4 4

26. 实战 – SRP优化
• 瀑布流分析
– 阻塞？

27. 实战 – SRP优化
• 瀑布流分析
– 请求太迟

28. 实战 - SRP优化
精简（minify） 延迟 预加载
旧 1. 减少DNS查询 ? ?
系 1. 宝贝图片域名从8个缩减为4个
统 2. Sprite固定在几个域名内
优 2. 减少请求数
化 1. 合并，清理CSS/Sprite
2. 合并，清理JS
3. 调整请求位置

29. 实战 – SRP优化
第三方广告
子产品 子功能（BTS） 触发功能
Search Core 产品搜 搜索历史 搜索提示 P4P
同店购 搜索定制 搜索建议
核心功能 B2B
开放搜索 自定义筛选 新功能提示 TOP
3rd
Kissy core party
Kissy seed

30. 实战 – SRP优化
• 业务决定载入优先级
核心功能 子产品 子功能（BTS） 触发功能 第三方
合并 单独合并，QP决 根据BTS概率决定 外联，触发后 按第三方优先级确定
定是否并行载入 是否并入核心功能 加载内容 载入方式

31. 实战 - SRP优化
精简（minify） 延迟 预加载
旧 1. 减少DNS查询 1. JS放在最后 ?
系 1. 宝贝图片域名从8个缩减为4个 2. 对页面做无倾入兼容
统 2. Sprite固定在几个域名内 3. 按需加载BTS模块
优 2. 减少请求数 4. 异步加载触发模块
化 1. 合并，清理CSS/Sprite 5. 异步加载第三方模块
2. 合并，清理JS
3. 调整请求位置

32. 实战 – SRP优化
• 提前获取重要信息（P4P）
– KISSY.getScript(‘${p4p_request}’);

33. 实战 - SRP优化
精简（minify） 延迟 预加载
旧 1. 减少DNS查询 1. JS放在最后 1. 预加载静态资源
系 1. 宝贝图片域名从8个缩减为4个 2. 对页面做无倾入兼容 2. 预请求重要数据
统 2. Sprite固定在几个域名内 3. 异步加载触发模块
优 2. 减少请求数 4. 按需加载BTS模块
化 1. 合并，清理CSS/Sprite
2. 合并，清理JS
3. 调整请求位置

34. 实战 – 全新项目
• 把性能作为一个功能点进行设计
– Performance as a feature
• 提前埋入监控数据
• 不要害怕使用新技术，但要谨慎测试

35. 实战 – 全新项目
• 自劢化部署（bash+ant）
• http://f2e.us/slides/bangv3.html

36. 实战 - 持续优化
• 让整个团队认可前端优化
• 小组成员达成共识，分工逐步优化

37. 实战 - 持续优化
• 浏览器份额

38. 实战 - 持续优化
• onDOMReady/onload

39. 实战 - 持续优化

40. 实战 – 持续优化
• 文件大小

41. What’s Next?
• 更多使用LocalStorage
• 全站multi flush
• 更详尽的性能统计/分析
– boomerang

42. Resources
• http://stevesouders.com
• http://www.webperformancetoday.com/
• http://calendar.perfplanet.com/2010/