前端性能優化–緩存

JS文件放尾部，CSS文件放頭部等，這些基本的優化點仍是能夠作到，可是有時候遇到網速慢的狀況，會出現一段時間的白屏，從用戶體驗的角度來講，仍是有提高的空間。 根據移動站點的特性，已經用戶對頁面的期待看來，用戶在剛打開頁面的時候能夠接受舊的東西。 在加載完js等資源文件時能夠更新新的內容。這樣，就能夠儘量快的展現數據，而更新數據等邏輯能夠放到後面處理。 在移動站點的優化時，能夠有如下幾種方案，利用localstorage來作緩存。

1、實時性要求高的

一、第一次加載數據，渲染，緩存到localstorage。


二、第二次用戶訪問的時候直接讀取緩存，渲染。

三、正常邏輯，拉取數據。這裏能夠分爲兩種，拉取後又渲染一次頁面，本地存儲；不渲染，直接存儲，下次渲染。

window._cacheModule = {  
    write: function(key){  
        var ret = this.getCacheData(key);  
        if(!ret) return false;  
        document.write(ret);  
        return true;  
    },  
    getCacheData: function(key){  
        if(!window.localStorage) return false;  
        try{  
            var str = localStorage.getItem(key);  
            var item = JSON.parse(str);  
        }catch(e){  
            item = false;  
        }  
        return item;  
    }  
};  

讀緩存

if(_cacheModule){  
    var ret = _cacheModule.write('_forum_my_followed');  
}