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. 延迟加载优化
• 延迟绑定

22. 将延迟进行到底
• 异步载入的模块，进一步优化（趋势图）

23. 案例：趋势图模块
• 他一开始，就只有一个小ICON（trigger）

24. 进一步优化CSS
• 渐变？

25. 进一步优化CSS
• 阴影？

26. 进一步优化CSS
• 三角和圆角
– 乔花的精彩分享

27. 降级，也要优雅
• IE？丑了点

28. 降级，也要优雅
• 没有图片？

29. 图片排序
• 刚开始：
– 姐姐，这个能做成纯数字的嘛？
– 不好吧，就1-15,你就切15张图好了。。
– =_=! 好吧。。
• 后来：
– 姐姐，这个可以排到90嘛。。
– 你不是说很麻烦吗？
– 我做成可以计算偏移量的了。
– 理论上可以支持任何位数。。
– COOL!挺好的，加上吧。
– 哦耶!~

30. 图片排序
• 通过计算background-position偏移量，把不
相关的东西，变成相关的

31. 开发和维护
• PHP Mock数据
• 前端模块化（Based on KISSY）
• 构建工具

32. PHP Mock
• 本地DEMO实现一个简单的quickling
– 串行和并行公用一套系统

33. 构建工具

34. 战斗尚未结束
• 为了减少开发工作量，文档流都是直接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!

35. • Q&A