Enviar búsqueda
Cargar
排行榜V3项目总结
•
Descargar como PPTX, PDF
•
3 recomendaciones
•
415 vistas
Frank Xu
Seguir
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 35
Descargar ahora
Recomendados
大型互联网站性能优化
大型互联网站性能优化
丁 宇
頑皮工坊 GCP 大冒險
頑皮工坊 GCP 大冒險
onlinemad
快速搭建高性能服务端
快速搭建高性能服务端
moonbingbing
大型网站架构的发展
大型网站架构的发展
Hesey
改善Programmer生活的sql技能
改善Programmer生活的sql技能
Rack Lin
[Baidu web frontend_conference_2010]_[soso_frontend_architecture]
[Baidu web frontend_conference_2010]_[soso_frontend_architecture]
思念 青青
百度前端技术交流会--搜搜前端架构演变与优化
百度前端技术交流会--搜搜前端架构演变与优化
tiantianli
漫画背后的故事
漫画背后的故事
长洪 余
Recomendados
大型互联网站性能优化
大型互联网站性能优化
丁 宇
頑皮工坊 GCP 大冒險
頑皮工坊 GCP 大冒險
onlinemad
快速搭建高性能服务端
快速搭建高性能服务端
moonbingbing
大型网站架构的发展
大型网站架构的发展
Hesey
改善Programmer生活的sql技能
改善Programmer生活的sql技能
Rack Lin
[Baidu web frontend_conference_2010]_[soso_frontend_architecture]
[Baidu web frontend_conference_2010]_[soso_frontend_architecture]
思念 青青
百度前端技术交流会--搜搜前端架构演变与优化
百度前端技术交流会--搜搜前端架构演变与优化
tiantianli
漫画背后的故事
漫画背后的故事
长洪 余
FtnApp 的缩略图实践
FtnApp 的缩略图实践
Frank Xu
Web Developing In Search
Web Developing In Search
Frank Xu
构建可扩展的静态资源管理系统
构建可扩展的静态资源管理系统
Webrebuild
Watcher
Watcher
Frank Xu
JsDoc的使用
JsDoc的使用
Frank Xu
淘宝搜索前端优化
淘宝搜索前端优化
Frank Xu
淘宝交易平台前端重构
淘宝交易平台前端重构
Frank Xu
陈子舜-Html5 based web app
陈子舜-Html5 based web app
Webrebuild
使用NodeJS构建静态资源管理系统
使用NodeJS构建静态资源管理系统
Frank Xu
张勇 搜搜前端架构
张勇 搜搜前端架构
isnull
NoSQL误用和常见陷阱分析
NoSQL误用和常见陷阱分析
iammutex
分布式Key Value Store漫谈
分布式Key Value Store漫谈
Tim Y
分布式Key-value漫谈
分布式Key-value漫谈
lovingprince58
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化
丁 宇
分布式流数据实时计算平台 Iprocess
分布式流数据实时计算平台 Iprocess
babel_qi
Mobile Web Game 開發心得分享
Mobile Web Game 開發心得分享
世欽 陳
Full stack-development with node js
Full stack-development with node js
Xuefeng Zhang
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事
Chieh (Jack) Yu
Introduction to big data
Introduction to big data
邦宇 叶
PyCon China 2012 孙毅
PyCon China 2012 孙毅
Yi Sun
2011新版首页总结 技术篇
2011新版首页总结 技术篇
传贵 谢
淘宝双11双12案例分享
淘宝双11双12案例分享
vanadies10
Más contenido relacionado
Destacado
FtnApp 的缩略图实践
FtnApp 的缩略图实践
Frank Xu
Web Developing In Search
Web Developing In Search
Frank Xu
构建可扩展的静态资源管理系统
构建可扩展的静态资源管理系统
Webrebuild
Watcher
Watcher
Frank Xu
JsDoc的使用
JsDoc的使用
Frank Xu
淘宝搜索前端优化
淘宝搜索前端优化
Frank Xu
淘宝交易平台前端重构
淘宝交易平台前端重构
Frank Xu
陈子舜-Html5 based web app
陈子舜-Html5 based web app
Webrebuild
使用NodeJS构建静态资源管理系统
使用NodeJS构建静态资源管理系统
Frank Xu
Destacado
(9)
FtnApp 的缩略图实践
FtnApp 的缩略图实践
Web Developing In Search
Web Developing In Search
构建可扩展的静态资源管理系统
构建可扩展的静态资源管理系统
Watcher
Watcher
JsDoc的使用
JsDoc的使用
淘宝搜索前端优化
淘宝搜索前端优化
淘宝交易平台前端重构
淘宝交易平台前端重构
陈子舜-Html5 based web app
陈子舜-Html5 based web app
使用NodeJS构建静态资源管理系统
使用NodeJS构建静态资源管理系统
Similar a 排行榜V3项目总结
张勇 搜搜前端架构
张勇 搜搜前端架构
isnull
NoSQL误用和常见陷阱分析
NoSQL误用和常见陷阱分析
iammutex
分布式Key Value Store漫谈
分布式Key Value Store漫谈
Tim Y
分布式Key-value漫谈
分布式Key-value漫谈
lovingprince58
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化
丁 宇
分布式流数据实时计算平台 Iprocess
分布式流数据实时计算平台 Iprocess
babel_qi
Mobile Web Game 開發心得分享
Mobile Web Game 開發心得分享
世欽 陳
Full stack-development with node js
Full stack-development with node js
Xuefeng Zhang
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事
Chieh (Jack) Yu
Introduction to big data
Introduction to big data
邦宇 叶
PyCon China 2012 孙毅
PyCon China 2012 孙毅
Yi Sun
2011新版首页总结 技术篇
2011新版首页总结 技术篇
传贵 谢
淘宝双11双12案例分享
淘宝双11双12案例分享
vanadies10
N-layer design & development
N-layer design & development
Xuefeng Zhang
前端性能优化和自动化
前端性能优化和自动化
kaven yan
前端性能优化&测试
前端性能优化&测试
tbmallf2e
张松国 腾讯微博架构介绍08
张松国 腾讯微博架构介绍08
drewz lin
1到100000000 - 分布式大型网站的架构设计
1到100000000 - 分布式大型网站的架构设计
RolfZhang
杜增强 Flash移动开发优化技巧
杜增强 Flash移动开发优化技巧
增强 杜
Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案
美团技术团队
Similar a 排行榜V3项目总结
(20)
张勇 搜搜前端架构
张勇 搜搜前端架构
NoSQL误用和常见陷阱分析
NoSQL误用和常见陷阱分析
分布式Key Value Store漫谈
分布式Key Value Store漫谈
分布式Key-value漫谈
分布式Key-value漫谈
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化
分布式流数据实时计算平台 Iprocess
分布式流数据实时计算平台 Iprocess
Mobile Web Game 開發心得分享
Mobile Web Game 開發心得分享
Full stack-development with node js
Full stack-development with node js
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事
Introduction to big data
Introduction to big data
PyCon China 2012 孙毅
PyCon China 2012 孙毅
2011新版首页总结 技术篇
2011新版首页总结 技术篇
淘宝双11双12案例分享
淘宝双11双12案例分享
N-layer design & development
N-layer design & development
前端性能优化和自动化
前端性能优化和自动化
前端性能优化&测试
前端性能优化&测试
张松国 腾讯微博架构介绍08
张松国 腾讯微博架构介绍08
1到100000000 - 分布式大型网站的架构设计
1到100000000 - 分布式大型网站的架构设计
杜增强 Flash移动开发优化技巧
杜增强 Flash移动开发优化技巧
Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案
排行榜V3项目总结
1.
排行榜V3项目总结 文河(@yyfrankyy)
2010-09
2.
Agenda •
设计之初 • 前端“数据流” • 持续优化 • 开发和维护 • 下一步
3.
设计之初 • 巨大的数据量 –
排序如此折腾 – 二级榜单*对应三级榜单*6种排序
4.
5.
如何应对? • 异步?这个必须有! • 设计(控制)瀑布图 •
维护自动化,使得持续优化成为可能 – 模块化+适当的脚本是目前最佳的解决方案 • 先做最重要的(80/20) – KISSY Loader使用调研 – 延迟请求本地实现,设计请求接口,约定延迟回调 – 完成部分基础样式,二级榜单模块 – 懒加载事件流,整合Loader,Switchable,优化滚动组件 – 继续完成其他内容,调教(戏)IE – 项目尾声,改Bug,持续重构 • 减少Hack,减少reflow的机会 • Loading细节优化 • 交互细节视觉细节完善
6.
前端“数据流” • 瀑布图,把握每一个请求 –
HTML,永远放在第一位(Render First) – 控制渲染顺序,把握展示的每一秒。 1. HEADER 2. 热榜 3. 其他榜单占位 4. 导航 5. 页尾 6. 实时成交(异步)
7.
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) • 更多
19.
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
Descargar ahora