移动端性能优化动态加载JS、CSS

(function() {
/**
* update:
* 1.0
*/
var version = "insure 1.1.0";
var Zepto = Zepto || null, jQuery = jQuery || null, $ = Zepto || jQuery;
var showLoading = false,
isUsePackMode = false; // 是否使用合并模式,true则加载分页面合并的JS,CSS

if (window.location.hostname == 'localhost') {
isUsePackMode = false; //本地开发环境默认值为false
}

/**
* 页面初始化, 动态加载
*/
var location = window.location;
// 协议
var protocol = location.protocol;
// 主机名
var host = location.host;

if (host.indexOf('pingan.com') != -1) {
isUsePackMode = true;
}
// 加载一个脚本文件
function _loadJsFile(url, callback) {
var script = document.createElement("script");
if(script.readyState) {
script.onreadystatechange = function() {
if(script.readyState == "loaded" || script.readyState == "complete") {
callback.call();
}
}
} else {
script.onload = callback;
}
script.type = "text/javascript";
//script.async = true;
script.src = url;
//url.indexOf('?') != -1 ? url + '&v=' + version : url + '?v=' + version;
document.getElementsByTagName("head")[0].appendChild(script);
}

// 加载脚本文件列表
function _loadJsList(urls, statechange, _index) {
var index = _index || 0;
if(urls[index]) {
_loadJsFile(urls[index], function() {
_loadJsList(urls, statechange, index + 1);
});
}

if(statechange) {
statechange(index);
}
}

// 根据域名解析文件url
function _parse(urls, type) {
var _urls = [], url = "";

if( typeof urls == "string") {
urls = [urls];
}

for(var i = 0, len = urls.length; i < len; i++) {
url = urls[i];
if(!url) {
continue;
} else if(/^(http|https)/.test(url)) {// 完整的URL
_urls.push(url);
} else if(/^\//.test(url)) {// 以根目录为路径
_urls.push(protocol + "//" + host + url);
} else {
_urls.push(url+'?_='+Math.random());
}
}

return _urls;
}

// 加载一个css文件
function loadCSS(urls, packCss) {
var html = [];
urls = _parse(urls, "css");
if (isUsePackMode && packCss) {
urls = _parse(packCss, "css");
}
for(var i = 0, len = urls.length; i < len; i++) {
html.push("<link type=\"text/css\" rel=\"stylesheet\" href=\"" + urls[i] + "\" />");
}
document.write(html.join(""));
}

// 加载脚本文件
function loadJs(urls, callback, dontevent, showLoad, packJs) {
showLoading = showLoad;
urls = _parse(urls, "js");
if(typeof(_) != 'function' && typeof(jQuery) != 'function') {
urls.unshift(window.getDiffFrameUrl());
}
if (isUsePackMode && packJs) {
packJs.unshift(window.getDiffFrameUrl());
urls = _parse(packJs, "js");
}
if(!dontevent) {
var _callback = callback, len = urls.length;
callback = function(index) {
if(_callback) {
_callback(index);
}
}
}
_loadJsList(urls, callback);
}

window.loadCSS = loadCSS;
window.loadJs = loadJs;
window.getDiffFrameUrl = function(prefix) {
var b = navigator.userAgent.toLowerCase();
browser = {
safari : /webkit/.test(b),
opera : /opera/.test(b),
msie : /msie/.test(b) && !/opera/.test(b),
mozilla : /mozilla/.test(b) && !/compatible/.test(b),
winphone : window.navigator.msPointerEnabled
};
var prefix = prefix || '';
//var url = prefix+'js/third-party/zepto.v1.1.3.min.js';
var url = prefix+'/ebusiness/car/mobile/quoter/js/third-party/zepto.v1.1.3.js';
if(browser.msie || browser.winphone) {
url = prefix+'/ebusiness/car/mobile/quoter/js/third-party/jquery-1.9.1.min2.js';
}
return url;
}

})();

<script type="text/javascript">
$(function(){
loadJs(['/ebusiness/car/mobile/quoter/js/common/common.js',
'/ebusiness/car/mobile/quoter/js/common/city.js',
'/ebusiness/car/mobile/quoter/js/common/date.js',
'/ebusiness/car/mobile/quoter/js/insure/insureValidate.js',
'/ebusiness/car/mobile/quoter/js/insure/insureBaseInfo.js'
],null,true,false);
});
</script>