web项目中js加载慢问题解决思路

最近使用Echarts地图实现世界地图及中国34省地图间切换 (版本为echarts2,echarts3目前无法下载地图版)。

问题描述：之前使用require形式加载，地图首次加载显示要6-7秒，难以接受。

　　js配置代码如下：

<div class="w_b50 fl bg_x" id="main">
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/dist/echarts.js"></script>
    <script type="text/javascript">
    $(function(){
        initMap();
    });
    $(window).resize(function(){
        initMap();
    });
    function initMap(){
        var namemapping={
               'Afghanistan':'阿富汗', 'Angola':'安哥拉', 'Albania':'阿尔巴尼亚', 'United Arab Emirates':'阿联酋', 'Argentina':'阿根廷', 'Armenia':'亚美尼亚',  'French Southern and Antarctic Lands':'法属南半球和南极领地','Australia':'澳大利亚',
               'Austria':'奥地利', 'Azerbaijan':'阿塞拜疆', 'Burundi':'布隆迪', 'Belgium':'比利时', 'Benin':'贝宁', 'Burkina Faso':'布基纳法索',  'Bangladesh':'孟加拉国', 'Bulgaria':'保加利亚', 'The Bahamas':'巴哈马',
               'Belarus':'白俄罗斯', 'Belize':'伯利兹', 'Bermuda':'百慕大', 'Bolivia':'玻利维亚', 'Brazil':'巴西', 'Brunei':'文莱', 'Bhutan':'不丹', 'Botswana':'博茨瓦纳', 'Central African Republic':'中非*',  'Canada':'加拿大', 'Switzerland':'瑞士',
               'Chile':'智利', 'China':'中国', 'Ivory Coast':'象牙海岸', 'Cameroon':'喀麦隆', 'Democratic Republic of the Congo':'刚果**', 'Republic of the Congo':'刚果*', 'Colombia':'哥伦比亚', 'Costa Rica':'哥斯达黎加',
               'Cuba':'古巴', 'Northern Cyprus':'北塞浦路斯', 'Cyprus':'塞浦路斯', 'Czech Republic':'捷克*',  'Germany':'德国', 'Djibouti':'吉布提',   'Denmark':'丹麦', 'Dominican Republic':'多明尼加*',   'Algeria':'阿尔及利亚',
               'Ecuador':'厄瓜多尔',  'Egypt':'埃及','Eritrea':'厄立特里亚','Spain':'西班牙', 'Estonia':'爱沙尼亚',  'Ethiopia':'埃塞俄比亚',  'Finland':'芬兰', 'Fiji':'斐', 'Falkland Islands':'福克兰群岛', 'France':'法国',  'Gabon':'加蓬', 'United Kingdom':'英国',
               'Ghana':'加纳',  'Guinea':'几内亚', 'Gambia':'冈比亚',  'Guinea Bissau':'几内亚比绍','Equatorial Guinea':'赤道几内亚', 'Greece':'希腊', 'Greenland':'格陵兰', 'Guatemala':'危地马拉', 'French Guiana':'法属圭亚那',
               'Guyana':'圭亚那',  'Honduras':'洪都拉斯', 'Croatia':'克罗地亚', 'Haiti':'海地',  'Hungary':'匈牙利',  'Indonesia':'印尼', 'India':'印度',   'Ireland':'爱尔兰',  'Iran':'伊朗','Georgia':'格鲁吉亚','United States of America':'美国',
               'Iraq':'伊拉克', 'Iceland':'冰岛', 'Israel':'以色列',   'Italy':'意大利',  'Jamaica':'牙买加',  'Jordan':'约旦', 'Japan':'日本', 'Kazakhstan':'哈萨克斯坦',  'Kenya':'肯尼亚',  'Kyrgyzstan':'吉尔吉斯斯坦',  'Cambodia':'柬埔寨',
               'South Korea':'韩国',  'Kosovo':'科索沃',  'Kuwait':'科威特',  'Laos':'老挝',  'Lebanon':'黎巴嫩', 'Liberia':'利比里亚',  'Libya':'利比亚',  'Sri Lanka':'斯里兰卡', 'Lesotho':'莱索托', 'Lithuania':'立陶宛',  'Luxembourg':'卢森堡',
               'Latvia':'拉脱维亚','Morocco':'摩洛哥', 'Moldova':'摩尔多瓦',  'Madagascar':'马达加斯加',  'Mexico':'墨西哥', 'Macedonia':'马其顿', 'Mali':'马里',  'Myanmar':'缅甸',  'Montenegro':'黑山', '*':'蒙古', 'Mozambique':'莫桑比克',
               'Mauritania':'毛里塔尼亚','Malawi':'马拉维', 'Malaysia':'马来西亚', 'Namibia':'纳米比亚', 'New Caledonia':'新喀里多尼亚', 'Niger':'尼日尔','Nigeria':'尼日利亚', 'Nicaragua':'尼加拉瓜', 'Netherlands':'荷兰', 'Norway':'挪威',
               'Nepal':'尼泊尔','New Zealand':'新西兰', 'Oman':'阿曼', 'Pakistan':'巴基斯坦','Panama':'*','Peru':'秘鲁',  'Philippines':'菲律宾', 'Papua New Guinea':'巴布亚新几内亚', 'Poland':'波兰','Puerto Rico':'波多黎各',
               'North Korea':'北朝鲜',  'Portugal':'葡萄牙',  'Paraguay':'巴拉圭',  'Qatar':'卡塔尔',  'Romania':'罗马尼亚', 'Russia':'俄罗斯','Rwanda':'卢旺达',  'Western Sahara':'西撒哈拉', 'Saudi Arabia':'沙特阿拉伯','Sudan':'苏丹',
               'South Sudan':'南苏丹', 'Senegal':'塞内加尔',   'Solomon Islands':'所罗门群岛',     'Sierra Leone':'塞拉利昂', 'El Salvador':'萨尔瓦多', 'Somaliland':'索马里兰',  'Somalia':'索马里',  'Republic of Serbia':'塞尔维亚*',
               'Suriname':'苏里南','Slovakia':'斯洛伐克',  'Slovenia':'斯洛文尼亚','Sweden':'瑞典',  'Swaziland':'斯威士兰', 'Syria':'叙利亚', 'Chad':'乍得',  'Togo':'多哥',   'Thailand':'泰国', 'Tajikistan':'塔吉克斯坦',  'Turkmenistan':'土库曼斯坦',
               'East Timor':'东帝汶','Trinidad and Tobago':'特里尼达和多巴哥','Tunisia':'突尼斯','Turkey':'土耳其', 'United Republic of Tanzania':'坦桑尼亚联合*',    'Uganda':'乌干达',  'Ukraine':'乌克兰',  'Uruguay':'乌拉圭',
               'Uzbekistan':'乌兹别克斯坦',    'Venezuela':'委内瑞拉', 'Vietnam':'越南',  'Vanuatu':'瓦努阿图',  'West Bank':'西岸',  'Yemen':'也门',   'South Africa':'南非',  'Zambia':'赞比亚',  'Zimbabwe':'津巴布韦' ,'Bosnia and Herzegovina':'波斯尼亚和黑塞哥维那'
        };
         require.config({
            paths: {
                echarts: '<%=request.getContextPath()%>/js/dist'
            }
        });
        // 使用
        require(
             [
                'echarts',
                'echarts/chart/map' // 使用柱状图就加载map模块，按需加载
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                var option = {
                        title : {
                            text: '终端分布',
                            x:'center',
                            y:'top',
                            textStyle : {
                                fontSize: 18,
                                fontWeight: 100,
                                color: '#999',
                                fontFamily: '"Microsoft Yahei",simhei'
                   }
            },
            backgroundColor:$(".w_b50").css('background-color'),
            tooltip : {
                trigger: 'item',
                textStyle : {
                    fontSize: 11,
                    fontWeight: 60,
                    color: '#ccc',
                    fontFamily: '"Microsoft Yahei",simhei'
        },
                formatter : function (params) {
                    var value=params.value;
                    if(value>=0){
                        return '设备总数' + '<br/>' + params.name + ' : ' + value;
                    }else{
                     return '设备总数' + '<br/>' + params.name + ' : ' + 0;
                    }
                }
            },
            dataRange: {
                show: false,
                min: 1,
                max: 10,
                text:['高','低'],           // 文本，默认为数值文本
                realtime: false,
                calculable : true,
                color: ['#da70d6', '#32cd32', '#6495ed','#6b8e23','orange',
                        '#ba55d3', '#cd5c5c', '#ffa500', '#00fa9a','#ff00ff',
                        '#ff6347', '#7b68ee', '#3cb371']
            },
            toolbox: {
                show : true,
                x:'right',
                borderColor:'#ccc',
                itemSize:14,
                feature : {
                    selfButtons:{//自定义按钮
                           show:true,
                           title:'world', //鼠标移动上去显示的文字
                           icon:'<%=request.getContextPath()%>/images/world.png',
                           option:{},
                           onclick:function(param) {//点击事件
                               loaddata(null,'dev_country_id'); //回到世界地图
                                 }
                            },
                }
            },
            series : [
                {
                    name: '设备总数',
                    type: 'map',
                    mapType: 'world',
                    roam: false,
                    mapLocation: {
                        y : 40
                    },
                    itemStyle:{
                        normal:{
                           areaStyle:{color:'lightskyblue'}
                         },
                       emphasis:{label:{show:true}},
                       },
                    data:[],
                    nameMap :namemapping //国家英文名映射为中文名
                }]
               };
                function loaddata(cityname,countryField){
                    $.ajax({
                    type : "post",
                    async : true,
                    data :{"countryField":countryField},
                    url : "<%=request.getContextPath()%>/cities/devicecountrylist.json",
                    dataType : "json", //返回数据形式为json
                    success : function(result) {
                        var data=[];
                        for(var i=0;i<result.length;i++){
                            if(result[i].value>0){//过滤设备数小于0的地址
                            var d={'name':result[i].name,'value':result[i].value};
                            data.push(d);
                            }
                            }
                      option.series[0].data=data;
                      if(countryField=='dev_country_id'){//显示世界地图
                          option.series[0].mapType='world';
                        myChart.setOption(option);
                      }else if(countryField=='dev_province_id'){//显示中国地图
                          option.series[0].mapType='china';
                          myChart.setOption(option);
                      }else if(countryField=='dev_city_id'){//显示省地图
                          option.series[0].mapType=cityname;
                          myChart.setOption(option);
                      }
                    }
                    });
                };
                loaddata(null,'dev_country_id');
                var i=0;
                myChart.on('click',function(params){
                    var select= params.name;
                    if(option.series[0].mapType=='world' && select=='中国'){//进入中国
                        loaddata(null,'dev_province_id');
                    }else if(option.series[0].mapType!='world' && select!='中国'){//中国省或市地图
                        if(i%2==0 && option.series[0].mapType=='china'){//为0进入市图
                            loaddata(select,'dev_city_id');
                        }else if(i%2==1 && option.series[0].mapType!='china'){//为1进入中国图
                            loaddata(null,'dev_province_id');
                        }
                        i++;
                    }
                });
            }
           );
         }
        </script>
        </div>

解决思路：

1、采用单文件加载地图方式：

　　由于使用的已经是压缩版(官网http://echarts.baidu.com/echarts2/下载后dist目录下)，只是加载慢。

　　其中echarts.js(354KB)、chart目录下的map.js(441KB)。

　　

　　改用压缩版全图表 echarts-all.js(949KB)，对应加载地图配置：

　　

<div class="w_b50 fl bg_x" id="main">
    <script type="text/javascript" src="<%=request.getContextPath()%>/dist/echarts-all.js"></script>
    <script type="text/javascript">
    var namemapping={
                'Afghanistan':'阿富汗', 'Angola':'安哥拉', 'Albania':'阿尔巴尼亚', 'United Arab Emirates':'阿联酋', 'Argentina':'阿根廷', 'Armenia':'亚美尼亚',  'French Southern and Antarctic Lands':'法属南半球和南极领地','Australia':'澳大利亚',
                'Austria':'奥地利', 'Azerbaijan':'阿塞拜疆', 'Burundi':'布隆迪', 'Belgium':'比利时', 'Benin':'贝宁', 'Burkina Faso':'布基纳法索',  'Bangladesh':'孟加拉国', 'Bulgaria':'保加利亚', 'The Bahamas':'巴哈马',
                'Belarus':'白俄罗斯', 'Belize':'伯利兹', 'Bermuda':'百慕大', 'Bolivia':'玻利维亚', 'Brazil':'巴西', 'Brunei':'文莱', 'Bhutan':'不丹', 'Botswana':'博茨瓦纳', 'Central African Republic':'中非*',  'Canada':'加拿大', 'Switzerland':'瑞士',
                'Chile':'智利', 'China':'中国', 'Ivory Coast':'象牙海岸', 'Cameroon':'喀麦隆', 'Democratic Republic of the Congo':'刚果**', 'Republic of the Congo':'刚果*', 'Colombia':'哥伦比亚', 'Costa Rica':'哥斯达黎加',
                'Cuba':'古巴', 'Northern Cyprus':'北塞浦路斯', 'Cyprus':'塞浦路斯', 'Czech Republic':'捷克*',  'Germany':'德国', 'Djibouti':'吉布提',   'Denmark':'丹麦', 'Dominican Republic':'多明尼加*',   'Algeria':'阿尔及利亚',
                'Ecuador':'厄瓜多尔',  'Egypt':'埃及','Eritrea':'厄立特里亚','Spain':'西班牙', 'Estonia':'爱沙尼亚',  'Ethiopia':'埃塞俄比亚',  'Finland':'芬兰', 'Fiji':'斐', 'Falkland Islands':'福克兰群岛', 'France':'法国',  'Gabon':'加蓬', 'United Kingdom':'英国',
                'Ghana':'加纳',  'Guinea':'几内亚', 'Gambia':'冈比亚',  'Guinea Bissau':'几内亚比绍','Equatorial Guinea':'赤道几内亚', 'Greece':'希腊', 'Greenland':'格陵兰', 'Guatemala':'危地马拉', 'French Guiana':'法属圭亚那',
                'Guyana':'圭亚那',  'Honduras':'洪都拉斯', 'Croatia':'克罗地亚', 'Haiti':'海地',  'Hungary':'匈牙利',  'Indonesia':'印尼', 'India':'印度',   'Ireland':'爱尔兰',  'Iran':'伊朗','Georgia':'格鲁吉亚','United States of America':'美国',
                'Iraq':'伊拉克', 'Iceland':'冰岛', 'Israel':'以色列',   'Italy':'意大利',  'Jamaica':'牙买加',  'Jordan':'约旦', 'Japan':'日本', 'Kazakhstan':'哈萨克斯坦',  'Kenya':'肯尼亚',  'Kyrgyzstan':'吉尔吉斯斯坦',  'Cambodia':'柬埔寨',
                'South Korea':'韩国',  'Kosovo':'科索沃',  'Kuwait':'科威特',  'Laos':'老挝',  'Lebanon':'黎巴嫩', 'Liberia':'利比里亚',  'Libya':'利比亚',  'Sri Lanka':'斯里兰卡', 'Lesotho':'莱索托', 'Lithuania':'立陶宛',  'Luxembourg':'卢森堡',
                'Latvia':'拉脱维亚','Morocco':'摩洛哥', 'Moldova':'摩尔多瓦',  'Madagascar':'马达加斯加',  'Mexico':'墨西哥', 'Macedonia':'马其顿', 'Mali':'马里',  'Myanmar':'缅甸',  'Montenegro':'黑山', '*':'蒙古', 'Mozambique':'莫桑比克',
                'Mauritania':'毛里塔尼亚','Malawi':'马拉维', 'Malaysia':'马来西亚', 'Namibia':'纳米比亚', 'New Caledonia':'新喀里多尼亚', 'Niger':'尼日尔','Nigeria':'尼日利亚', 'Nicaragua':'尼加拉瓜', 'Netherlands':'荷兰', 'Norway':'挪威',
                'Nepal':'尼泊尔','New Zealand':'新西兰', 'Oman':'阿曼', 'Pakistan':'巴基斯坦','Panama':'*','Peru':'秘鲁',  'Philippines':'菲律宾', 'Papua New Guinea':'巴布亚新几内亚', 'Poland':'波兰','Puerto Rico':'波多黎各',
                'North Korea':'北朝鲜',  'Portugal':'葡萄牙',  'Paraguay':'巴拉圭',  'Qatar':'卡塔尔',  'Romania':'罗马尼亚', 'Russia':'俄罗斯','Rwanda':'卢旺达',  'Western Sahara':'西撒哈拉', 'Saudi Arabia':'沙特阿拉伯','Sudan':'苏丹',
                'South Sudan':'南苏丹', 'Senegal':'塞内加尔',   'Solomon Islands':'所罗门群岛',     'Sierra Leone':'塞拉利昂', 'El Salvador':'萨尔瓦多', 'Somaliland':'索马里兰',  'Somalia':'索马里',  'Republic of Serbia':'塞尔维亚*',
                'Suriname':'苏里南','Slovakia':'斯洛伐克',  'Slovenia':'斯洛文尼亚','Sweden':'瑞典',  'Swaziland':'斯威士兰', 'Syria':'叙利亚', 'Chad':'乍得',  'Togo':'多哥',   'Thailand':'泰国', 'Tajikistan':'塔吉克斯坦',  'Turkmenistan':'土库曼斯坦',
                'East Timor':'东帝汶','Trinidad and Tobago':'特里尼达和多巴哥','Tunisia':'突尼斯','Turkey':'土耳其', 'United Republic of Tanzania':'坦桑尼亚联合*',    'Uganda':'乌干达',  'Ukraine':'乌克兰',  'Uruguay':'乌拉圭',
                'Uzbekistan':'乌兹别克斯坦',    'Venezuela':'委内瑞拉', 'Vietnam':'越南',  'Vanuatu':'瓦努阿图',  'West Bank':'西岸',  'Yemen':'也门',   'South Africa':'南非',  'Zambia':'赞比亚',  'Zimbabwe':'津巴布韦' ,'Bosnia and Herzegovina':'波斯尼亚和黑塞哥维那'
         };
    var option = {
            title : {
                text: '终端分布',
                x:'center',
                y:'top',
                textStyle : {
                    fontSize: 18,
                    fontWeight: 100,
                    color: '#999',
                    fontFamily: '"Microsoft Yahei",simhei'
                   }
            },
            backgroundColor:$(".w_b50").css('background-color'),
            tooltip : {
                trigger: 'item',
                textStyle : {
                    fontSize: 11,
                    fontWeight: 60,
                    color: '#ccc',
                    fontFamily: '"Microsoft Yahei",simhei'
                },
                formatter : function (params) {
                var value=params.value;
                    if(value>=0){
                        return '设备总数' + '<br/>' + params.name + ' : ' + value;
                    }else{
                     return '设备总数' + '<br/>' + params.name + ' : ' + 0;
                    }
                }
            },
            dataRange: {
                show: false,
                min: 1,
                max: 10,
                text:['高','低'], // 文本，默认为数值文本
                realtime: false,
                calculable : true,
                color: ['#da70d6', '#32cd32', '#6495ed','#6b8e23','orange',
                        '#ba55d3', '#cd5c5c', '#ffa500', '#00fa9a','#ff00ff',
                        '#ff6347', '#7b68ee', '#3cb371']
            },
            toolbox: {
                show : true,
                x:'right',
                borderColor:'#ccc',
                itemSize:14,
                feature : {
                    selfButtons:{//自定义按钮
                           show:true,
                           title:'world', //鼠标移动上去显示的文字
                           icon:'<%=request.getContextPath()%>/images/world.png',
                           option:{},
                           onclick:function(param) {//点击事件
                               loaddata(null,'dev_country_id'); //回到世界地图
                           }
                        },
                }
            },
            series : [{
                    name: '设备总数',
                    type: 'map',
                    mapType: 'world',
                    roam: false,
                    mapLocation: {
                        y : 40
                    },
                    itemStyle:{
                        normal:{
                           areaStyle:{color:'lightskyblue'}
                         },
                       emphasis:{label:{show:true}},
                       },
                    data:[],
                    nameMap :namemapping //国家英文名映射为中文名
           }]
       };
    var myChart;

    $(function(){
        initMap();
    });
    $(window).resize(function(){
        myChart.resize();
    });
    //初始化地图
    function initMap(){
        myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
        loaddata(null,'dev_country_id');
        var i=0;
        myChart.on("click",function(params){
            var select= params.name;
            if(option.series[0].mapType=='world' && select=='中国'){//进入中国
                loaddata(null,'dev_province_id');
            }else if(option.series[0].mapType!='world' && select!='中国'){//中国省或市地图
                if(i%2==0 && option.series[0].mapType=='china'){//为0进入市图
                    loaddata(select,'dev_city_id');
                }else if(i%2==1 && option.series[0].mapType!='china'){//为1进入中国图
                    loaddata(null,'dev_province_id');
                }
                i++;
            }
        });
    }

    function loaddata(cityname,countryField){
        var url="<%=request.getContextPath()%>/cities/devicecountrylist.json";
        ajaxRequestPost(url,{"countryField":countryField},function(result){
                var data=[];
                for(var i=0;i<result.length;i++){
                    if(result[i].value>0){//过滤设备数小于0的地址
                    var d={'name':result[i].name,'value':result[i].value};
                    data.push(d);
                    }
                }
              option.series[0].data=data;
              if(countryField=='dev_country_id'){//显示世界地图
                  option.series[0].mapType='world';
                myChart.setOption(option);
              }else if(countryField=='dev_province_id'){//显示中国地图
                  option.series[0].mapType='china';
                myChart.setOption(option);
              }else if(countryField=='dev_city_id'){//显示省地图
                  option.series[0].mapType=cityname;
                myChart.setOption(option);
              }
        })
    };
    </script>
    </div>

其中，浏览器缩放时调用echarts的resize方法，不需要每次都重构echarts地图（即重新初始化地图，加载慢）。

采用该方式首次加载时间为4-5秒，仍然不够快。

2、官网自定义构建地图方式：

　　使用官网 http://echarts.baidu.com/echarts2/ 在线构建工具，构建地图(大小734KB)严重错位，暂时放弃该方式。

3、去除压缩版全图表不相关模块：

　　压缩版全图表 echarts-all.js(949KB)，我们只需要map地图，去除多余其他部分，正好研究下源码。

　　去除多余的模块如下：

echarts/chart/line
echarts/chart/bar
echarts/chart/scatter
echarts/chart/k
echarts/chart/pie
echarts/chart/radar
echarts/chart/chord
echarts/chart/force
echarts/chart/gauge
echarts/chart/funnel
echarts/chart/eventRiver
echarts/chart/venn
echarts/chart/treemap
echarts/chart/tree
echarts/chart/wordCloud
echarts/chart/heatmap

echarts/component/timeline

echarts/layout/Chord
echarts/layout/eventRiver
echarts/layout/Force
echarts/layout/forceLayoutWorker
echarts/layout/WordCloudRectZero
echarts/layout/Tree
echarts/layout/TreeMap
echarts/layout/WordCloud
echarts/theme/infographic
echarts/theme/macarons

zrender/loadingEffect/Bar
zrender/loadingEffect/Bubble
zrender/loadingEffect/DynamicLine
zrender/loadingEffect/Ring
zrender/loadingEffect/Spin
zrender/loadingEffect/Whirling
zrender/shape/Droplet

zrender/shape/Heart
zrender/shape/Star

echarts/component/polar
echarts/data/Graph
echarts/data/Tree
echarts/util/coordinates
echarts/util/date
echarts/util/shape/HalfSmoothPolygon
echarts/util/shape/Ribbon
echarts/util/smartLogSteps

每个模块定义标识(define )如下：

define('zrender/zrender', [
    'require',
    './dep/excanvas',
    './tool/util',
    './tool/log',
    './tool/guid',
    './Handler',
    './Painter',
    './Storage',
    './animation/Animation',
    './tool/env'
], function (require) {
...

去除后大小为756KB，测试地图首次加载时间为3-4秒，不够快速。

4、异步加载js文件：

　　H5的js加载属性async (旧的html也具备) 实现异步加载。

　　但存在一个问题，地图加载时echarts js还未加载，导致无法初始化地图。

　　1、想到判断js加载完，再执行地图初始化。

$.getScript("<%=request.getContextPath()%>/dist/echarts-all.js",function(){
　　initMap();//js加载完成，继续执行后续代码
});

　　执行结果仍类似同步加载js，无法加速。

　　2、在登录页实现异步加载，再在使用页面引入js文件。

　　之前还采用了在登录成功后跳转的第一个页面同步加载echarts文件，但导致登录缓慢，影响体验。

　　联想到浏览器会缓存js等文件，采用在系统登录页异步加载echarts文件，在不影响体验又不影响性能的情况下，将echarts文件加载了，并交由浏览器缓存。

　　接着只要在使用的地方采用普通方式引入即可，不会再从服务器下载，而使用缓存的js文件。

　　①登录页login.jsp异步加载js文件：

<script type="text/javascript" src="<%=request.getContextPath()%>/dist/echarts-all.js" async="async"></script>

　　②登录后地图页面引入js文件( 使用的却是浏览器缓存的js文件)

<script type="text/javascript" src="<%=request.getContextPath()%>/dist/echarts-all.js"></script>

　　再次测试地图首次加载时间,1-2秒！和普通页面跳转时间一样。

　　==========================================

　　总结：利用浏览器缓存特性，可将大的文件或图片在未使用前异步加载，再在使用的地方引入，能有效避免同步加载缓慢问题。