客户端储存与JavaScript性能优化

客户端存储与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性能优化：

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.

客户端储存与JavaScript性能优化

热点推荐