Caching CSS and JS to localstorage cache for faster Web page response

1 /**2 * Created by sevennight on 2016/9/21 0021.3 * Plugin function: Use Localstorage to cache JS and CSS files, reduce HTTP request and page rendering time4 * How to use:5 * 1. Before using this plug-in, you need to assign a value to the plug-in's pageversion variable, suggesting that the value of the variable is output by the server backend, modifying the version value when the client resource needs to be updated. 6 * 2. Load js: Since JS loading has sequential requirements, the post-loaded script needs to be passed in as a callback parameter of the previous script, such as:7 * Whir.res.loadJs ("jquery", "//cdn.bootcss.com/jquery/1.12.4/jquery.min.js",8 * Function () {9 * Whir.res.loadJs ("turntable", "script/whir.turntable.js", null);Ten  *        } One  *    ); A * 3. Load CSS, such as: Whir.res.loadCss ("CSS", "/STYLE/CSS_WHIR.CSS", null); -  */ - varWhir = Window.whir | | {}; the functionGetrelativepath (url,level) { -     varUrlarray = Url.split ("/"); -     varResulturl = ""; -      for(vari=0;i<urlarray.length-level;i++){ +Resulturl + = urlarray[i]+ "/"; -     } +     returnResulturl; A } atWhir.res = { -Pageversion: "0.0.1",//page version, also by page output, for refreshing the localstorage cache -     //dynamically loading JS files and caching -Loadjs:function(name, URL, callback) { -         if(window.localstorage) { -             varxhr; in             varJS =Localstorage.getitem (name); -             if(js = =NULL|| Js.length = = 0 | | This. pageversion! = Localstorage.getitem ("Version")) { to                 if(window. ActiveXObject) { +XHR =NewActiveXObject ("Microsoft.XMLHTTP"); -}Else if(window. XMLHttpRequest) { theXHR =NewXMLHttpRequest (); *                 } $                 if(XHR! =NULL) {Panax NotoginsengXhr.open ("GET", URL); -Xhr.send (NULL); theXhr.onreadystatechange =function () { +                         if(Xhr.readystate = = 4 && xhr.status = 200) { AJS =Xhr.responsetext; the Localstorage.setitem (name, JS); +Localstorage.setitem ("Version", whir.res.pageVersion); -JS = JS = =NULL? "": JS; $ whir.res.writeJs (JS); $                             if(Callback! =NULL) { -Callback ();//callback, executing the next reference -                             } the                         } -                     };Wuyi                 } the}Else { - whir.res.writeJs (JS); Wu                 if(Callback! =NULL) { -Callback ();//callback, executing the next reference About                 } $             } -}Else { - whir.res.linkJs (URL); -         } A     }, +LOADCSS:function(name, URL) { the         if(window.localstorage) { -             varxhr; $             varCSS =Localstorage.getitem (name); the             if(CSS = =NULL|| Css.length = = 0 | | This. pageversion! = Localstorage.getitem ("Version")) { the                 if(window. ActiveXObject) { theXHR =NewActiveXObject ("Microsoft.XMLHTTP"); the}Else if(window. XMLHttpRequest) { -XHR =NewXMLHttpRequest (); in                 } the                 if(XHR! =NULL) { theXhr.open ("GET", URL); AboutXhr.send (NULL); theXhr.onreadystatechange =function () { the                         if(Xhr.readystate = = 4 && xhr.status = 200) { theCSS =Xhr.responsetext; + Localstorage.setitem (name, CSS); -Localstorage.setitem ("Version", whir.res.pageVersion); theCSS = CSS = =NULL? "": CSS;BayiCSS = Css.replace (/\. \/fonts\//g, Getrelativepath (url,2) + "fonts/");//font paths in CSS need to be handled separately the whir.res.writeCss (CSS); the                         } -                     }; -                 } the}Else { theCSS = Css.replace (/\. \/fonts\//g, Getrelativepath (url,2) + "fonts/");//font paths in CSS need to be handled separately the whir.res.writeCss (CSS); the             } -}Else { the whir.res.linkCss (URL); the         } the     },94     //write JS script to page theWritejs:function(text) { the         varHead = document.getElementsByTagName (' head '). Item (0); the         varlink = document.createelement ("Script");98Link.type = "Text/javascript"; Aboutlink.innerhtml =text; - head.appendchild (link);101     },102     //writing CSS Styles to a page103WRITECSS:function(text) {104         varHead = document.getElementsByTagName (' head '). Item (0); the         varlink = document.createelement ("Style");106Link.type = "Text/css";107link.innerhtml =text;108 head.appendchild (link);109     }, the     //introduce JS script to page111LINKJS:function(URL) { the         varHead = document.getElementsByTagName (' head '). Item (0);113         varlink = document.createelement ("Script"); theLink.type = "Text/javascript"; theLINK.SRC =URL; the head.appendchild (link);117     },118     //Introducing CSS Styles to a page119LINKCSS:function(URL) { -         varHead = document.getElementsByTagName (' head '). Item (0);121         varlink = document.createelement ("link");122Link.type = "Text/css";123Link.rel = "stylesheet";124Link.rev = "stylesheet"; theLink.media = "Screen";126Link.href =URL;127 head.appendchild (link); -     }129};

Caching CSS and JS to localstorage cache for faster Web page response