美文网首页
前端性能优化-通用的缓存SDK(介绍常用缓存方式)

前端性能优化-通用的缓存SDK(介绍常用缓存方式)

作者: 挨踢的菜鸟 | 来源:发表于2017-08-02 23:01 被阅读0次
    • css样式表
    • js文件

    简介技术选型

    • 发现问题
    • 业内有什么通用方案
    • 方案是否解决了我们的问题
    • 需要我们自己写方案么
    • 我们的方案需要别人的轮子妈
    • 我们要造轮子么

    sessionStorage(前端缓存技术)

    • sessionstorage
    • userData(为IE服务,有大小限制,出现很早,和受限制不受限制有关)
    • cookie(每一次发送请求都会发给浏览器,cookie都会被带过去。)
    • openDateBase(相当于一个完整的数据库,创建数据库,对表进行增删改查,条件查询,索引)
    • localstorage
    sessionstorage(临时存储神器)
    • 优点:关闭页面标签自动回收,不可以跨页面交互,注意做取值判断的时候,getitem和直接取对象的方式返回值是不一样的,一定要判断null和undefined,否则的话会有漏洞
    Paste_Image.png
    • 在同一个浏览器里,不同的两个标签打开同一个页面,sessionstrorage是不能共享的
    Paste_Image.png Paste_Image.png
    • 缺点 因为是临时,所以不能永久存储持久化的东西
    userdata

    存储限制太小,单个文件128kb,一个域名下可以保存1024kb,文件个数没有限制。在受限站点里分别是64kb和640kb

    cookie兼容性最好的本地存储
    • 优点:兼容性最好,几乎所有浏览器都支持
    • 缺点:大小有限制,而且每次发送请求,请求头里会带着cookie一起发过去,现在基本大多数登录的合法验证都是用cookie验证的。
    openDatabase没有他做不了的

    优点:就是一个完整的数据库
    缺点:可能对于前端同学来说,成本太高

    localstorage 主角
    • 优点:兼容性中等,操作简单,就是key-value形式,几乎现代的浏览器斗支持
    • 缺点: 存在大小限制,IE9/IE10不支持。

    提取资源

    提取用户第一时间看到的,提取页面第一时间执行的

    1. 初始化数据的js,或者其他文件以来的库
      2.用户进入页面需要看到页面的结构,不希望有白屏。

    相关文章

      网友评论

          本文标题:前端性能优化-通用的缓存SDK(介绍常用缓存方式)

          本文链接:https://www.haomeiwen.com/subject/joqulxtx.html