Loading JS and CSS files into the Localstorage acceleration program execution

First of all, thank the author of the article: http://www.jb51.net/article/12793.htm

Directly on the code, note that the file name is Env.js

When you need to refer to other JS, add such as Env.require ("Cookie.js"), or Env.require ("/common/cookie.js"), is to use a relative path or absolute path to see preferences. Env.require can be used in the page template, but also in the JS file, but be sure to ensure that env.js is explicitly introduced at execution time. Multiple env.require with the same JS (either relative or absolute), only the first time will be loaded, so will not be repeated. The last release of the program, used as a prefix for the cache key, quickly update the cache var envlastver = ' 2014_11_15_13_47 ';//The class that holds the channel name and the communication object, so that different communication object function can be distinguished by different channel names    Httprequestobject () {this.chunnel = null; this.instance = null;}    The communication processing class, which can be statically referenced by the method var Request = new Function () {//Communication class Cache This.httprequestcache = new Array ();        Create a new communication object this.createinstance = function () {var instance = null; if (window.            XMLHttpRequest) {//mozilla instance = new XMLHttpRequest ();            Some versions of the Mozilla browser handle errors when the server returns content that does not contain XML Mime-type header information. Therefore, make sure that the returned content contains the Text/xml information if (instance.overridemimetype) {instance.overridemimetype = "text/x            ML "; }} 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; }/** * Gets a Communication object * If no channel name is specified, the default channel name is "Default" * If the required communication class is not present in the cache, create one and put it into the communication class cache * @param _chunnel: Channel name Said, if this parameter is not present, the default is "default" @return a Communication object, which is stored in the Communication class cache */This.getinstance = function (_chunnel) {var in        stance = NULL;        var object = null;        if (_chunnel = = undefined)//does not specify the channel name {_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 is not in cache, create {object = new Httprequestobject ();            Object.chunnel = _chunnel;            Object.instance = This.createinstance ();            This.httpRequestCache.push (object);        instance = Object.instance;    } return instance; /** * Client sends request to server * @param _url: Request Purpose * @param _data: Data to be sent * @param _processrequest: function to process the returned result, its      Definition can be elsewhere, need to have a parameter, that is, the communication object to be processed * @param _chunnel: Channel name, default is "default" * @param _asynchronous: Whether asynchronous processing, the default is true, that is, asynchronous processing */this.send = function (_url, _data, _processrequest, _chunnel, _asynchronous) {if (_url.length = = 0 | | _url. IndexOf ("?") = = 0) {alert ("The request failed because the purpose is empty, please check!")            ");        Return } if (_chunnel = = Undefined | | _chunnel = = "") {_chunnel = "DefaUlt ";        } if (_asynchronous = = undefined) {_asynchronous = true;        } var instance = This.getinstance (_chunnel); if (instance = = NULL) {alert ("Browser does not support AJAX, please check!")        ") return; } if (_asynchronous = = True && typeof (_processrequest) = = "function") {Instance.onreadystatech Ange = function () {if (instance.readystate = = 4)//Determine object state {if (inst                    Ance.status = = 200)//information has been successfully returned to begin processing information {_processrequest (instance); } else {alert ("the page you requested has an exception, please check!")                    ");  }}}}//_url plus a moment to change the parameters to prevent the same request from being cached by the browser if the request is not sent to the server 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 (Instan        CE);    }}}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 = _s            Criptsrc.substr (0, _scriptsrc.length-6);            } else {This.envpath = This.envpath + _scriptsrc.substr (0, _scriptsrc.length-6);    }}} This.getpath ();          Executes the returned script content, _language can be empty, default to JavaScript This.runscript = function (_script, _language) {//For compatibility with Firefox to determine            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); }}/** * Get the required JS file as needed * @param _cachekey: Cache key, globally unique * @param _jsname:js file path, if the relative path is the relative path of the corresponding env.js, you can also use absolute path * @param _language: The language of the return function processing, the default        It is considered that JScript is not required */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)    ;   Cache file This.runscript (_instance.responsetext, _language); Run file} 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); }}}//upload the page into CSS this.runcss = function (_css) {document.write (' <style type= "text/css" > ' + _css + ' </style> ');  }//Get the required CSS files//Advantages: Support cache, picture path without recalculation 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); }    }} 

Here's how to call it:

        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");

Through the Firefox F12 observation, found that the above script will be loaded for the first time, the back will be read directly from the Localstorage, save a lot of JS used in the browser, but also save a lot of bandwidth. However, the first load is somewhat slow, after all, there is still so much data.

Loading JS and CSS files into the Localstorage acceleration program execution