Web性能優(yōu)化-瀏覽器存儲(chǔ)

Cookie

Cookie.png
  • 因?yàn)镠TTP請(qǐng)求無(wú)狀態(tài)，所以需要cookie去維持客戶端狀態(tài),
  • 過(guò)期時(shí)間 expire
  • cookie的生成方式
    1.http response header中的set-cookie
    2.js中可以通過(guò)document.cookie可以讀寫cookie
  • 僅僅作為瀏覽器存儲(chǔ)（大小4KB左右，能力被localstorage替代）
  • cookie中在相關(guān)域名下面 —— cdn的流量損耗
  • httponly (防止被黑客利用)

會(huì)員卡的例子. 去健身房中,剛開(kāi)始的會(huì)開(kāi)卡, 然后以后不用每次去健身房的時(shí)候就重新再驗(yàn)證一遍身份, 拿著會(huì)員卡就知道這個(gè)人是會(huì)員, 當(dāng)然會(huì)員卡也有過(guò)期時(shí)間 .

Cookie 的兩個(gè)作用:

  1. 用于維護(hù)用戶的狀態(tài)
  2. 瀏覽器存儲(chǔ)

LocalStorage

  • HTML5設(shè)計(jì)出來(lái)專門用于瀏覽器存儲(chǔ)
  • 大小為5M左右
  • 僅在客戶端使用, 不和服務(wù)器端進(jìn)行通信
  • 接口封裝較好
  • 瀏覽器本地緩存方案

SessionStorage

  • 會(huì)話級(jí)別的瀏覽器存儲(chǔ)
  • 大小為5M左右
  • 僅在客戶端使用，不和服務(wù)端進(jìn)行通信
  • 接口封裝較好
  • 對(duì)于表單信息的維護(hù)

IndexedDB(用的很少)

  • IndexedDB 是一種低級(jí)API，用于客戶端存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)。該API使用索引來(lái)實(shí)現(xiàn)對(duì)該數(shù)據(jù)的高性能搜索。雖然 Web Storage 對(duì)于存儲(chǔ)較少量的數(shù)據(jù)很有用，但對(duì)于存儲(chǔ)更大量的結(jié)構(gòu)化數(shù)據(jù)來(lái)說(shuō)，這種方法不太有用。IndexedDB提供了一個(gè)解決方案。
  • 為應(yīng)用創(chuàng)建離線版本

CDN域名要和主站區(qū)分開(kāi), 要不會(huì)在cdn 域名下邊攜帶cookie ,產(chǎn)生帶寬資源浪費(fèi).

PWA

PWA (Progressive Web Apps) 是一種 Web App 新模型，并不是具體指某一種前沿的技術(shù)或者某一個(gè)單一的知識(shí)點(diǎn)，我們從英文縮寫來(lái)看就能看出來(lái)，這是一個(gè)漸進(jìn)式的 Web App，是通過(guò)一系列新的 Web 特性，配合優(yōu)秀的 UI 交互設(shè)計(jì)，逐步的增強(qiáng) Web App 的用戶體驗(yàn)。
三個(gè)優(yōu)勢(shì):

  1. 可靠：在沒(méi)有網(wǎng)絡(luò)的環(huán)境中也能提供基本的頁(yè)面訪問(wèn)，而不會(huì)出現(xiàn)“未連接到互聯(lián)網(wǎng)”的頁(yè)面。
  2. 快速：針對(duì)網(wǎng)頁(yè)渲染及網(wǎng)絡(luò)數(shù)據(jù)訪問(wèn)有較好優(yōu)化。
  3. 融入（Engaging）：應(yīng)用可以被增加到手機(jī)桌面，并且和普通應(yīng)用一樣有全屏、推送等特性。
    安裝之后可以運(yùn)行評(píng)測(cè)當(dāng)前打開(kāi)網(wǎng)頁(yè)的支持分?jǐn)?shù)

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

Service Worker

Service Worker 是一個(gè)腳本，瀏覽器獨(dú)立于當(dāng)前網(wǎng)頁(yè)，將其在后臺(tái)運(yùn)行,為實(shí)現(xiàn)一些不依賴頁(yè)面或者用戶交互的特性打開(kāi)了一扇大門。在未來(lái)這些特性將包括推送消息,背景后臺(tái)同步， geofencing（地理圍欄定位），但它將推出的第一個(gè)首要特性，就是攔截和處理網(wǎng)絡(luò)請(qǐng)求的能力，包括以編程方式來(lái)管理被緩存的響應(yīng)。


ServiceWorker.png

能讓應(yīng)用離線, 更好的一個(gè)緩存機(jī)制.
緩存內(nèi)容在Cache Storage 中.
Https才能生成

運(yùn)行命令為
chrome://serviceworker-internals/
chrome://inspect/#service-workers

一個(gè)一個(gè)來(lái):先說(shuō)cookie

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

在js中這么寫 然后看一下application標(biāo)簽中的值.


cookie.png

成功設(shè)置cookie,
本身 cookie以字符串形式 存儲(chǔ)

image.png

那么把這個(gè)頁(yè)面關(guān)閉之后再看


重新打開(kāi)的cookie.png

cookie 默認(rèn)失效時(shí)間就是當(dāng)前這個(gè)網(wǎng)頁(yè)關(guān)了就沒(méi)了.

目前cookie中看幾大電商的網(wǎng)頁(yè)里, 主要還是存用戶的信息, 主要是各種的id . cookie 主要用的是跟服務(wù)器的之間交互驗(yàn)證的過(guò)程, 本身cookie 能存的內(nèi)容有限, 不是為了大規(guī)模存儲(chǔ)數(shù)據(jù)而設(shè)計(jì)的.

接著是LocalStorage

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

效果為:
image.png

利用LocalStorage實(shí)現(xiàn)一個(gè)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

創(chuàng)建一個(gè)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:"三國(guó)演義",author:"羅貫中",isbn:123});
            store.put({title:"水滸裝",author:"施耐庵",isbn:234});
            store.put({title:"西游記",author:"吳承恩",isbn:345});
            store.put({title:"紅樓夢(mèng)",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');
        //獲取當(dāng)前indexedDB中的數(shù)據(jù) ///查詢
//        store.get(456).onsuccess = function(e){
//            console.log(e.target.result);
//        }
        //添加一條書(shū)的記錄 //添加
//        store.add({
//            title:"論語(yǔ)",
//            author:"孔子",
//            isbn:666
//        })
        //刪除
//        store.delete(456);
        //更新
        store.put({title:"紅樓夢(mèng)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);

效果為
創(chuàng)建并刪除一個(gè)indexDB的過(guò)程.Note: 試了一下 如果不先close db , 就不能刪除這個(gè)db,
代碼里包含了 對(duì)book的增刪改查操作.

Service Worker

這東西主要就是把資源存在cache Storage中 , 先看下淘寶離線的時(shí)候的狀態(tài) .


淘寶離線.png

也就是用這個(gè)保證了在沒(méi)有網(wǎng)絡(luò)的情況下, 可以給用戶看見(jiàn)一些東西 ,而不是一個(gè)頁(yè)面中啥都沒(méi)有告訴用戶當(dāng)前網(wǎng)絡(luò)環(huán)境有問(wèn)題
注冊(cè)Service Worker 是用navigator.serviceworker 獲取到
這里就不寫代碼了

總結(jié)一下

cookie : 特點(diǎn)小. 跟服務(wù)器驗(yàn)證, 主要用來(lái)用戶的登錄信息存儲(chǔ), 各種id.CDN域名不要有cookie

localstorage , 做緩存策略 , 更好的首屏渲染.
SessionStorage 會(huì)話層,頁(yè)面關(guān)閉就清空 ,
indexDB 大規(guī)模數(shù)據(jù) 結(jié)構(gòu)化 .性能優(yōu)化
PWA標(biāo)準(zhǔn), 評(píng)測(cè)軟件, 關(guān)注哪些監(jiān)測(cè)點(diǎn). 也就是需要做的性能優(yōu)化的部分.
其中Service Worker就是其中一部分, 主要用離線運(yùn)用.

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容