淘宝排行榜 V3 项目总结

Transcript

1. 排⾏榜V3项⺫总结 ⽂河（@yyfrankyy） 2010-09
2. Agenda • 设计之初 • 前端“数据流” • 持续优化 • 开发和维护 • 下⼀步
3. 设计之初 • 巨⼤的数据量 – 排序如此折腾 – ⼆级榜单*对应三级榜单*6种排序
5. 如何应对？ • 异步？这个必须有！ • 设计（控制）瀑布图 • 维护⾃动化，使得持续优化成为可能 – 模块化+适当的脚本是⺫前最佳的解决⽅案 • 先做最重要的（80/20） – KISSY Loader使⽤调研 – 延迟请求本地实现，设计请求接⼝，约定延迟回调 – 完成部分基础样式，⼆级榜单模块 – 懒加载事件流，整合Loader，Switchable，优化滚动组件 – 继续完成其他内容，调教（戏）IE – 项⺫尾声，改Bug，持续重构 • 减少Hack，减少reflow的机会 • Loading细节优化 • 交互细节视觉细节完善
6. 前端“数据流” • 瀑布图，把握每⼀个请求 – HTML，永远放在第⼀位（Render First） – 控制渲染顺序，把握展⽰的每⼀秒。 1. HEADER 2. 热榜 3. 其他榜单占位 4. 导航 5. ⻚尾 6. 实时成交（异步）
8. 依赖延迟 • ⽤KISSY Loader解决依赖 • KISSY 1.1.5 – seed.js: lang, loader – core.js: ua, dom, event, node, cookie, json, anim, attribute, base – kissy.js: seed.js + core.js • 基于KISSY，建⽴业务seed • seed控制加载，我们要可⻅加载（scrolload）
9. 案例：实时成交模块 • 依赖：anim, switchable • 实现：ontime.js • 样式：ontime.css • 图⽚：scrollTrigger.png • 数据：html⽚段
10. 依赖关系
11. 调⽤
12. 瀑布图 • 全部并发
13. 节点太多？ • 减少HTML⼤⼩ – 集群内传输时间 – Gzip压⼒ – ⺴络传输时间 • 减少内存占⽤ – ⾸屏的渲染速度，分开整体的开销 – 滚动时的浏览器响应 – JavaScript: “the good looking girl that comes at the party with an ugly boyfriend called DOM”
14. 减少节点数 • switchable配合eventbase的强⼤扩展能⼒ – beforeswitch: 点击后再创建panels，满⾜原逻辑 – switch: 创建完再请求数据，执⾏渲染
15. 内存开销
16. 案例：数码榜单
17. 优化数据 ⾸屏 满屏 ⽐例 请求数 29 453 15.62 总⼤⼩ 129K 1.4M 10.85 总节点 1164 13819 11.87 指标 ⾸屏数值 ⾸屏 7K ⾸屏cdn请求 2（combo）
18. 延迟加载优化 • 滚动时计算⾼度 VS 提前按⾼度位置排序 • O(n) => O(1) • 更多
20. 延迟加载优化 • 滚动加载(复杂度从O(n)降到O(1))
21. 延迟加载优化 • 滚动加载(复杂度从O(n)降到O(1))
22. 延迟加载优化 • 滚动加载(复杂度从O(n)降到O(1))
23. 延迟加载优化 • 延迟绑定
24. 延迟加载优化 • 延迟绑定
25. 延迟加载优化 • 延迟绑定
26. 将延迟进⾏到底 • 异步载⼊的模块，进⼀步优化（趋势图）
27. 案例：趋势图模块 • 他⼀开始，就只有⼀个⼩ICON（trigger）
28. 进⼀步优化CSS • 渐变？
29. 进⼀步优化CSS • 阴影？
30. 进⼀步优化CSS • 三⾓和圆⾓ – 乔花的精彩分享
31. 降级，也要优雅 • IE？丑了点
32. 降级，也要优雅 • 没有图⽚？
33. 图⽚排序 • 刚开始： – 姐姐，这个能做成纯数字的嘛？ – 不好吧，就1-15,你就切15张图好了。。 – =_=! 好吧。。 • 后来： – 姐姐，这个可以排到90嘛。。 – 你不是说很⿇烦吗？ – 我做成可以计算偏移量的了。 – 理论上可以⽀持任何位数。。 – COOL!挺好的，加上吧。 – 哦耶!~
34. 图⽚排序 • 通过计算background-position偏移量，把不 相关的东⻄，变成相关的
35. 开发和维护 • PHP Mock数据 • 前端模块化（Based on KISSY） • 构建⼯具
36. PHP Mock • 本地DEMO实现⼀个简单的quickling – 串⾏和并⾏公⽤⼀套系统
37. PHP Mock • 本地DEMO实现⼀个简单的quickling – 串⾏和并⾏公⽤⼀套系统
38. PHP Mock • 本地DEMO实现⼀个简单的quickling – 串⾏和并⾏公⽤⼀套系统
39. 构建⼯具
40. 战⽃尚未结束 • 为了减少开发⼯作量，⽂档流都是直接html结构输出。 – JSON，最⼩化输出，前端也可以进⾏模板渲染(Kissy Temlates Proposal) • 资源⽆回收，数据易溢出。 – 本地存储 – dom-data（KISSY深⼊研究（2）——dom-data.js via 龚浩） – 删除script节点（仍⽆法完全回收，未被完全采⽤） • 数据⽆统计（哈波的统计指标仍然不够充分）。 – boomerang • JSONP，不像JSONP；同时异步请求存在DDos的⻛险。 – KISSY.Ajax，我等你等到我⾃⼰都想写⼀个了.. – for(;;);，防范DDos(facebook, google instant, orkut, etc.) • 单元测试/⾏为驱动测试 • 请求，响应优化 – chunking + gzip – flush first!
41. • Q&A