狠狠撸

狠狠撸Share a Scribd company logo
2010-06-03
?
为什么要把数据存储在客户端 性能 Cache 资源 应用的离线功能 用户隐私数据 其他原因
目前主要的存储方式 Cookie Flash Share Object User Data Dom Storage Window.name Silverlight Google Gears Open Database Application Cache ...
主流浏览器的支持情况 注: Y  支持  N   不支持  y   需要安装插件
Cookie 每个  cookies 的大小不能超过 4096 字节 一般至多允许每个网站使用 20 个 一些浏览器要求所有网站总共的 cookie 数不能超过 300 个 不能跨浏览器 每次请求都会把数据发送到服务器端 浏览器支持最全面 和服务器交互方便 写 cookie 得拼 RP
Cookie
Flash Share Object Key-Value 存储方式 默认提供了 100k ,可向用户申请更大的空间 浏览器支持情况良好 跨浏览器 要求浏览器安装 Flash 插件 Flash Player 6+ 必须在页面中加载一个 flash ,而且得保证 flash 可以正常工作
Flash Share Object
Flash Share Object public class Fso extends Sprite { private var so:SharedObject; public function Fso() { so=SharedObject.getLocal("wenwen"); ExternalInterface.addCallback("set",_set); ExternalInterface.addCallback("get",_get); } private function _set(_key:String,_value:String):void { so.data[_key]= _value; so.data.push(); } private function _get(_key:String):String{ return so.data[_key]; } }
Flash Share Object Demo
User Data
User Data 单个页面提供 128K  每个 domain 提供 1024K IE5.5+ 浏览器支持 不能跨浏览器 只能在相同路径下的不同页面间共享
User Data Demo
Dom Storage 三种形式 sessionStorage  、 localStorage 和 globalStorage globalStorage 是与 localStorage 类似的早期实现 sessionStorage  会话结束时就会销毁  localStorage 是持久化存储 sessionStorage 和 localStorage 总共提供了 10M 的存储空间
Dom Storage W3C 对 Storage 接口的定义
Dom Storage localStorage  与  globalStorage  调用方法的差异
Dom Storage Demo
Window.name Window 原生对象的一个属性,所有浏览器都支持 提供了 2MB~~60MB 的空间 只有在链接跳转时才能传递数据 可以跨页面,跨域 可以在页面的 domready 事件之前使用 不能够持久化
Window.name Demo
Silverlight 提供了一个 IsolatedStorageFile 独立存储的 API 默认为每个应用提供了 1M 的空间 跨浏览器 需要安装 Silverlight 插件
Silverlight Demo
Google Gears
Google Gears 基于 SQLite 默认为每个应用提供了 1M 的空间,可向用户申请更大的空间 需要安装 GoogleGears 插件 支持全文检索 Google 不再打算支持此技术了
Google Gears Demo
Google Gears
Open DataBase HTML 5  正宗的存储方案 每个域名提供 5MB 的存储空间 SQL  语言的支持 事务支持
Open DataBase Demo
Application Cache 可以 Cache UI  文件( js,css,html,img.. ) 应用离线功能实现的基础 <html manifest=”foo.manifest”> text/cache-manifest 当前支持的浏览器: Firefox  、 Chrome 、 Safari
Application Cache Demo
?
?
客户端计算 Javascript  设计之初
现在
客户端计算 浏览器 单进程  多进程 JavaScript 单线程  多线程 JavaScript 运行在多个解释引擎下 JavaScript 更多的时候是和 DOM 、 BOM 在协同工作 更多的时候是 CSS 和 DOM 让 javascript 变慢 JavaScriptCore SpiderMonkey JScript V8
HTMLCollection Objet Note:?Collections in the HTML DOM are assumed to be?live?meaning that they are automatically updated when the underlying document is changed.
HTMLCollection Objet Demo
对于我们有用的优化方法 尽量减少对元素属性的访问  -- 把经常要访问的属性存储在本地变量中 如果要访问一组元素可以将它们存储在一个数组对象当中
客户端计算 Reflow & Repaint
页面渲染过程 Reflow Repaint
Reflow & Repaint Reflow ( 回流 ) 是导致 DOM 脚本执行低效的一个关键因素。页面上任何一个结点触发 reflow ,都会导致它的子结点及祖先结点重新渲染 Repaint( 重绘 ) 是在一个元素的外观被改变,但没有改变布局的情况下发生,如改变 visibility 、 outline 、前景色
什么时候发生 Reflow & Repaint 添加,删除,更新 DOM 节点 通过  display: none  用隐藏 DOM 节点(导致 reflow 和重绘)或者用  visibility: hidden  (只导致重绘,因为位置不变) 在页面移动 DOM 节点,或者使用动画 添加样式表,调整  style  属性 调整窗口大小,改变字体大小,还有滚动页面
聪明的浏览器 浏览器做了优化,不会立即执行更改 但有些操作还是会立即执行  --  (Height  Width getComputedStyle() or currentStyle)
Reflow & Repaint Demo
对于我们有用的优化方法 Off-Document Operations DocumentFragment 批量改变样式 使用 class 修改不可见元素  -- 如果一个元素的  display  样式被设置为  none ,即使其内容变化也不再需要重绘 (Repaint) 此元素,因为根本就不会显示此元素。  注意尽量避免不必要的 reflow
DocumentFragment 类似于 document 的对象 有用的占位符  暂时存放那些要一次插入文档的节点 var fragment = document.createDocumentFragment();  var heading = fragment.appendChild(document.createElement('h1')); heading.appendChild(document.createTextNode('Quotes by Yoda')); document. body.appendChild(fragment);
Web Workers Web Workers 为 JavaScript 脚本提供了一种能在后台进程中运行的方法。 一旦它被创建, Web Workers 就可以通过 postMessage() 向任务池发送任务请求,执行完之后再通过 postMessage() 返回消息给创建者指定的事件处理程序 Web Workers 进程能够在不影响用户界面的情况下处理任务,并且,它还可以使用 XMLHttpRequest 来处理 I/O 注意:通常,后台进程(包括 web workers 进程)不能对 DOM 进行操作。如果希望后台程序处理的结果能够改变 DOM ,只能通过返回消息给创建者的回调函数进行处理
Web Workers Demo
JavaScript 性能优化 尽量减少对元素属性的访问  -- 把经常要访问的属性存储在本地变量中 如果要访问一组元素可以将它们存储在一个数组对象当中 Off-Document Operations 批量改变样式
?

More Related Content

客户端存储与计算

Editor's Notes

  • #4: 其他原因 ---- 用户行为分析 ---- 客户端记录页面刷新前的数据输入
  • #8: 再添加一个 的
  • #37: Individual 发音
  • #38: 例子改进 有一个曲线展示