排行榜 V3 项目总结

文河（ @yyfrankyy ）2010-09

Agenda

• 设计之初• 前端“数据流”• 持续优化• 开发和维护• 下一步

设计之初• 巨大的数据量– 排序如此折腾– 二级榜单 * 对应三级榜单 *6 种排序

如何应对？• 异步？这个必须有！• 设计（控制）瀑布图• 维护自动化，使得持续优化成为可能

– 模块化 + 适当的脚本是目前最佳的解决方案• 先做最重要的（ 80/20 ）

– KISSY Loader 使用调研– 延迟请求本地实现，设计请求接口，约定延迟回调– 完成部分基础样式，二级榜单模块– 懒加载事件流，整合 Loader ， Switchable ，优化滚动组件– 继续完成其他内容，调教（戏） IE– 项目尾声，改 Bug ，持续重构

• 减少 Hack ，减少 reflow 的机会• Loading 细节优化• 交互细节视觉细节完善

前端“数据流”• 瀑布图，把握每一个请求– HTML ，永远放在第一位（ Render First）– 控制渲染顺序，把握展示的每一秒。

1. HEADER2. 热榜3. 其他榜单占位4. 导航5. 页尾6. 实时成交（异步）

依赖延迟• 用 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 ）

案例：实时成交模块• 依赖： anim, switchable• 实现： ontime.js• 样式： ontime.css• 图片： scrollTrigger.png• 数据： html 片段

依赖关系

调用

瀑布图• 全部并发

节点太多？• 减少 HTML 大小– 集群内传输时间– Gzip 压力– 网络传输时间

• 减少内存占用–首屏的渲染速度，分开整体的开销–滚动时的浏览器响应– JavaScript: “the good looking girl that comes at

the party with an ugly boyfriend called DOM”

减少节点数• switchable 配合 eventbase 的强大扩展能力– beforeswitch: 点击后再创建 panels ，满足原逻

辑– switch: 创建完再请求数据，执行渲染

内存开销

案例：数码榜单

优化数据首屏 满屏 比例

请求数 29 453 15.62

总大小 129K 1.4M 10.85

总节点 1164 13819 11.87

指标 首屏数值

首屏 7K

首屏 cdn 请求 2 （ combo ）

延迟加载优化• 滚动时计算高度 VS 提前按高度位置排序• O(n) => O(1)• 更多

延迟加载优化• 滚动加载 ( 复杂度从 O(n) 降到 O(1))

延迟加载优化• 延迟绑定

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

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

进一步优化 CSS

• 渐变？

进一步优化 CSS

• 阴影？

进一步优化 CSS

• 三角和圆角– 乔花的精彩分享

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

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

图片排序• 刚开始：– 姐姐，这个能做成纯数字的嘛？– 不好吧，就 1-15,你就切 15张图好了。。– =_=! 好吧。。

• 后来：– 姐姐，这个可以排到 90嘛。。– 你不是说很麻烦吗？– 我做成可以计算偏移量的了。– 理论上可以支持任何位数。。– COOL!挺好的，加上吧。– 哦耶 !~

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

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

PHP Mock

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

构建工具

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

• Q&A