淘宝搜索前端优化
Upcoming SlideShare
Loading in...5
×
 

淘宝搜索前端优化

on

  • 2,059 views

 

Statistics

Views

Total Views
2,059
Views on SlideShare
1,814
Embed Views
245

Actions

Likes
6
Downloads
56
Comments
0

3 Embeds 245

http://f2e.us 235
http://localhost 5
http://wenhe-wiki 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Data source: Steve Souders, updated April 2010

淘宝搜索前端优化 淘宝搜索前端优化 Presentation Transcript

  • 淘宝搜索前端优化 文河1.0 2011-1-5 1
  • 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
  • YSlowBoth via @souders use CSS spritescombine scripts use a CDNcombine stylesheets configure ETagsadd an Expires header use GET for Ajax requestsgzip responses reduce # of DOM elementsput stylesheets at the top no 404sput scripts at the bottom avoid image filtersavoid CSS expressions optimize faviconmake JS and CSS externalreduce DNS lookups Page Speedminify JS and CSS defer loading JSavoid redirects remove unused CSSremove duplicate scripts use efficient CSS selectorsmake Ajax cacheable optimize imagesreduce cookie size optimize order of CSS & JSuse cookie-free domains shard domainsdont scale images leverage proxy caching
  • 规则乊外• 为什么脚本要放在文档最后?• 为什么要把所有文件合并?• 为什么要避免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) – 按需加载
  • 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% avgvia @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 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
  • 实战 – SRP优化• 瀑布流分析 – 阻塞?
  • 实战 – SRP优化• 瀑布流分析 – 请求太迟
  • 实战 - SRP优化 精简(minify) 延迟 预加载旧 1. 减少DNS查询 ? ?系 1. 宝贝图片域名从8个缩减为4个统 2. Sprite固定在几个域名内优 2. 减少请求数化 1. 合并,清理CSS/Sprite 2. 合并,清理JS 3. 调整请求位置
  • 实战 – SRP优化 第三方广告 子产品 子功能(BTS) 触发功能Search Core 产品搜 搜索历史 搜索提示 P4P 同店购 搜索定制 搜索建议 核心功能 B2B 开放搜索 自定义筛选 新功能提示 TOP 3rd Kissy core party Kissy seed
  • 实战 – SRP优化• 业务决定载入优先级核心功能 子产品 子功能(BTS) 触发功能 第三方合并 单独合并,QP决 根据BTS概率决定 外联,触发后 按第三方优先级确定 定是否并行载入 是否并入核心功能 加载内容 载入方式
  • 实战 - SRP优化 精简(minify) 延迟 预加载旧 1. 减少DNS查询 1. JS放在最后 ?系 1. 宝贝图片域名从8个缩减为4个 2. 对页面做无倾入兼容统 2. Sprite固定在几个域名内 3. 按需加载BTS模块优 2. 减少请求数 4. 异步加载触发模块化 1. 合并,清理CSS/Sprite 5. 异步加载第三方模块 2. 合并,清理JS 3. 调整请求位置
  • 实战 – SRP优化• 提前获取重要信息(P4P) – KISSY.getScript(‘${p4p_request}’);
  • 实战 - SRP优化 精简(minify) 延迟 预加载旧 1. 减少DNS查询 1. JS放在最后 1. 预加载静态资源系 1. 宝贝图片域名从8个缩减为4个 2. 对页面做无倾入兼容 2. 预请求重要数据统 2. Sprite固定在几个域名内 3. 异步加载触发模块优 2. 减少请求数 4. 按需加载BTS模块化 1. 合并,清理CSS/Sprite 2. 合并,清理JS 3. 调整请求位置
  • 实战 – 全新项目• 把性能作为一个功能点进行设计 – 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/