Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
淘宝排行榜 V3 项目总结
Search
Frank Xu
September 01, 2010
Programming
0
120
淘宝排行榜 V3 项目总结
Frank Xu
September 01, 2010
Tweet
Share
More Decks by Frank Xu
See All by Frank Xu
Proxy Pattern
yyfrankyy
0
85
微信读书阅读器架构
yyfrankyy
2
2.2k
Watcher - EventBus Reinvented
yyfrankyy
0
150
SQLite 调优实践
yyfrankyy
0
130
FtnApp 的缩略图实践
yyfrankyy
0
50
JSDoc 的使用
yyfrankyy
0
140
交易平台化(前端)
yyfrankyy
0
170
淘宝搜索前端优化
yyfrankyy
0
170
Other Decks in Programming
See All in Programming
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
730
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
5.2k
技術同人誌をMCP Serverにしてみた
74th
1
650
ニーリーにおけるプロダクトエンジニア
nealle
0
840
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
910
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Optimizing for Happiness
mojombo
379
70k
Site-Speed That Sticks
csswizardry
10
690
Designing for Performance
lara
610
69k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
Transcript
排⾏榜V3项⺫总结 ⽂河(@yyfrankyy) 2010-09
Agenda • 设计之初 • 前端“数据流” • 持续优化 • 开发和维护 •
下⼀步
设计之初 • 巨⼤的数据量 – 排序如此折腾 – ⼆级榜单*对应三级榜单*6种排序
None
如何应对? • 异步?这个必须有! • 设计(控制)瀑布图 • 维护⾃动化,使得持续优化成为可能 – 模块化+适当的脚本是⺫前最佳的解决⽅案 •
先做最重要的(80/20) – KISSY Loader使⽤调研 – 延迟请求本地实现,设计请求接⼝,约定延迟回调 – 完成部分基础样式,⼆级榜单模块 – 懒加载事件流,整合Loader,Switchable,优化滚动组件 – 继续完成其他内容,调教(戏)IE – 项⺫尾声,改Bug,持续重构 • 减少Hack,减少reflow的机会 • Loading细节优化 • 交互细节视觉细节完善
前端“数据流” • 瀑布图,把握每⼀个请求 – HTML,永远放在第⼀位(Render First) – 控制渲染顺序,把握展⽰的每⼀秒。 1. HEADER
2. 热榜 3. 其他榜单占位 4. 导航 5. ⻚尾 6. 实时成交(异步)
None
依赖延迟 • ⽤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) •
更多
None
延迟加载优化 • 滚动加载(复杂度从O(n)降到O(1))
延迟加载优化 • 滚动加载(复杂度从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 – 串⾏和并⾏公⽤⼀套系统
PHP Mock • 本地DEMO实现⼀个简单的quickling – 串⾏和并⾏公⽤⼀套系统
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