将css和js缓存到localStorage缓存，提高网页响应速度
适用于小站点，这很极致，很快速~~
1 /** 2 * Created by SevenNight on 2016/9/21 0021. 3 * 插件功能：使用localStorage缓存js和css文件，减少http请求和页面渲染时间 4 * 使用方法： 5 * 1.使用此插件前，需要给插件的pageVersion变量赋值，建议变量值由服务器后端输出，当需要更新客户端资源时，修改版本值即可。 6 * 2.加载Js：由于js加载有顺序要求，所以需要将后加载的脚本作为前一个脚本的回调参数传入，如： 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); 10 * } 11 * ); 12 * 3.加载css，如：whir.res.loadCss("css", "/Style/css_whir.css", null); 13 */ 14 var whir = window.whir || {}; 15 function getRelativePath(url,level){ 16 var urlarray = url.split("/"); 17 var resulturl = ""; 18 for(var i=0;i<urlarray.length-level;i++){ 19 resulturl += urlarray[i]+"/"; 20 } 21 return resulturl; 22 } 23 whir.res = { 24 pageVersion: "0.0.1", //页面版本，也由页面输出，用于刷新localStorage缓存 25 //动态加载js文件并缓存 26 loadJs: function (name, url, callback) { 27 if (window.localStorage) { 28 var xhr; 29 var js = localStorage.getItem(name); 30 if (js == null || js.length == 0 || this.pageVersion != localStorage.getItem("version")) { 31 if (window.ActiveXObject) { 32 xhr = new ActiveXObject("Microsoft.XMLHTTP"); 33 } else if (window.XMLHttpRequest) { 34 xhr = new XMLHttpRequest(); 35 } 36 if (xhr != null) { 37 xhr.open("GET", url); 38 xhr.send(null); 39 xhr.onreadystatechange = function () { 40 if (xhr.readyState == 4 && xhr.status == 200) { 41 js = xhr.responseText; 42 localStorage.setItem(name, js); 43 localStorage.setItem("version", whir.res.pageVersion); 44 js = js == null ? "" : js; 45 whir.res.writeJs(js); 46 if (callback != null) { 47 callback(); //回调，执行下一个引用 48 } 49 } 50 }; 51 } 52 } else { 53 whir.res.writeJs(js); 54 if (callback != null) { 55 callback(); //回调，执行下一个引用 56 } 57 } 58 } else { 59 whir.res.linkJs(url); 60 } 61 }, 62 loadCss: function (name, url) { 63 if (window.localStorage) { 64 var xhr; 65 var css = localStorage.getItem(name); 66 if (css == null || css.length == 0 || this.pageVersion != localStorage.getItem("version")) { 67 if (window.ActiveXObject) { 68 xhr = new ActiveXObject("Microsoft.XMLHTTP"); 69 } else if (window.XMLHttpRequest) { 70 xhr = new XMLHttpRequest(); 71 } 72 if (xhr != null) { 73 xhr.open("GET", url); 74 xhr.send(null); 75 xhr.onreadystatechange = function () { 76 if (xhr.readyState == 4 && xhr.status == 200) { 77 css = xhr.responseText; 78 localStorage.setItem(name, css); 79 localStorage.setItem("version", whir.res.pageVersion); 80 css = css == null ? "" : css; 81 css = css.replace(/\..\/fonts\//g, getRelativePath(url,2)+"fonts/"); //css里的font路径需单独处理 82 whir.res.writeCss(css); 83 } 84 }; 85 } 86 } else { 87 css = css.replace(/\..\/fonts\//g, getRelativePath(url,2)+"fonts/"); //css里的font路径需单独处理 88 whir.res.writeCss(css); 89 } 90 } else { 91 whir.res.linkCss(url); 92 } 93 }, 94 //往页面写入js脚本 95 writeJs: function (text) { 96 var head = document.getElementsByTagName('HEAD').item(0); 97 var link = document.createElement("script"); 98 link.type = "text/javascript"; 99 link.innerHTML = text; 100 head.appendChild(link); 101 }, 102 //往页面写入css样式 103 writeCss: function (text) { 104 var head = document.getElementsByTagName('HEAD').item(0); 105 var link = document.createElement("style"); 106 link.type = "text/css"; 107 link.innerHTML = text; 108 head.appendChild(link); 109 }, 110 //往页面引入js脚本 111 linkJs: function (url) { 112 var head = document.getElementsByTagName('HEAD').item(0); 113 var link = document.createElement("script"); 114 link.type = "text/javascript"; 115 link.src = url; 116 head.appendChild(link); 117 }, 118 //往页面引入css样式 119 linkCss: function (url) { 120 var head = document.getElementsByTagName('HEAD').item(0); 121 var link = document.createElement("link"); 122 link.type = "text/css"; 123 link.rel = "stylesheet"; 124 link.rev = "stylesheet"; 125 link.media = "screen"; 126 link.href = url; 127 head.appendChild(link); 128 } 129 };
