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

JS CODE

 (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>