Web性能优化-浏览器存储

Cookie

Cookie.png

• 因为HTTP请求无状态，所以需要cookie去维持客户端状态,
• 过期时间 expire
• cookie的生成方式
  1.http response header中的set-cookie
  2.js中可以通过document.cookie可以读写cookie
• 仅仅作为浏览器存储（大小4KB左右，能力被localstorage替代）
• cookie中在相关域名下面 —— cdn的流量损耗
• httponly (防止被黑客利用)

会员卡的例子. 去健身房中,刚开始的会开卡, 然后以后不用每次去健身房的时候就重新再验证一遍身份, 拿着会员卡就知道这个人是会员, 当然会员卡也有过期时间 .

Cookie 的两个作用:

1. 用于维护用户的状态
2. 浏览器存储

LocalStorage

• HTML5设计出来专门用于浏览器存储
• 大小为5M左右
• 仅在客户端使用, 不和服务器端进行通信
• 接口封装较好
• 浏览器本地缓存方案

SessionStorage

• 会话级别的浏览器存储
• 大小为5M左右
• 仅在客户端使用，不和服务端进行通信
• 接口封装较好
• 对于表单信息的维护

IndexedDB(用的很少)

• IndexedDB 是一种低级API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。IndexedDB提供了一个解决方案。
• 为应用创建离线版本

CDN域名要和主站区分开, 要不会在cdn 域名下边携带cookie ,产生带宽资源浪费.

PWA

PWA (Progressive Web Apps) 是一种 Web App 新模型，并不是具体指某一种前沿的技术或者某一个单一的知识点，我们从英文缩写来看就能看出来，这是一个渐进式的 Web App，是通过一系列新的 Web 特性，配合优秀的 UI 交互设计，逐步的增强 Web App 的用户体验。
三个优势:

1. 可靠：在没有网络的环境中也能提供基本的页面访问，而不会出现“未连接到互联网”的页面。
2. 快速：针对网页渲染及网络数据访问有较好优化。
3. 融入（Engaging）：应用可以被增加到手机桌面，并且和普通应用一样有全屏、推送等特性。
   安装之后可以运行评测当前打开网页的支持分数

lighthouse （下载地址：https://lavas.baidu.com/doc-assets/lavas/vue/more/downloads/lighthouse_2.1.0_0.zip）

Service Worker

Service Worker 是一个脚本，浏览器独立于当前网页，将其在后台运行,为实现一些不依赖页面或者用户交互的特性打开了一扇大门。在未来这些特性将包括推送消息,背景后台同步， geofencing（地理围栏定位），但它将推出的第一个首要特性，就是拦截和处理网络请求的能力，包括以编程方式来管理被缓存的响应。

ServiceWorker.png

能让应用离线, 更好的一个缓存机制.
缓存内容在Cache Storage 中.
Https才能生成

运行命令为
chrome://serviceworker-internals/
chrome://inspect/#service-workers

一个一个来:先说cookie

    document.cookie = "userName=Ethan";
    document.cookie = "gender=male"

在js中这么写 然后看一下application标签中的值.

cookie.png

成功设置cookie,
本身 cookie以字符串形式 存储

image.png

那么把这个页面关闭之后再看

重新打开的cookie.png

cookie 默认失效时间就是当前这个网页关了就没了.

目前cookie中看几大电商的网页里, 主要还是存用户的信息, 主要是各种的id . cookie 主要用的是跟服务器的之间交互验证的过程, 本身cookie 能存的内容有限, 不是为了大规模存储数据而设计的.

接着是LocalStorage

if(window.localStorage){
        localStorage.setItem("name","Ethan");
        localStorage.setItem("gender","Male")
    }

效果为: image.png

利用LocalStorage实现一个js文件缓存效果. js代码如下

var cacheJs = localStorage.getItem("cacheJs");

    if(cacheJs){
        eval(cacheJs);
    }else{
        var xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.onreadystatechange = callback;
        xmlHttpRequest.onprogress = progressCallback;
        xmlHttpRequest.open("GET","./cache.js",true);
        xmlHttpRequest.send();
        function callback(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                var jsContent = this.response;
                eval(jsContent);
                localStorage.setItem("cacheJs",jsContent);
            }else{
                console.log("Request was unsuccessful:" + xmlHttpRequest.status);
            }
        }

        function progressCallback(e){
            e = e || event;
            if(e.lengthComputable){
                console.log("Received " + e.loaded + " of " + e.total + " bytes");
            }
        }
    }

效果为 第一次将js 文件存到localstorage 中
第二次读取即从localstorage 中读

indexedDB

创建一个indexedDB

function openIndexDb(name,callback){
        var request = window.indexedDB.open(name);
        request.onerror = function(e){
            console.log("open indexdb error");
        }
        request.onsuccess= function(e){
            myDB.db = e.target.result;
            callback && callback();
        }
        //from no db to firstVersion . firstVersion to SecondVersion
        request.onupgradeneeded = function (e) {
            var store = e.currentTarget.result.createObjectStore("books",{keyPath:"isbn"});
            console.log(store);
            store.createIndex("by_title",'title',{unique:true});
            store.createIndex("by_author","author");
            store.put({title:"三国演义",author:"罗贯中",isbn:123});
            store.put({title:"水浒装",author:"施耐庵",isbn:234});
            store.put({title:"西游记",author:"吴承恩",isbn:345});
            store.put({title:"红楼梦",author:"曹雪芹",isbn:456});
        }
    }
    var myDB = {
        name:"testDB",
        version: "1",
        db : null
    }
    openIndexDb(myDB.name,function(){
        console.log("successfully open indexDB ");
//        myDB.db.close();
//        deleteDB(myDB.name);

    })
    function addBook(db){

        var transaction = db.transaction("books",'readwrite');
        var store = transaction.objectStore('books');
        //获取当前indexedDB中的数据 ///查询
//        store.get(456).onsuccess = function(e){
//            console.log(e.target.result);
//        }
        //添加一条书的记录 //添加
//        store.add({
//            title:"论语",
//            author:"孔子",
//            isbn:666
//        })
        //删除
//        store.delete(456);
        //更新
        store.put({title:"红楼梦1",author:"Ethan",isbn:456});

    }

    function deleteDB(name){
        var deleteDb = window.indexedDB.deleteDatabase(name);
        deleteDb.onsuccess = function() {
            console.log('complete');
        };

    }

    setTimeout(function(){
        addBook(myDB.db)
    },3000);

效果为
创建并删除一个indexDB的过程.Note: 试了一下 如果不先close db , 就不能删除这个db,
代码里包含了 对book的增删改查操作.

Service Worker

这东西主要就是把资源存在cache Storage中 , 先看下淘宝离线的时候的状态 .

淘宝离线.png

也就是用这个保证了在没有网络的情况下, 可以给用户看见一些东西 ,而不是一个页面中啥都没有告诉用户当前网络环境有问题
注册Service Worker 是用navigator.serviceworker 获取到
这里就不写代码了

总结一下

cookie : 特点小. 跟服务器验证, 主要用来用户的登录信息存储, 各种id.CDN域名不要有cookie

localstorage , 做缓存策略 , 更好的首屏渲染.
SessionStorage 会话层,页面关闭就清空 ,
indexDB 大规模数据 结构化 .性能优化
PWA标准, 评测软件, 关注哪些监测点. 也就是需要做的性能优化的部分.
其中Service Worker就是其中一部分, 主要用离线运用.