1

淘宝搜索前端优化

文河

1.0 2011-1-5

About Me• 文河（许阳寅 , Frank Xu ）• 淘宝 UED - 搜索 – 前端开发• Contact

– f2e.us– @yyfrankyy– yyfrankyy@gmail.com

• Focus on:– JavaScript– Frontend Performance

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

规则• YAHOO

– Best Practices for Speeding Up Your Web Site

• Google– Web Performance Best Practices

• 80/20

Bothcombine scriptscombine stylesheetsadd an Expires headergzip responsesput stylesheets at the topput scripts at the bottomavoid CSS expressionsmake JS and CSS externalreduce DNS lookupsminify JS and CSSavoid redirectsremove duplicate scriptsmake Ajax cacheablereduce cookie sizeuse cookie-free domainsdon't scale images

YSlowuse CSS spritesuse a CDNconfigure ETagsuse GET for Ajax requestsreduce # of DOM elementsno 404savoid image filtersoptimize favicon

Page Speeddefer loading JSremove unused CSSuse efficient CSS selectorsoptimize imagesoptimize order of CSS & JSshard domainsleverage proxy caching

via @souders

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

规则之外

via @kavenyan

工具• 综合评价

– YSlow/PageSpeed– WebPageTest

• 瀑布流– Firebug -> Network– HttpWatch

• 代码性能– dynaTrace Ajax Edition

实战 - Why Search?• 一个页面• N 个模块自由组合

– ShortLinks– Shortcuts– Properties– Categories– Search List– P4P(item/shop)– ……

What can we do?• 配置优化• 代码优化

– 精简代码（减少请求和传输量）– 提高代码执行性能

• 策略优化– 延迟加载– 预加载

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

实战 – 精简 HTML• Why?

– 减少传输时间（ S/S 和 C/S 的时间）– 减少应用服务器内存占用– 减少 DOM 节点（浏览器内存占用）

• How?– 压缩（去除空格）– 优化结构（优雅降级：圆角 / 阴影 / 渐变…

…）– 分段 flush

实战 – 精简 HTML• 类目 List 压缩 HTML

– 服务器 QPS 减少 30%• Multi flush

– First Byte– Bigpipe/Google Instant– 淘宝排行榜

Html大小 DOM节点

基屏 7.2k 1170

全部加载 124.7k 13777

实战 – 精简 CSS• Why?

– 需要第一个被加载– <head/> 里的 CSS 阻塞 HTML 渲染

• How?– 压缩（ YC ）– 跟特定结构内聚（模块化）– 移除基屏非必需样式– 简化选择符复杂度

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

实战 – 精简图片• Why?

– 避免页面加载期间大面积空白– 加快“响应”速度– 大sprite耗内存

• How?– 理解图片（图片格式与设计那点事儿）– 使用 CSS3+Filter （适当时候降级）– 背景图片增加相关背景色

实战 – 精简图片 / 降级

实战 – 精简 JS• Why?

– 阻塞线程（页面停止下载和渲染）• How?

– 压缩（ YC/CC ）– 按需加载

JavaScriptFunctions Executed

before 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%

29% avg229 K avg

initial payload and execution

via @souders

实战 – Module Loader• Loading Script Without Blocking• Loader

– ControlJS– LabJS– YUI Loader– KISSY Loader– …

实战 – SRP 优化• 为下一页预加载

– 客户端缓存

• 文档前发请求– 打开连接（ youtube ）– 提前获取重要信息（ P4P/SPU ）

实战 – 旧系统优化• 让所有人知道你的优化• 80/20 ，先改最痛的地方• 数据驱动

– 优化结果由数据支撑– 关注业务数据变动

• 优化沉淀– 性能分析数据 / 讨论结果– 优化的权衡过程

实战 – SRP 优化• 分析瓶颈，得到 80/20 中的 80• 记录优化前的数据

– 请求数量 / 域名数量– 文件大小– DOM 节点– 业务数据

实战 – SRP 优化

实战 – SRP 优化• 瀑布流分析

– 域名数（ DNS ）– 连接数（ CDN-COMBO ）

Browser HTTP/1.1 HTTP/1.0

IE 6,7 2 4IE 8 6 6Firefox 2 2 8Firefox 3 6 6Safari 3,4 4 4Chrome 1,2 6 6Opera 9,10 4 4

实战 – SRP 优化• 瀑布流分析

– 阻塞？

实战 – SRP 优化• 瀑布流分析

– 请求太迟

实战 - SRP 优化精简（ minify） 延迟 预加载

旧系统优化

1. 减少 DNS 查询1. 宝贝图片域名从 8 个缩减为 4 个2. Sprite 固定在几个域名内

2. 减少请求数1. 合并，清理 CSS/Sprite2. 合并，清理 JS

3. 调整请求位置

? ?

实战 – SRP 优化

Kissy seed

Kissy core

Search Core

核心功能 子产品产品搜同店购

开放搜索

子功能（ BTS）搜索历史搜索定制

自定义筛选

触发功能搜索提示搜索建议新功能提示

3rd party

第三方广告P4PB2BTOP

实战 – SRP 优化

核心功能 子产品 子功能（ BTS） 触发功能 第三方

合并 单独合并， QP决定是否并行载入

根据 BTS概率决定是否并入核心功能

外联，触发后加载内容

按第三方优先级确定载入方式

• 业务决定载入优先级

实战 - SRP 优化精简（ minify） 延迟 预加载

旧系统优化

1. 减少 DNS 查询1. 宝贝图片域名从 8 个缩减为 4 个2. Sprite 固定在几个域名内

2. 减少请求数1. 合并，清理 CSS/Sprite2. 合并，清理 JS

3. 调整请求位置

1. JS 放在最后2. 对页面做无倾入兼容3. 按需加载 BTS 模块4. 异步加载触发模块5. 异步加载第三方模块

?

实战 – SRP 优化• 提前获取重要信息（ P4P ）

– KISSY.getScript(‘${p4p_request}’);

实战 - SRP 优化精简（ minify） 延迟 预加载

旧系统优化

1. 减少 DNS 查询1. 宝贝图片域名从 8 个缩减为 4

个2. Sprite 固定在几个域名内

2. 减少请求数1. 合并，清理 CSS/Sprite2. 合并，清理 JS

3. 调整请求位置

1. JS 放在最后2. 对页面做无倾入兼容3. 异步加载触发模块4. 按需加载 BTS 模块

1. 预加载静态资源2. 预请求重要数据

实战 – 全新项目• 把性能作为一个功能点进行设计

– Performance as a feature• 提前埋入监控数据• 不要害怕使用新技术，但要谨慎测试

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

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

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

实战 - 持续优化• onDOMReady/onload

实战 - 持续优化

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

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

– boomerang

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