使用localstorage和预加载做到webview秒开

UC的前端团队推出了基于localstorage存储前端静态资源的 Scrat-webapp模块化开发体系 ，而且基于这个模块化体系开发了很多项目： 神马视频 、 NBA直播 。大家可以通过chrome的开发者工具查看localstorage的使用情况。

基于以上的行业经验，我们也选用了localstorage作为自己的前端资源缓存，并实现了自己的基于localstorage的静态资源加载器，其实现原理可以参考我的博客: 在网页中异步加载javascript 的XHR Eval方法。具体代码如下：

;(function (global) {      'use strict';        //检查文件类型      var TYPE_RE = /\.(js|css)(?=[?&,]|$)/i;      function fileType(str) {          var ext = 'js';          str.replace(TYPE_RE, function (m, $1) {              ext = $1;          });          if (ext !== 'js' && ext !== 'css') ext = 'unknown';          return ext;      }        //将js片段插入dom结构      function evalGlobal(strScript){          var scriptEl = document.createElement ("script");          scriptEl.type= "text/javascript";          scriptEl.text= strScript;          document.getElementsByTagName("head")[0].appendChild(scriptEl) ;      }        //将css片段插入dom结构      function createCss(strCss) {          var styleEl = document.createElement('style');          document.head.appendChild(styleEl);          styleEl.appendChild(document.createTextNode(strCss));      }        // 在全局作用域执行js或插入style node      function defineCode(url, str) {          var type = fileType(url);          if (type === "js"){              //with(window)eval(str);              evalGlobal(str);          }else if(type === "css"){              createCss(str);          }      }        // 将数据写入localstorage      var setLocalStorage = function(key, item){          window.localStorage && window.localStorage.setItem(key, item);      }        // 从localstorage中读取数据      var getLocalStorage = function(key){          return window.localStorage && window.localStorage.getItem(key);      }        // 通过AJAX请求读取js和css文件内容，使用队列控制js的执行顺序      var rawQ = [];      var monkeyLoader = {          loadInjection: function(url,onload,bOrder){              var iQ = rawQ.length;              if(bOrder){                  var qScript = {key: null, response: null, onload: onload, done: false};                  rawQ[iQ] = qScript;              }              //有localstorage 缓存              var ls = getLocalStorage(url);              if(ls !== null){                  if(bOrder){                      rawQ[iQ].response = ls;                      rawQ[iQ].key = url;                      monkeyLoader.injectScripts();                  }else{                      defineCode(url, ls)                      if(onload){                          onload();                      }                  }              } else {                  var xhrObj = monkeyLoader.getXHROject();                  xhrObj.open('GET', url, true);                  xhrObj.send(null);                  xhrObj.onreadystatechange = function(){                      if(xhrObj.readyState == 4){                          if(xhrObj.status == 200){                              setLocalStorage(url, xhrObj.responseText);                              if(bOrder){                                  rawQ[iQ].response = xhrObj.responseText;                                  rawQ[iQ].key = url;                                  monkeyLoader.injectScripts();                              }else{                                  defineCode(url, xhrObj.responseText)                                  if(onload){                                      onload();                                  }                              }                          }                      }                  }              }          },            injectScripts: function(){              var len = rawQ.length;              //按顺序执行队列中的脚本              for (var i = 0; i < len; i++) {                  var qScript = rawQ[i];                  //没有执行                  if(!qScript.done){                      //没有加载完成                      if(!qScript.response){                          console.error("raw code lost or not load!");                          //停止，等待加载完成, 由于脚本是按顺序添加到队列的，因此这里保证了脚本的执行顺序                          break;                      }else{//已经加载完成了                          defineCode(qScript.key, qScript.response)                          if(qScript.onload){                              qScript.onload();                          }                          delete qScript.response;                          qScript.done = true;                      }                  }              }          },            getXHROject: function(){              //创建XMLHttpRequest对象              var xmlhttp;              if (window.XMLHttpRequest)                  {                      // code for IE7+, Firefox, Chrome, Opera, Safari                      xmlhttp=new XMLHttpRequest();                  } else {                      // code for IE6, IE5                      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");                  }                  return xmlhttp;          }      };          global.monkeyLoader = monkeyLoader.loadInjection;    })(this);

monkeyLoader('a.js',callbackA,true);  monkeyLoader('b.js',callbackB,true);

fisMonkeyLoader = function(resourceMap,resourceList){          var pkgList = [];          for(var idx in resourceList){              var resourceItem = resourceList[idx];              var pakItem = resourceMap['pkg'][resourceMap['res'][resourceItem]['pkg']]['uri'];              pkgList[pakItem] =  1;          }          for(var pkgIdx in pkgList){              monkeyLoader(pkgIdx,null,true);          }        }

__inline('../js/lib/monkeyLoader.js');  fisMonkeyLoader(__RESOURCE_MAP__,[      'css/animate.css',      'css/app.css',      'js/lib/zepto-1.1.3.min.js',      'js/app/app.js',  ]);