客户端存储：
- 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.name
Window原生对象的一个属性，所有浏览器都支持
提供了2MB~~60MB的空间
只有在链接跳转时才能传递数据
可以跨页面，跨域
可以在页面的domready事件之前使用
不能够持久化
- Silverlight
提供了一个IsolatedStorageFile独立存储的API
默认为每个应用提供了1M的空间
跨浏览器
需要安装Silverlight插件
silverlight现在的安装率已经达到了60%
- Google Gears
基于SQLite
默认为每个应用提供了1M的空间，可向用户申请更大的空间
需要安装GoogleGears插件
支持全文检索
Google不再打算支持此技术了
- Open Database
HTML 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.