本篇教程介绍了HTML+CSS入门 将CSS和js缓存到localStorage缓存，提高网页响应速度，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<

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 };    

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！