怎么优化JS代码
这篇文章主要讲解了“怎么优化JS代码”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么优化JS代码”吧！
创新互联公司基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽，联通大带宽，移动大带宽，多线BGP大带宽租用,是为众多客户提供专业服务器托管报价，主机托管价格性价比高，为金融证券行业移动服务器托管，ai人工智能服务器托管提供bgp线路100M独享，G口带宽及机柜租用的专业成都idc公司。
1、字符串的拼接
字符串的拼接在我们开发中会经常遇到，所以我把其放在首位，我们往往习惯的直接用+=的方式来拼接字符串，其实这种拼接的方式效率非常的低，我们可以用一种巧妙的方法来实现字符串的拼接，那就是利用数组的join方法。
//效率低的 function func1(){ var start = new Date().getTime(); var template = ""; for(var i = 0; i < 10000; i++){ template += ""; } var end = new Date().getTime(); document.getElementById("one").innerHTML = template; alert("用时:" + (end - start) + "毫秒"); } //效率高的 function func2(){ var start = new Date().getTime(); var array = []; for(var i = 0; i < 10000; i++){ array[i] = ""; } var end = new Date().getTime(); document.getElementById("one").innerHTML = array.join(""); alert("用时:" + (end - start) + "毫秒"); }我们看看其在不同浏览器下执行的情况
我们会发现，在IE6下其差别是相当明显的，其实这种情况在IE的高版本中体现的也非常明显，但是在Firefox下却没有多大的区别，相反第二种的相对效率还要低点，不过只是差别2ms左右，而Chrome也和Firefox类似。另外在这里顺便说明一下，在我们给数组添加元素的时候，很多人喜欢用数组的原生的方法push，其实直接用arr[i]或者arr[arr.length]的方式要快一点，大概在10000次循环的情况IE浏览器下会有十几毫秒的差别。
2、for循环
for循环是我们经常会遇到的情况，我们先看看下面例子：
var arr = []; for(var i = 0; i < 10000; i++){ arr[i] = "" + i + "
"; } document.body.innerHTML += arr.join(""); //效率低的 function func1(){ var divs = document.getElementsByTagName("div"); var start = new Date().getTime(); for(var i = 0; i < divs.length; i++){ //"效率低" } var end = new Date().getTime(); alert("用时：" + (end - start) + "毫秒"); } //效率高的 function func2(){ var divs = document.getElementsByTagName("div"); var start = new Date().getTime(); for(var i = 0, len = divs.length; i < len; i++){ //"效率高" } var end = new Date().getTime(); alert("用时：" + (end - start) + "毫秒"); }
由上表可以看出，在IE6.0下，其差别是非常明显，而在Firefox和Chrome下几乎没有差别，之所以在IE6.0下会有这种情况，主要是因为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点，所以在我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。但是并不是只要是取长度都会出现如此明显的差别，如果我们仅仅是操作一个数组，取得的是一个数组的长度，那么其实两种方式的写法都差不多，我们看下面的例子：
var arr2 = []; for(var i = 0; i < 10000; i++){ arr2[i] = "" + i + "
"; } //效率低的 function func1(){ var start = new Date().getTime(); for(var i = 0; i < arr2.length; i++){ //"效率低" } var end = new Date().getTime(); alert("用时：" + (end - start) + "毫秒"); } //效率高的 function func2(){ var start = new Date().getTime(); for(var i = 0, len = arr2.length; i < len; i++){ //"效率高" } var end = new Date().getTime(); alert("用时：" + (end - start) + "毫秒"); }
从上表可以看出，如果仅仅是一个数组的话，我们看到其实两种写法都是差不多的，其实如果我们把循环再上调到100000次的话，也仅仅是差别几毫秒而已，所以在数组的情况下，我认为都是一样的。对于for循环的优化，也有人提出很多点，有人认为用-=1，或者从大到小的方式循环等等，我认为是完全没有必要的，这些优化往往实际情况下根本没有表现出来，换句话说只是计算机级别的微小的变化，但是给我们带来的却是代码的可读性大大的降低，所以实在是得不偿失。
3、减少页面的重绘
减少页面重绘虽然本质不是JS本身的优化，但是其往往是由JS引起的，而重绘的情况往往是严重影响页面性能的，所以完全有必要拿出来，我们看下面例子：
var str = "这是一个测试字符串
这是一个测试字符串
这是一个测试字符串
这是一个测试字符串
这是一个测试字符串
这是一个测试字符串
这是一个测试字符串
这是一个测试字符串
这是一个测试字符串
这是一个测试字符串
这是一个测试字符串
这是一个测试字符串
这是一个测试字符串
"; //效率低的 function func1(){ var obj = document.getElementById("demo"); var start = new Date().getTime(); for(var i = 0; i < 100; i++){ obj.innerHTML += str + i; } var end = new Date().getTime(); alert("用时 " + (end - start) + " 毫秒"); } //效率高的 function func2(){ var obj = document.getElementById("demo"); var start = new Date().getTime(); var arr = []; for(var i = 0; i < 100; i++){ arr[i] = str + i; } obj.innerHTML = arr.join(""); var end = new Date().getTime(); alert("用时 " + (end - start) + " 毫秒"); }
在例子中，我只是用了100次的循环，因为如果用10000次循环的话，浏览器基本上就卡住不动了，但是即使是100次的循环，我们看看下面的执行结果。
可以看到的是，这简直是一个惊人的结果，仅仅100次的循环，不管是在什么浏览器下，都出现了如此之大的差别，另外我们还发现，在这里，IE6的执行效率居然比起Firefox还要好很多，可见Firefox在页面重绘这方面并没有做一些的优化。这里还要注意的是，一般影响页面重绘的不仅仅是innerHTML，如果改变元素的样式，位置等情况都会触发页面重绘，所以在平时一定要注意这点。
4、减少作用域链上的查找次数
我们知道，js代码在执行的时候，如果需要访问一个变量或者一个函数的时候，它需要遍历当前执行环境的作用域链，而遍历是从这个作用域链的前端一级一级的向后遍历，直到全局执行环境，所以这里往往会出现一个情况，那就是如果我们需要经常访问全局环境的变量对象的时候，我们每次都必须在当前作用域链上一级一级的遍历，这显然是比较耗时的，我们看下面的例子：
上面代码中，第二种情况是先把全局对象的变量放到函数里面先保存下来，然后直接访问这个变量，而第一种情况是每次都遍历作用域链，直到全局环境，我们看到第二种情况实际上只遍历了一次，而第一种情况却是每次都遍历了，所以我们看看其执行结果：
双重解释的情况也是我们经常会碰到的，有的时候我们没怎么考虑到这种情况会影响到效率，双重解释一般在我们使用eval、new Function和setTimeout等情况下会遇到，我们看看下面的例子：
感谢"SeaSunK"对第四点测试报告错误的指正，现在已经修改过来了。至于最后一点提出的func1每次都初始化，没有可比性，所以我给换了eval，结果发现，在IE6.0下还是有影响，而且在Firefox下，使用eval对效率的影响程度更加厉害，在Firefox下，如果10000次循环，需要十多秒的时间，所以我把循环都变成了1000次。看代码和报告。
感谢各位的阅读，以上就是“怎么优化JS代码”的内容了，经过本文的学习后，相信大家对怎么优化JS代码这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
