More Related Content Similar to 排行榜V3项目总结 (20) 排行榜V3项目总结2. Agenda
• 设计之初
• 前端“数据流”
• 持续优化
• 开发和维护
• 下一步
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片段
13. 节点太多?
• 减少HTML大小
– 集群内传输时间
– Gzip压力
– 网络传输时间
• 减少内存占用
– 首屏的渲染速度,分开整体的开销
– 滚动时的浏览器响应
– JavaScript: “the good looking girl that comes at
the party with an ugly boyfriend called DOM”
17. 优化数据
首屏 满屏 比例
请求数 29 453 15.62
总大小 129K 1.4M 10.85
总节点 1164 13819 11.87
指标 首屏数值
首屏 7K
首屏cdn请求 2(combo)
29. 图片排序
• 刚开始:
– 姐姐,这个能做成纯数字的嘛?
– 不好吧,就1-15,你就切15张图好了。。
– =_=! 好吧。。
• 后来:
– 姐姐,这个可以排到90嘛。。
– 你不是说很麻烦吗?
– 我做成可以计算偏移量的了。
– 理论上可以支持任何位数。。
– COOL!挺好的,加上吧。
– 哦耶!~
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!