SlideShare uma empresa Scribd logo
1 de 50
2010-06-03
 
为什么要把数据存储在客户端 ,[object Object],[object Object],[object Object],[object Object],[object Object]
目前主要的存储方式 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
主流浏览器的支持情况 注: Y  支持  N   不支持  y   需要安装插件
Cookie ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],写 cookie 得拼 RP
Cookie
Flash Share Object ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Flash Share Object
Flash Share Object ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Flash Share Object Demo
User Data
User Data ,[object Object],[object Object],[object Object],[object Object]
User Data Demo
Dom Storage ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Dom Storage ,[object Object]
Dom Storage ,[object Object]
Dom Storage Demo
Window.name ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Window.name Demo
Silverlight ,[object Object],[object Object],[object Object],[object Object]
Silverlight Demo
Google Gears
Google Gears ,[object Object],[object Object],[object Object],[object Object],[object Object]
Google Gears Demo
Google Gears
Open DataBase ,[object Object],[object Object],[object Object],[object Object]
Open DataBase Demo
Application Cache ,[object Object],[object Object],<html manifest=”foo.manifest”> text/cache-manifest 当前支持的浏览器: Firefox  、 Chrome 、 Safari
Application Cache Demo
 
 
客户端计算 ,[object Object]
现在
客户端计算 ,[object Object],[object Object],[object Object],[object Object],[object Object],JavaScriptCore SpiderMonkey JScript V8
HTMLCollection Objet ,[object Object]
HTMLCollection Objet Demo
对于我们有用的优化方法 ,[object Object],[object Object]
客户端计算 Reflow & Repaint
页面渲染过程 Reflow Repaint
Reflow & Repaint ,[object Object],[object Object]
什么时候发生 Reflow & Repaint ,[object Object],[object Object],[object Object],[object Object],[object Object]
聪明的浏览器 ,[object Object],[object Object]
Reflow & Repaint Demo
对于我们有用的优化方法 ,[object Object],[object Object],[object Object],[object Object],[object Object]
DocumentFragment ,[object Object],[object Object],var fragment = document.createDocumentFragment();  var heading = fragment.appendChild(document.createElement('h1')); heading.appendChild(document.createTextNode('Quotes by Yoda')); document. body.appendChild(fragment);
Web Workers ,[object Object],[object Object],[object Object],[object Object]
Web Workers Demo
JavaScript 性能优化 ,[object Object],[object Object],[object Object],[object Object]
 

Mais conteúdo relacionado

Mais procurados

bada-data-beautiful
bada-data-beautifulbada-data-beautiful
bada-data-beautiful
宗志 陈
 
前端静态文件部署
前端静态文件部署前端静态文件部署
前端静态文件部署
Charles Wu
 
数据库与ssd的实践与探索-2011数据库技术大会
数据库与ssd的实践与探索-2011数据库技术大会数据库与ssd的实践与探索-2011数据库技术大会
数据库与ssd的实践与探索-2011数据库技术大会
freezr
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5
Tony Deng
 
Ocean base海量结构化数据存储系统 hadoop in china
Ocean base海量结构化数据存储系统 hadoop in chinaOcean base海量结构化数据存储系统 hadoop in china
Ocean base海量结构化数据存储系统 hadoop in china
knuthocean
 
构建基于Lamp的网站架构
构建基于Lamp的网站架构构建基于Lamp的网站架构
构建基于Lamp的网站架构
Cosey Lee
 
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
areyouok
 

Mais procurados (17)

bada-data-beautiful
bada-data-beautifulbada-data-beautiful
bada-data-beautiful
 
腾讯大讲堂17 性能优化不是仅局限于后台(qzone)
腾讯大讲堂17 性能优化不是仅局限于后台(qzone)腾讯大讲堂17 性能优化不是仅局限于后台(qzone)
腾讯大讲堂17 性能优化不是仅局限于后台(qzone)
 
前端静态文件部署
前端静态文件部署前端静态文件部署
前端静态文件部署
 
Hacking Nginx at Taobao
Hacking Nginx at TaobaoHacking Nginx at Taobao
Hacking Nginx at Taobao
 
数据库与ssd的实践与探索-2011数据库技术大会
数据库与ssd的实践与探索-2011数据库技术大会数据库与ssd的实践与探索-2011数据库技术大会
数据库与ssd的实践与探索-2011数据库技术大会
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5
 
高性能队列Fqueue的设计和使用实践
高性能队列Fqueue的设计和使用实践高性能队列Fqueue的设计和使用实践
高性能队列Fqueue的设计和使用实践
 
高性能Web应用缓存架构设计浅谈
高性能Web应用缓存架构设计浅谈高性能Web应用缓存架构设计浅谈
高性能Web应用缓存架构设计浅谈
 
Ocean base海量结构化数据存储系统 hadoop in china
Ocean base海量结构化数据存储系统 hadoop in chinaOcean base海量结构化数据存储系统 hadoop in china
Ocean base海量结构化数据存储系统 hadoop in china
 
构建基于Lamp的网站架构
构建基于Lamp的网站架构构建基于Lamp的网站架构
构建基于Lamp的网站架构
 
去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验
 
PHP WEB 应用组织与结构
PHP WEB 应用组织与结构PHP WEB 应用组织与结构
PHP WEB 应用组织与结构
 
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
 
大型系统的缓存标准化之路—从主从多级重client到一体化
大型系统的缓存标准化之路—从主从多级重client到一体化大型系统的缓存标准化之路—从主从多级重client到一体化
大型系统的缓存标准化之路—从主从多级重client到一体化
 
Feed服务架构-新浪微博新员工培训议题
Feed服务架构-新浪微博新员工培训议题Feed服务架构-新浪微博新员工培训议题
Feed服务架构-新浪微博新员工培训议题
 
张铁安:Feed系统架构浅析
张铁安:Feed系统架构浅析张铁安:Feed系统架构浅析
张铁安:Feed系统架构浅析
 
Make your web faster
Make your web fasterMake your web faster
Make your web faster
 

Semelhante a 客户端存储与计算

腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨
George Ang
 
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践
longhao
 
IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》
easychen
 
赶集团购开发总结4
赶集团购开发总结4赶集团购开发总结4
赶集团购开发总结4
yangdj
 
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
 
Real time web实时信息流推送
Real time web实时信息流推送Real time web实时信息流推送
Real time web实时信息流推送
yongboy
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
agen
 
淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践
alvis-m
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
agen
 
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
Adam Lu
 
Web rtc和webstorage技术讲解
Web rtc和webstorage技术讲解Web rtc和webstorage技术讲解
Web rtc和webstorage技术讲解
吴 晓兰
 

Semelhante a 客户端存储与计算 (20)

Html5
Html5Html5
Html5
 
Web dev road map part one
Web dev road map part oneWeb dev road map part one
Web dev road map part one
 
淘宝前端技术巡礼
淘宝前端技术巡礼淘宝前端技术巡礼
淘宝前端技术巡礼
 
腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨
 
前端性能优化和自动化
前端性能优化和自动化前端性能优化和自动化
前端性能优化和自动化
 
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践
 
IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》
 
赶集团购开发总结4
赶集团购开发总结4赶集团购开发总结4
赶集团购开发总结4
 
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
 
Real time web实时信息流推送
Real time web实时信息流推送Real time web实时信息流推送
Real time web实时信息流推送
 
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
 
腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
 
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
 
Berserk js
Berserk jsBerserk js
Berserk js
 
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
 
Web rtc和webstorage技术讲解
Web rtc和webstorage技术讲解Web rtc和webstorage技术讲解
Web rtc和webstorage技术讲解
 

客户端存储与计算

Notas do Editor

  1. 其他原因 ---- 用户行为分析 ---- 客户端记录页面刷新前的数据输入
  2. 再添加一个 qq.com 的
  3. Individual 发音
  4. 例子改进 有一个曲线展示