淘宝搜索前端优化

Transcript

1. 1 淘宝搜索前端优化 ⽂河 1.0 2011-1-5
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. Both combine scripts combine stylesheets add an Expires header gzip responses put stylesheets at the top put scripts at the bottom avoid CSS expressions make JS and CSS external reduce DNS lookups minify JS and CSS avoid redirects remove duplicate scripts make Ajax cacheable reduce cookie size use cookie-free domains YSlow use CSS sprites use a CDN configure ETags use GET for Ajax requests reduce # of DOM elements no 404s avoid image filters optimize favicon Page Speed defer loading JS remove unused CSS use efficient CSS selectors optimize images optimize order of CSS & JS shard domains leverage proxy caching via @souders
6. Both combine scripts combine stylesheets add an Expires header gzip responses put stylesheets at the top put scripts at the bottom avoid CSS expressions make JS and CSS external reduce DNS lookups minify JS and CSS avoid redirects remove duplicate scripts make Ajax cacheable reduce cookie size use cookie-free domains YSlow use CSS sprites use a CDN configure ETags use GET for Ajax requests reduce # of DOM elements no 404s avoid image filters optimize favicon Page Speed defer loading JS remove unused CSS use efficient CSS selectors optimize images optimize order of CSS & JS shard domains leverage proxy caching via @souders
7. Both combine scripts combine stylesheets add an Expires header gzip responses put stylesheets at the top put scripts at the bottom avoid CSS expressions make JS and CSS external reduce DNS lookups minify JS and CSS avoid redirects remove duplicate scripts make Ajax cacheable reduce cookie size use cookie-free domains YSlow use CSS sprites use a CDN configure ETags use GET for Ajax requests reduce # of DOM elements no 404s avoid image filters optimize favicon Page Speed defer loading JS remove unused CSS use efficient CSS selectors optimize images optimize order of CSS & JS shard domains leverage proxy caching via @souders
8. Both combine scripts combine stylesheets add an Expires header gzip responses put stylesheets at the top put scripts at the bottom avoid CSS expressions make JS and CSS external reduce DNS lookups minify JS and CSS avoid redirects remove duplicate scripts make Ajax cacheable reduce cookie size use cookie-free domains YSlow use CSS sprites use a CDN configure ETags use GET for Ajax requests reduce # of DOM elements no 404s avoid image filters optimize favicon Page Speed defer loading JS remove unused CSS use efficient CSS selectors optimize images optimize order of CSS & JS shard domains leverage proxy caching via @souders
9. Both combine scripts combine stylesheets add an Expires header gzip responses put stylesheets at the top put scripts at the bottom avoid CSS expressions make JS and CSS external reduce DNS lookups minify JS and CSS avoid redirects remove duplicate scripts make Ajax cacheable reduce cookie size use cookie-free domains YSlow use CSS sprites use a CDN configure ETags use GET for Ajax requests reduce # of DOM elements no 404s avoid image filters optimize favicon Page Speed defer loading JS remove unused CSS use efficient CSS selectors optimize images optimize order of CSS & JS shard domains leverage proxy caching via @souders
10. 规则之外 • 为什么脚本要放在⽂档最后？ • 为什么要把所有⽂件合并？ • 为什么要避免CSS Expressions？ • ……
11. 规则之外 via @kavenyan
12. ⼯具 • 综合评价 – YSlow/PageSpeed – WebPageTest • 瀑布流 – Firebug -> Network – HttpWatch • 代码性能 – dynaTrace Ajax Edition
13. 实战 - Why Search? • ⼀个⻚⾯ • N个模块⾃由组合 – ShortLinks – Shortcuts – Properties – Categories – Search List – P4P(item/shop) – ……
14. What can we do?
15. What can we do? • 配置优化
16. What can we do? • 配置优化 • 代码优化 – 精简代码（减少请求和传输量） – 提⾼代码执⾏性能
17. What can we do? • 配置优化 • 代码优化 – 精简代码（减少请求和传输量） – 提⾼代码执⾏性能 • 策略优化 – 延迟加载 – 预加载
18. 实战 – 配置优化 • CDN • Keep-alive • Cache-Control • Cookieless domain • Gzip • …
19. 实战 – 精简HTML
20. 实战 – 精简HTML • Why? – 减少传输时间（S/S和C/S的时间） – 减少应⽤服务器内存占⽤ – 减少DOM节点（浏览器内存占⽤）
21. 实战 – 精简HTML • Why? – 减少传输时间（S/S和C/S的时间） – 减少应⽤服务器内存占⽤ – 减少DOM节点（浏览器内存占⽤） • How? – 压缩（去除空格） – 优化结构（优雅降级：圆⾓/阴影/渐变……） – 分段flush
22. 实战 – 精简HTML
23. 实战 – 精简HTML • 类⺫List压缩HTML – 服务器QPS减少30%
24. 实战 – 精简HTML • 类⺫List压缩HTML – 服务器QPS减少30% • Multi flush – First Byte – Bigpipe/Google Instant – 淘宝排⾏榜
25. 实战 – 精简HTML • 类⺫List压缩HTML – 服务器QPS减少30% • Multi flush – First Byte – Bigpipe/Google Instant – 淘宝排⾏榜 Html⼤⼩ DOM节点 基屏 7.2k 1170 全部加载 124.7k 13777
26. 实战 – 精简CSS
27. 实战 – 精简CSS • Why? – 需要第⼀个被加载 – <head/>⾥的CSS阻塞HTML渲染
28. 实战 – 精简CSS • Why? – 需要第⼀个被加载 – <head/>⾥的CSS阻塞HTML渲染 • How? – 压缩（YC） – 跟特定结构内聚（模块化） – 移除基屏⾮必需样式 – 简化选择符复杂度
29. 实战 – 精简CSS • s.taobao.com • search.china.alibaba.com
30. 实战 – 精简CSS • s.taobao.com • search.china.alibaba.com
31. 实战 – 精简图⽚
32. 实战 – 精简图⽚ • Why? – 避免⻚⾯加载期间⼤⾯积空⽩ – 加快“响应”速度 – ⼤sprite耗内存
33. 实战 – 精简图⽚ • Why? – 避免⻚⾯加载期间⼤⾯积空⽩ – 加快“响应”速度 – ⼤sprite耗内存 • How? – 理解图⽚（图⽚格式与设计那点事⼉） – 使⽤CSS3+Filter（适当时候降级） – 背景图⽚增加相关背景⾊
34. 实战 – 精简图⽚/降级
35. 实战 – 精简图⽚/降级
36. 实战 – 精简图⽚/降级
37. 实战 – 精简JS
38. 实战 – 精简JS • Why? – 阻塞线程（⻚⾯停⽌下载和渲染）
39. 实战 – 精简JS • Why? – 阻塞线程（⻚⾯停⽌下载和渲染） • How? – 压缩（YC/CC） – 按需加载
40. JavaScript Functions 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% initial payload and execution via @souders
41. JavaScript Functions 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% avg 229 K avg initial payload and execution via @souders
42. 实战 – Module Loader • Loading Script Without Blocking • Loader – ControlJS – LabJS – YUI Loader – KISSY Loader – …
43. 实战 – SRP优化 • 为下⼀⻚预加载 – 客户端缓存 • ⽂档前发请求 – 打开连接（youtube） – 提前获取重要信息（P4P/SPU）
44. 实战 – 旧系统优化
45. 实战 – 旧系统优化 • 让所有⼈知道你的优化
46. 实战 – 旧系统优化 • 让所有⼈知道你的优化 • 80/20，先改最痛的地⽅
47. 实战 – 旧系统优化 • 让所有⼈知道你的优化 • 80/20，先改最痛的地⽅ • 数据驱动 – 优化结果由数据⽀撑 – 关注业务数据变动
48. 实战 – 旧系统优化 • 让所有⼈知道你的优化 • 80/20，先改最痛的地⽅ • 数据驱动 – 优化结果由数据⽀撑 – 关注业务数据变动 • 优化沉淀 – 性能分析数据/讨论结果 – 优化的权衡过程
49. 实战 – SRP优化 • 分析瓶颈，得到80/20中的80 • 记录优化前的数据 – 请求数量/域名数量 – ⽂件⼤⼩ – DOM节点 – 业务数据
50. 实战 – SRP优化
51. 实战 – 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
52. 实战 – SRP优化 • 瀑布流分析 – 阻塞？
53. 实战 – SRP优化 • 瀑布流分析 – 请求太迟
54. 实战 – SRP优化 • 瀑布流分析 – 请求太迟
55. 实战 - SRP优化 精简（minify） 延迟 预加载 旧 系 统 优 化 1. 减少DNS查询 1. 宝⻉图⽚域名从8个缩减为4个 2. Sprite固定在⼏个域名内 2. 减少请求数 1. 合并，清理CSS/Sprite 2. 合并，清理JS 3. 调整请求位置 ? ?
56. 实战 – SRP优化
57. 实战 – SRP优化 Kissy seed
58. 实战 – SRP优化 Kissy seed Kissy core
59. 实战 – SRP优化 Kissy seed Kissy core Search Core 核⼼功能 ⼦产品 产品搜 同店购 开放搜索 ⼦功能（BTS） 搜索历史 搜索定制 ⾃定义筛选 触发功能 搜索提⽰ 搜索建议 新功能提⽰
60. 实战 – SRP优化 Kissy seed Kissy core Search Core 核⼼功能 ⼦产品 产品搜 同店购 开放搜索 ⼦功能（BTS） 搜索历史 搜索定制 ⾃定义筛选 触发功能 搜索提⽰ 搜索建议 新功能提⽰ 3rd party
61. 实战 – SRP优化 Kissy seed Kissy core Search Core 核⼼功能 ⼦产品 产品搜 同店购 开放搜索 ⼦功能（BTS） 搜索历史 搜索定制 ⾃定义筛选 触发功能 搜索提⽰ 搜索建议 新功能提⽰ 3rd party 第三⽅⼲告 P4P B2B TOP
62. 实战 – SRP优化 核⼼功能 ⼦产品 ⼦功能（BTS） 触发功能 第三⽅ 合并 单独合并，QP决 定是否并⾏载⼊ 根据BTS概率决定 是否并⼊核⼼功能 外联，触发后 加载内容 按第三⽅优先级确定载 ⼊⽅式 • 业务决定载⼊优先级
63. 实战 - SRP优化 精简（minify） 延迟 预加载 旧 系 统 优 化 1. 减少DNS查询 1. 宝⻉图⽚域名从8个缩减为4个 2. Sprite固定在⼏个域名内 2. 减少请求数 1. 合并，清理CSS/Sprite 2. 合并，清理JS 3. 调整请求位置 1. JS放在最后 2. 对⻚⾯做⽆倾⼊兼容 3. 按需加载BTS模块 4. 异步加载触发模块 5. 异步加载第三⽅模块 ?
64. 实战 – SRP优化 • 提前获取重要信息（P4P） – KISSY.getScript(‘${p4p_request}’);
65. 实战 – SRP优化 • 提前获取重要信息（P4P） – KISSY.getScript(‘${p4p_request}’);
66. 实战 - SRP优化 精简（minify） 延迟 预加载 旧 系 统 优 化 1. 减少DNS查询 1. 宝⻉图⽚域名从8个缩减为4个 2. Sprite固定在⼏个域名内 2. 减少请求数 1. 合并，清理CSS/Sprite 2. 合并，清理JS 3. 调整请求位置 1. JS放在最后 2. 对⻚⾯做⽆倾⼊兼容 3. 异步加载触发模块 4. 按需加载BTS模块 1. 预加载静态资源 2. 预请求重要数据
67. 实战 - SRP优化 精简（minify） 延迟 预加载 旧 系 统 优 化 1. 减少DNS查询 1. 宝⻉图⽚域名从8个缩减为4个 2. Sprite固定在⼏个域名内 2. 减少请求数 1. 合并，清理CSS/Sprite 2. 合并，清理JS 3. 调整请求位置 1. JS放在最后 2. 对⻚⾯做⽆倾⼊兼容 3. 异步加载触发模块 4. 按需加载BTS模块 1. 预加载静态资源 2. 预请求重要数据
68. 实战 - SRP优化 精简（minify） 延迟 预加载 旧 系 统 优 化 1. 减少DNS查询 1. 宝⻉图⽚域名从8个缩减为4个 2. Sprite固定在⼏个域名内 2. 减少请求数 1. 合并，清理CSS/Sprite 2. 合并，清理JS 3. 调整请求位置 1. JS放在最后 2. 对⻚⾯做⽆倾⼊兼容 3. 异步加载触发模块 4. 按需加载BTS模块 1. 预加载静态资源 2. 预请求重要数据
69. 实战 – 全新项⺫ • 把性能作为⼀个功能点进⾏设计 – Performance as a feature • 提前埋⼊监控数据 • 不要害怕使⽤新技术，但要谨慎测试
70. 实战 – 全新项⺫ • ⾃动化部署（bash+ant） • http://f2e.us/slides/bangv3.html
71. 实战 - 持续优化 • 让整个团队认可前端优化 • ⼩组成员达成共识，分⼯逐步优化
72. 实战 - 持续优化 • 浏览器份额
73. 实战 - 持续优化 • onDOMReady/onload
74. 实战 - 持续优化
75. 实战 – 持续优化 • ⽂件⼤⼩
76. What’s Next? • 更多使⽤LocalStorage • 全站multi flush • 更详尽的性能统计/分析 – boomerang
77. Resources • http://stevesouders.com • http://www.webperformancetoday.com/ • http://calendar.perfplanet.com/2010/