【半原創】將js和css文件裝入localStorage加速程序執行

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

直接上代碼，注意文件名為env.js

原理如下：

    一次批量加要加載的文件存入數組，采用Ajax方式異步載入各個文件，然后采用循環方式逐個執行下載下來的Js或者Css文件，如果已經被緩存（localStorage）的則省略下載過程。

    由於JS采用的是單線程模式運行，在執行某一個js時會阻塞其它並發的js執行，所以會按順序執行各個js。在執行完所有的腳本之后，圖片會被瀏覽器接着加載，所以第一次加載速度略慢，后面就會比較快了。在JQuery Mobile 1.4.5+FireFox/微信瀏覽器下實測效果不錯，IE就被省略了，我主要是要在微信瀏覽器下使用。

//需要引用別的js的時候，就加上如Env.require("cookie.js")，或Env.require("/common/cookie.js")，是用相對路徑還是絕對路徑就看喜好了。
//Env.require可用在頁面模板中，也可用在js文件中，但一定要保證執行時env.js被顯式引入。
//多次Env.require同一個js（不管用相對還是絕對），只有第一次會加載，所以不會重復。

//程序最后發行的版本，用於作為緩存鍵的前綴，快速更新緩存
var envLastVer = '2014_11_17_17_03';

//用於存放通道名稱及通信對象的類，這樣可以通過不同通道名稱來區分不同的通信對象  
function HttpRequestObject() {
    this.chunnel = null;
    this.instance = null;
}

//用於獲取的腳本或css文件保存對象
function HttpGetObject() {
    this.url = null;        //要下載的文件路徑
    this.cache_key = null;  //緩存鍵
    this.chunnel = null;    //通道名
    this.type = null;       //類型，js或css
    this.is_fill = false;   //內容是否被填充
    this.is_exec = false;   //內容是否已被執行，防止分幾大塊載入后重復執行
}

//通信處理類，可以靜態引用其中的方法  
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,即異步處理
    * @param _paraObj:相關的參數對象 
    */
    this.send = function (_url, _data, _processRequest, _chunnel, _asynchronous, _paraObj) {
        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, _paraObj);
                    }
                    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, _paraObj);
        }
    }
}

var Env = new function () {
    this.needLoadObject = new Array();

    //獲取env.js文件所在路徑
    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();

    //獲取文件后綴名
    this.getFileExt = function (fileUrl) {
        var d = /\.[^\.]+$/.exec(fileUrl);
        return d.toString().toLowerCase();
    }

    //依次放入要載入的文件
    this.pushNeedLoad = function (url) {
        var _absUrl = null;
        if (url.charAt(0) == '/')
            _absUrl = url;
        else
            _absUrl = this.envPath + url;

        var object = new HttpGetObject();
        object.url = _absUrl;
        object.cache_key = envLastVer + _absUrl;    //利用版本號+絕對路徑生成緩存鍵
        object.chunnel = 'ch' + (this.needLoadObject.length + 1);
        object.type = this.getFileExt(_absUrl);

        //嘗試從緩存獲取
        var cacheContent = localStorage.getItem(object.cache_key);
        if (cacheContent) { object.is_fill = true; }

        this.needLoadObject.push(object);
        return this;
    }

    //依次裝載要處理的文件
    this.batchLoad = function () {
        for (var i = 0; i < this.needLoadObject.length; i++) {
            var item = this.needLoadObject[i];
            var processGet = function (_instance, _paraObj) {
                localStorage.setItem(_paraObj.cache_key, _instance.responseText);    //緩存文件
                _paraObj.is_fill = true;
            }
            if (item.is_fill == false) {
                Request.send(item.url, "", processGet, item.chunnel, false, item);  //采用同步方式載入
            }
        }
        return this;
    }

    //依次執行要處理的文件
    this.batchExec = function () {
        var runCss = function (_css) { document.write('<style type="text/css">' + _css + '</style>'); }
        var runJs = function (_js) {
            if (window.execScript)
                window.execScript(_js);
            else
                window.eval(_js);
        }
        //依次執行，由於js為單線程執行，每執行一個js都會阻塞其它，所以可以保證順序執行
        for (var i = 0; i < this.needLoadObject.length; i++) {
            var item = this.needLoadObject[i];
            if (item.is_exec == false) {
                if (item.type == '.js') {
                    runJs(localStorage.getItem(item.cache_key));
                    item.is_exec = true;  //標記已執行，下次不會再執行
                }
                else if (item.type == '.css') {
                    runCss(localStorage.getItem(item.cache_key));
                    item.is_exec = true;  //標記已執行，下次不會再執行
                }
            }
        }
    }
}

下面是調用方法： 

        Env.pushNeedLoad("jquery.mobile-1.4.5/jquery.min.js")
            .pushNeedLoad("jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css")
            .pushNeedLoad("/plus_in/weixin/procedure/scripts/task.util.js")
            .pushNeedLoad("/plus_in/weixin/procedure/scripts/emcp.mobile.js")
            .pushNeedLoad("/plus_in/weixin/procedure/scripts/common.index.js")
            .pushNeedLoad("jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js")
            .pushNeedLoad("mobiscroll.2.6/css/mobiscroll.custom-2.6.2.min.css")
            .pushNeedLoad("mobiscroll.2.6/js/mobiscroll.custom-2.6.2.min.js")
            .pushNeedLoad("/plus_in/weixin/procedure/style/base.css")
            .batchLoad().batchExec();

通過火狐F12觀察，發現上面的腳本第一次會被加載，后面將會直接從localstorage中讀取，節省了很多，將js用於微信瀏覽器后，也節省了很多帶寬。不過第一次加載還是有些慢的，畢竟還是有那么多數據。