Your SlideShare is downloading. ×

排行榜V3项目总结

711

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
711
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 排行榜V3项目总结文河(@yyfrankyy) 2010-09
  • 2. Agenda• 设计之初• 前端“数据流”• 持续优化• 开发和维护• 下一步
  • 3. 设计之初• 巨大的数据量 – 排序如此折腾 – 二级榜单*对应三级榜单*6种排序
  • 4. 如何应对?• 异步?这个必须有!• 设计(控制)瀑布图• 维护自动化,使得持续优化成为可能 – 模块化+适当的脚本是目前最佳的解决方案• 先做最重要的(80/20) – KISSY Loader使用调研 – 延迟请求本地实现,设计请求接口,约定延迟回调 – 完成部分基础样式,二级榜单模块 – 懒加载事件流,整合Loader,Switchable,优化滚动组件 – 继续完成其他内容,调教(戏)IE – 项目尾声,改Bug,持续重构 • 减少Hack,减少reflow的机会 • Loading细节优化 • 交互细节视觉细节完善
  • 5. 前端“数据流”• 瀑布图,把握每一个请求 – HTML,永远放在第一位(Render First) – 控制渲染顺序,把握展示的每一秒。 1. HEADER 2. 热榜 3. 其他榜单占位 4. 导航 5. 页尾 6. 实时成交(异步)
  • 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)
  • 7. 案例:实时成交模块• 依赖:anim, switchable• 实现:ontime.js• 样式:ontime.css• 图片:scrollTrigger.png• 数据:html片段
  • 8. 依赖关系
  • 9. 调用
  • 10. 瀑布图• 全部并发
  • 11. 节点太多?• 减少HTML大小 – 集群内传输时间 – Gzip压力 – 网络传输时间• 减少内存占用 – 首屏的渲染速度,分开整体的开销 – 滚动时的浏览器响应 – JavaScript: “the good looking girl that comes at the party with an ugly boyfriend called DOM”
  • 12. 减少节点数• switchable配合eventbase的强大扩展能力 – beforeswitch: 点击后再创建panels,满足原逻辑 – switch: 创建完再请求数据,执行渲染
  • 13. 内存开销
  • 14. 案例:数码榜单
  • 15. 优化数据 首屏 满屏 比例请求数 29 453 15.62总大小 129K 1.4M 10.85总节点 1164 13819 11.87 指标 首屏数值 首屏 7K 首屏cdn请求 2(combo)
  • 16. 延迟加载优化• 滚动时计算高度 VS 提前按高度位置排序• O(n) => O(1)• 更多
  • 17. 延迟加载优化• 滚动加载(复杂度从O(n)降到O(1))
  • 18. 延迟加载优化• 延迟绑定
  • 19. 将延迟进行到底• 异步载入的模块,进一步优化(趋势图)
  • 20. 案例:趋势图模块• 他一开始,就只有一个小ICON(trigger)
  • 21. 进一步优化CSS• 渐变?
  • 22. 进一步优化CSS• 阴影?
  • 23. 进一步优化CSS• 三角和圆角 – 乔花的精彩分享
  • 24. 降级,也要优雅• IE?丑了点
  • 25. 降级,也要优雅• 没有图片?
  • 26. 图片排序• 刚开始: – 姐姐,这个能做成纯数字的嘛? – 不好吧,就1-15,你就切15张图好了。。 – =_=! 好吧。。• 后来: – 姐姐,这个可以排到90嘛。。 – 你不是说很麻烦吗? – 我做成可以计算偏移量的了。 – 理论上可以支持任何位数。。 – COOL!挺好的,加上吧。 – 哦耶!~
  • 27. 图片排序• 通过计算background-position偏移量,把不 相关的东西,变成相关的
  • 28. 开发和维护• PHP Mock数据• 前端模块化(Based on KISSY)• 构建工具
  • 29. PHP Mock• 本地DEMO实现一个简单的quickling – 串行和并行公用一套系统
  • 30. 构建工具
  • 31. 战斗尚未结束• 为了减少开发工作量,文档流都是直接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!
  • 32. • Q&A

×