客户端存储与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.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.