jquery and public styles are cached to Localstorage, reducing HTTP requests to optimize page load times, as the following code can do:
<! DOCTYPE html>
To view write records:
Package into JS plugin:
/*** Plugin Features: Use localstorage cache js and CSS files, reduce HTTP requests and page rendering time, for Web mobile H5 page production. * Plugin Author: zhangqs008@163.com* How to use: * 1. Before using this plug-in, you need to assign a value to the pageversion variable of the plug-in, 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. * 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: * Whir.res.loadJs ("jquery", "<%= basepath%>turntable/script /jquery-1.8.3.min.js ", * function () {* Whir.res.loadJs (" turntable "," script/whir.turntable.js ", null); * }); * 3. Load CSS, such as: Whir.res.loadCss ("CSS", "/STYLE/CSS_WHIR.CSS", null); */var whir = Window.whir | | {};whir.res = {pageversion: "",//page version, output by page, used to refresh Localstorage cache//Dynamically load JS file and cache loadjs:function (name, URL, callb ACK) {if (window.localstorage) {var xhr; var js = localstorage.getitem (name); if (js = = NULL | | js.length = = 0 | | this.pageversion! = Localstorage.getitem ("version")) {if (window. ActiveXObject) {xhr = new ActiveXObject ("Microsoft.XMLHTTP"); } else if (window. XMLHttpRequest) {xhr = new XMLHttpRequest (); } if (XHR! = null) {Xhr.open ("GET", url); Xhr.send (NULL); Xhr.onreadystatechange = function () {if (xhr.readystate = = 4 && xhr.status = = 200) { JS = Xhr.responsetext; Localstorage.setitem (name, JS); Localstorage.setitem ("version", whir.res.pageVersion); JS = JS = = null? "": JS; Whir.res.writeJs (JS); if (callback! = NULL) {callback ();//callback, execute next reference} } }; }} else {whir.res.writeJs (JS); if (callback! = NULL) {callback ();//callback, execution next Reference}}}} else { Whir.res.linkJs (URL); }}, Loadcss:function (name, URL) {if (window.localstorage) {var xhr; var css = Localstorage.getitem (name); if (CSS = = NULL | | css.length = = 0 | | this.pageversion! = Localstorage.getitem ("version")) {if (window. ActiveXObject) {xhr = new ActiveXObject ("Microsoft.XMLHTTP"); } else if (window. XMLHttpRequest) {xhr = new XMLHttpRequest (); } if (XHR! = null) {Xhr.open ("GET", url); Xhr.send (NULL); Xhr.onreadystatechange = function () {if (xhr.readystate = = 4 && xhr.status = = 200) { CSS = Xhr.responsetext; Localstorage.setitem (name, CSS); Localstorage.setitem ("version", whir.res.pageVersion); CSS = CSS = = null? "": Css CSS = Css.replace (/images\//g, "style/images/"); The image path in CSS needs to be handled separately WHIR.RES.WRITECSS (CSS); } }; }} else {css = Css.replace (/images\//g, "style/images/"); the picture path in//CSS needs to be handled separately whir . RES.WRITECSS (CSS); }} else {whir.res.linkCss (URL); }},//Go to the page to write the JS script writejs:function (text) {var head = document.getElementsByTagName (' head '). Item (0); var link = document.createelement ("script"); Link.type = "Text/javascript"; link.innerhtml = text; Head.appendchild (link); },//toward page write CSS style writecss:function (text) {var head = document.getElementsByTagName (' head '). Item (0); var link = document.createelement ("style"); Link.type = "Text/css"; link.innerhtml = text; Head.appendchild (link); },//Go to the page to introduce JS script linkjs:function (URL) { var head = document.getElementsByTagName (' head '). Item (0); var link = document.createelement ("script"); Link.type = "Text/javascript"; link.src = URL; Head.appendchild (link); },//to the page to introduce CSS style linkcss:function (URL) {var head = document.getElementsByTagName (' head '). Item (0); var link = document.createelement ("link"); Link.type = "Text/css"; Link.rel = "stylesheet"; Link.rev = "stylesheet"; Link.media = "screen"; Link.href = URL; Head.appendchild (link); }}
Call the plugin:
<script type= "Text/javascript" src= "fengzhuang.js" ></script> <script type= "Text/javascript" > //ingress function whir.res.pageVersion = "1002"; Page version to detect if the cache whir.res.loadJs ("jquery", "js/jquery-1.9.1.min.js", function () {whir.res.loadJs) need to be updated ("Zidingyi", "js/zidingyi.js", null); }); Whir.res.loadCss ("CSS", "RESET.CSS", null); </script>