將js和css檔案裝入localStorage加速程式執行

標籤：style   blog   http   io   color   ar   os   sp   java   

首先感謝某某作者寫的文章：http://www.jb51.net/article/12793.htm

直接上代碼，注意檔案名稱為env.js

//需要引用別的js的時候，就加上如Env.require("cookie.js")，或Env.require("/common/cookie.js")，是用相對路徑還是絕對路徑就看喜好了。//Env.require可用在頁面模板中，也可用在js檔案中，但一定要保證執行時env.js被顯式引入。//多次Env.require同一個js（不管用相對還是絕對），只有第一次會載入，所以不會重複。//程式最後發行的版本，用於作為緩衝鍵的首碼，快速更新緩衝var envLastVer = ‘2014_11_15_13_47‘;//用於存放通道名稱及通訊對象的類，這樣可以通過不同通道名稱來區分不同的通訊對象  function HttpRequestObject() {    this.chunnel = null;    this.instance = null;}//通訊處理類，可以靜態引用其中的方法  var Request = new function () {    //通訊類的緩衝      this.httpRequestCache = new Array();    //建立新的通訊對象     this.createInstance = function () {        var instance = null;        if (window.XMLHttpRequest) {            //mozilla              instance = new XMLHttpRequest();            //有些版本的Mozilla瀏覽器處理伺服器返回的未包含XML mime-type頭部資訊的內容時會出錯。            //因此，要確保返回的內容包含text/xml資訊              if (instance.overrideMimeType) {                instance.overrideMimeType = "text/xml";            }        }        else if (window.ActiveXObject) {            //IE              var MSXML = [‘MSXML2.XMLHTTP.5.0‘, ‘Microsoft.XMLHTTP‘, ‘MSXML2.XMLHTTP.4.0‘, ‘MSXML2.XMLHTTP.3.0‘, ‘MSXML2.XMLHTTP‘];            for (var i = 0; i < MSXML.length; i++) {                try {                    instance = new ActiveXObject(MSXML[i]);                    break;                }                catch (e) {                }            }        }        return instance;    }    /**      * 擷取一個通訊對象      * 若沒指定通道名稱，則預設通道名為"default"      * 若緩衝中不存在需要的通訊類，則建立一個，同時放入通訊類緩衝中      * @param _chunnel：通道名稱，若不存在此參數，則預設為"default"      * @return 一個通訊對象，其存放於通訊類緩衝中      */    this.getInstance = function (_chunnel) {        var instance = null;        var object = null;        if (_chunnel == undefined)//沒指定通道名稱          {            _chunnel = "default";        }        var getOne = false;        for (var i = 0; i < this.httpRequestCache; i++) {            object = HttpRequestObject(this.httpRequestCache[i]);            if (object.chunnel == _chunnel) {                if (object.instance.readyState == 0 || object.instance.readyState == 4) {                    instance = object.instance;                }                getOne = true;                break;            }        }        if (!getOne) //對象不在緩衝中，則建立          {            object = new HttpRequestObject();            object.chunnel = _chunnel;            object.instance = this.createInstance();            this.httpRequestCache.push(object);            instance = object.instance;        }        return instance;    }    /**      * 用戶端向服務端發送請求      * @param _url:請求目的      * @param _data:要發送的資料      * @param _processRequest:用於處理返回結果的函數，其定義可以在別的地方，需要有一個參數，即要處理的通訊對象      * @param _chunnel:通道名稱，預設為"default"      * @param _asynchronous:是否非同步處理，預設為true,即非同步處理      */    this.send = function (_url, _data, _processRequest, _chunnel, _asynchronous) {        if (_url.length == 0 || _url.indexOf("?") == 0) {            alert("由於目的為空白，請求失敗，請檢查！");            return;        }        if (_chunnel == undefined || _chunnel == "") {            _chunnel = "default";        }        if (_asynchronous == undefined) {            _asynchronous = true;        }        var instance = this.getInstance(_chunnel);        if (instance == null) {            alert("瀏覽器不支援ajax，請檢查！")            return;        }        if (_asynchronous == true && typeof (_processRequest) == "function") {            instance.onreadystatechange = function () {                if (instance.readyState == 4) // 判斷對象狀態                  {                    if (instance.status == 200) // 資訊已經成功返回，開始處理資訊                      {                        _processRequest(instance);                    }                    else {                        alert("您所請求的頁面有異常，請檢查！");                    }                }            }        }        //_url加一個時刻改變的參數，防止由於被瀏覽器緩衝後同樣的請求不向伺服器發送請求          if (_url.indexOf("?") != -1) {            _url += "&requestTime=" + (new Date()).getTime();        }        else {            _url += "?requestTime=" + (new Date()).getTime();        }        if (_data.length == 0) {            instance.open("GET", _url, _asynchronous);            instance.send(null);        }        else {            instance.open("POST", _url, _asynchronous);            instance.setRequestHeader("Content-Length", _data.length);            instance.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");            instance.send(_data);        }        if (_asynchronous == false && typeof (_processRequest) == "function") {            _processRequest(instance);        }    }}var Env = new function () {    this.funcList = new Array();    this.cssList = new Array();    this.envPath = null;    this.getPath = function () {        this.envPath = document.location.pathname;        this.envPath = this.envPath.substring(0, this.envPath.lastIndexOf("/") + 1);        var _scripts = document.getElementsByTagName("script");        var _envPath = null;        var _scriptSrc = null;        for (var i = 0; i < _scripts.length; i++) {            _scriptSrc = _scripts[i].getAttribute("src");            if (_scriptSrc && _scriptSrc.indexOf("env.js") != -1) {                break;            }        }        if (_scriptSrc != null) {            if (_scriptSrc.charAt(0) == ‘/‘) {                this.envPath = _scriptSrc.substr(0, _scriptSrc.length - 6);            }            else {                this.envPath = this.envPath + _scriptSrc.substr(0, _scriptSrc.length - 6);            }        }    }    this.getPath();    //執行返回的指令碼內容，_language可以為空白，預設為JavaScript    this.runScript = function (_script, _language) {        //為相容firefox做判斷          if (_language != undefined) {            if (window.execScript)                window.execScript(_script, _language);            else                window.eval(_script, _language);        }        else {            if (window.execScript)                window.execScript(_script);            else                window.eval(_script);        }    }    /**      * 按需擷取需要的js檔案    * @param _cacheKey:緩衝鍵，全域唯一    * @param _jsName：js檔案路徑，若為相對路徑，則是對應env.js的相對路徑，也可以用絕對路徑      * @param _language:對返回函數進行處理的語言，預設為JScript，可不填      */    this.requireJs = function (_cacheKey, _jsName, _language) {        var _absJsName = null;        if (_jsName.charAt(0) == ‘/‘)            _absJsName = _jsName;        else            _absJsName = this.envPath + _jsName;        if (!Env.funcList[_absJsName]) {            Env.funcList[_absJsName] = "finished";            var processJs = function (_instance) {                localStorage.setItem(envLastVer + _cacheKey, _instance.responseText);    //快取檔案                this.runScript(_instance.responseText, _language);   //運行檔案            }            if (_cacheKey) {                var cacheFile = localStorage.getItem(envLastVer + _cacheKey);                if (cacheFile) { this.runScript(cacheFile); }                else {                    Request.send(_absJsName, "", processJs, "", false);                }            } else {                Request.send(_absJsName, "", processJs, "", false);            }        }    }    //在頁面上傳入css    this.runCss = function (_css) { document.write(‘<style type="text/css">‘ + _css + ‘</style>‘); }    //按需擷取需要的css檔案    //優點：支援緩衝、圖片路徑不用重新計算    this.requireCss = function (_cacheKey, _cssName) {        var _absCssName = null;        if (_cssName.charAt(0) == ‘/‘)            _absCssName = _cssName;        else            _absCssName = this.envPath + _cssName;        var processCss = function (_instance) {            localStorage.setItem(envLastVer + _cacheKey, _instance.responseText);            this.runCss(_instance.responseText);        }        if (_cacheKey) {            var cacheFile = localStorage.getItem(envLastVer + _cacheKey);            if (cacheFile) { this.runCss(cacheFile); }            else {                Request.send(_absCssName, "", processCss, "", false);            }        } else {            Request.send(_absCssName, "", processCss, "", false);        }    }}

 下面是調用方法：

        Env.requireJs(‘jquery1.10.2‘, "jquery.mobile-1.4.5/jquery.min.js");        Env.requireCss(‘jquerymobile1.4.5css‘, "jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css");        Env.requireJs(‘jquerymobile1.4.5‘, "jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js");        Env.requireCss(‘mobiscroll.custom-2.6.2.min.css‘, "mobiscroll.2.6/css/mobiscroll.custom-2.6.2.min.css");        Env.requireJs(‘mobiscroll.custom-2.6.2.min.js‘, "mobiscroll.2.6/js/mobiscroll.custom-2.6.2.min.js");

通過FirefoxF12觀察，發現上面的指令碼第一次會被載入，後面將會直接從localstorage中讀取，節省了很多，將js用於瀏覽器後，也節省了很多頻寬。不過第一次載入還是有些慢的，畢竟還是有那麼多資料。

將js和css檔案裝入localStorage加速程式執行