客户端储存与JavaScript性能优化
客户端存储与JavaScript性能优化客户端存储：?Cookie缺点：每个 cookies的大小不能超过4096字节 一般至多允
客户端存储与JavaScript性能优化
客户端存储：
?
Cookie缺点：每个 cookies的大小不能超过4096字节 一般至多允许每个网站使用20个 一些浏览器要求所有网站总共的cookie数不能超过300个 不能跨浏览器每次请求都会把数据发送到服务器端?? ? ? ?
优点：浏览器支持最全面和服务器交互方便
Flash Share Object优点：Key-Value存储方式 默认提供了100k，可向用户申请更大的空间 浏览器支持情况良好跨浏览器
缺点：要求浏览器安装Flash插件 Flash Player 6+ 必须在页面中加载一个flash，而且得保证flash可以正常工作
User Data特点：单个页面提供128K 每个domain提供1024K IE5.5+浏览器支持 不能跨浏览器 只能在相同路径下的不同页面间共享
Dom Storage三种形式 sessionStorage 、localStorage和globalStorage globalStorage是与localStorage类似的早期实现 sessionStorage 会话结束时就会销毁 localStorage是持久化存储 sessionStorage和localStorage总共提供了10M的存储空间
Window.nameWindow原生对象的一个属性，所有浏览器都支持 提供了2MB~~60MB的空间 只有在链接跳转时才能传递数据 可以跨页面，跨域 可以在页面的domready事件之前使用 不能够持久化
Silverlight提供了一个IsolatedStorageFile独立存储的API 默认为每个应用提供了1M的空间 跨浏览器 需要安装Silverlight插件silverlight现在的安装率已经达到了60%
Google Gears基于SQLite 默认为每个应用提供了1M的空间，可向用户申请更大的空间 需要安装GoogleGears插件 支持全文检索 Google不再打算支持此技术了
Open DatabaseHTML 5 正宗的存储方案 每个域名提供5MB的存储空间 SQL 语言的支持 事务支持
Application Cache下面是各种方式的有缺点对比已经浏览器支持情况
JavaScript性能优化：
?
?
- JavaScript 更多的时候是和 DOM 、 BOM 在协同工作
- 更多的时候是 CSS 和 DOM 让 javascript 变慢
?
HTMLCollection?Collections in the HTML DOM are assumed to be?live?meaning that they are automatically updated when the underlying document is changed.
因此对于我们有用的优化方法- 尽量减少对元素属性的访问 -- 把经常要访问的属性存储在本地变量中
- 如果要访问一组元素可以将它们存储在一个数组对象当中
?
Reflow &?Repaint- Reflow ( 回流 ) 是导致 DOM 脚本执行低效的一个关键因素。页面上任何一个结点触发 reflow ，都会导致它的子结点及祖先结点重新渲染
- Repaint( 重绘 ) 是在一个元素的外观被改变，但没有改变布局的情况下发生，如改变 visibility 、 outline 、前景色? 什么时候发生 Reflow & Repaint
- 添加，删除，更新 DOM 节点
- 通过 display: none 用隐藏 DOM 节点（导致 reflow 和重绘）或者用 visibility: hidden （只导致重绘，因为位置不变）
- 在页面移动 DOM 节点，或者使用动画
- 添加样式表，调整 style 属性
- 调整窗口大小，改变字体大小，还有滚动页面
因此对于我们有用的优化方法
- Off-Document Operations
- 批量改变样式
- 修改不可见元素 -- 如果一个元素的 display 样式被设置为 none ，即使其内容变化也不再需要重绘 (Repaint) 此元素，因为根本就不会显示此元素。 注意尽量避免不必要的 reflow
?
?
客户端存储与计算View more presentations from xiaotao ning.
