• 移动端性能优化动态加载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>
  • 相关阅读:
    sql sever 数据字典语法
    端口使用情况
    koa中间件说明
    FLIP动画思想
    跨域下载文件显示文件名
    post方法打开新页面并提交参数
    常用快捷键
    cnpm与npm安装的包不一样
    chrome devTools变量不提示,断点点击去不掉问题
    未修改的模块失效排查方法
  • 原文地址:https://www.cnblogs.com/iicoo/p/5055169.html
Copyright © 2020-2023  润新知