ie8加载js太慢_web项目中js加载慢问题解决思路

95 阅读 0 评论 63 点赞

我是靠谱客的博主眯眯眼宝贝，最近开发中收集的这篇文章主要介绍ie8加载js太慢_web项目中js加载慢问题解决思路，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

js配置代码如下：

initMap();

});

$(window).resize(function(){

initMap();

});functioninitMap(){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':'黑山', 'Mongolia':'蒙古', '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 '设备总数' + '
' + params.name + ' : ' +value;

}else{return '设备总数' + '
' + 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//国家英文名映射为中文名

}]

};functionloaddata(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;i0){//过滤设备数小于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++;

}

});

}

);

}

解决思路：

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

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

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

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

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':'黑山', 'Mongolia':'蒙古', '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 '设备总数' + '
' + params.name + ' : ' +value;

}else{return '设备总数' + '
' + 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:'/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//国家英文名映射为中文名

}]

};varmyChart;

$(function(){

initMap();

});

$(window).resize(function(){

myChart.resize();

});//初始化地图

functioninitMap(){

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++;

}

});

}functionloaddata(cityname,countryField){var url="/cities/devicecountrylist.json";

ajaxRequestPost(url,{"countryField":countryField},function(result){var data=[];for(var i=0;i0){//过滤设备数小于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);

}

})

};

其中，浏览器缩放时调用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("/dist/echarts-all.js",function(){

initMap();//js加载完成，继续执行后续代码

});

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

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

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