字符串累加性能对别实践

1.在运用javascript处理事件中，我们经常会需要利用到字符串累加组合成一段我们需要的html片段，那么在这些事件处理中或多或少使用的方太并不一样，下面就对比下几种连字符的方法并对比它们在相同环境下的性能差异。

　　在进入正题前先普及下用于获取js执行所需时间（即性能消耗所用时间越久开销越大）获取执行时间需要两个方法

　　　　　　1.console.time('键') 开始时间

　　　　　　2.console.timeEnd('对应time中的键') 停止计时 

　　方法1：连字符方法

    console.time('testStringEnDash')

    var   test = '' ;

    for(var i = 0;i<99999;i++){

    　　test+='<div>test</div>'

    }

    console.timeEnd('testStringEnDash')
     输出区间代码块执行所需时间  testStringEnDash: 0.16796875ms  谷歌下

　　　　　　　　　　　　　       testStringEnDash: 1ms     火狐下

　　　　　　　　　　　　　　　　　testStringEnDash: 1 毫秒   IE edge下

　　方法2：数组方法（Array.prototype.join）

 

    console.time('testStringEnDash')

     var   test = [] ;

     for(var i = 0;i<99999;i++){

        test.push('<div>test</div>')

     }

    test.join()

     console.timeEnd('testStringEnDash')  

     输出区间代码执行所需时间    testStringEnDash: 1ms  火狐下
        
                             testStringEnDash: 0.557373046875ms 谷歌

                             testStringEnDash: testStringEnDash: 0.4 毫秒  IE

 

　  

这一段数据是模拟高数量字符串拼接时

 console.time('testStringEnDash')

    var   test = '' ;

 for(var i = 0;i<999999;i++){

        test+='<div>test</div>'

  }

 console.timeEnd('testStringEnDash') 

    console.time('testStringEnDashArr')

    var   testArr = [] ;

    for(var i = 0;i<999999;i++){

        testArr.push('<div>test</div>')

    }

    testArr.join()

  console.timeEnd('testStringEnDashArr') 

谷歌下数据

VM372:6 testStringEnDash: 144.77099609375ms 
VM372:13 testStringEnDashArr: 87.14794921875ms    

火狐下数据

　　testStringEnDash: 740ms debugger eval code:11:2

　　testStringEnDashArr: 655ms

 

　　IE下数据

　　testStringEnDash: 1,404.2 毫秒

　　testStringEnDashArr: 402.3 毫秒

 

这一段数据是模拟高字符串数量拼接时

 
　　console.time('testStringEnDash')
　　var test = '' ;
　　for(var i = 0;i<1000;i++){
　　　　test+='<div>当调用一个函数时，浏览器会进行作用域查找，这个时间花销跟浏览器要查找的作用域数有关。不要依赖全局/高层作用域变量，而是创建局部作用域变量，然后传递给函数。查找的作用域数越少，就运行更快。当调用一个函数时，浏览器会进行作用域查找，这个时间花销跟浏览器要查找的作用域数有关。不要依赖全局/高层作用域变量，而是创建局部作用域变量，然后传递给函数。查找的作用域数越少，就运行更快。当调用一个函数时，浏览器会进行作用域查找，这个时间花销跟浏览器要查找的作用域数有关。不要依赖全局/高层作用域　量，而是创建局部作用域变量，然后传递给函数。查找的作用域数越少，就运行更快。当调用一个函数时，浏览器会进行作用域查找，这个时间花销跟浏览器要查找的作用域数有关。不要依赖全局/高层作用域变量，而是创建局部作用域变量，然后传递给函数。查找的作用域数越　　　　少，就运行更快。</div>'

  　　}

  　　console.timeEnd('testStringEnDash')
 　　console.time('testStringEnDashArr')
　　var   testArr = [] ;
 　　for(var i = 0;i<1000;i++){
　　　　testArr.push('<div>当调用一个函数时，浏览器会进行作用域查找，这个时间花销跟浏览器要查找的作用域数有关。不要依赖全局/高层作用域变量，而是创建局部作用域变量，然后传递给函数。查找的作用域数越少，就运行更快。当调用一个函数时，浏览器会进行作用域查找，这个时间花销跟浏览器要查找的作用域数有关。不要依赖全局/高层作用域变量，而是创建局部作用域变量，然后传递给函数。查找的作用域数越少，就运行更快。当调用一个函数时，浏览器会进行作用域查找，这个时间花销跟浏览器要查找的作用域数有关。不要依赖全局/高层作用域变量，而是创建局部作用域变量，然后传递给函数。查找的作用域数越少，就运行更快。当调用一个函数时，浏览器会进行作用域查找，这个时间花销跟浏览器要查找的作用域数有关。不要依赖全局/高层作用域变量，而是创建局部作用域变量，然后传递给函数。查找的作用域数越少，就运行更快。</div>')
  　　}
　　testArr.join()
  　　console.timeEnd('testStringEnDashArr')
　　谷歌下
　　VM387:6 testStringEnDash: 0.138916015625ms
　　VM387:13 testStringEnDashArr: 0.61376953125ms
　　火狐下
　　testStringEnDash: 3ms debugger eval code:6:3 
　　testStringEnDashArr: 4ms
 
　　IE
　　testStringEnDash: 0.4 毫秒
　　testStringEnDashArr: 0.6 毫秒

 

　　在这里我们可以看到在各3大主流浏览器下 在循环次数以及内容并不多时使用 +链接字符串 和 数组方式配合jion链接字符串 所需时间相差无几甚至在谷歌下还出现了运行更快的结果，但是当内容多起来后，或者循环次数一旦多起来后基本上是用Array.prototype.join方法性能更好些

 

　　后续会补齐使用Array.prototype.concat方法做字符串连接的性能对比（如描述有所错误敬请指点）