JS效率大比拼，收集帖

Question

抛砖引玉，我先来一个16毫秒var now=new Date();
document.write(new Array(10000).join("10000条数据，"));
alert(new Date()-now);
360毫秒now=new Date();
for(i=1;i<=10000;i++){
  document.write("10000条数据，");
}
alert(new Date()-now);
同样的结果，上面的代码比下面的效率快到20多倍。大家有高效率的代码，拿出来晒晒吧

Answer 1

的确，一次写入当然要比循环写入的效率来得高PS：
var now=new Date();
document.write(new Array(10001).join("10000条数据，"));
alert(new Date()-now);
这样才是10000条喔

Answer 2

我觉得alter很耗时间，如果去掉看看，时间会不会少很多

Answer 3

297毫秒var now=new Date();
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var el = document.createElement('p');
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag); 
alert(new Date()-now);
15毫秒
var now=new Date();
var html = [];
for (var i = 0; i < 1000; i++) {
html.push('   ' + i + '   ');
}
document.body.innerHTML = html.join(''); 
alert(new Date()-now);
PS:使用一次 innerHTML 赋值代替构建 dom 元素 说明：根据数据构建列表样式的时候，使用设置列表容器 innerHTML 的方式，比构建 dom 元素并 append 到页面中的方式，效率有数量级上的提高

Answer 4

我用document.write()打印出来也没有发现少

Answer 5

重复使用的调用结果，事先保存到局部变量，避免多次取值的调用开销。 示例：   
var h1 = element1.clientHeight + num1;
var h2 = element1.clientHeight + num2;正确高效写法：   
var eleHeight = element1.clientHeight;
var h1 = eleHeight + num1;
var h2 = eleHeight + num2; 

Answer 6

for (var i = 0; i < 10001; i++) html.push('   ' + i + '   ') 改为 html[html.length] ='   ' + i + '   '

Answer 7

不错，还有基本的。//大量拼接
var html = '';
html += '...';
html += '...';
html += '...';
html += '...';
html += '...';
html += '...';
...
alert(html);比var html = [
'...',
'...',
'...',
..
..
];
alert(html.join(""));要慢。

Answer 8

javascript效率还和个人电脑的CPU内存挂钩。
还是讨论一下如何改善javascript的内存使用吧。

Answer 9

高速创建table
http://topic.csdn.net/u/20090713/11/2a5ba650-f209-4c8e-8df4-b7afd4fb43cb.html

Answer 10

这样的时效当然不同咯 document.write执行后浏览器要进行渲染

Answer 11

jQuery里的一个  +new Date()　＝＝  new Date().getTime()

Answer 12

觉得本贴第一个不能那样测，
now=new Date();
for(i=1;i<=10000;i++){
  document.write("10000条数据，");
}
alert(new Date()-now);
-----------------------------------
now=new Date();
var str='';
for(i=1;i<=10000;i++){)
   str+='10000条数据';
document.write(str);
alert(new Date()-now);这样才公平，要不然会执行10000次write,当然慢了

Answer 13

每次往字符串后面append一个串的时候，都会导致一次内存分配、一次字符串拷贝，并且产生一个垃圾。是非常低效的做法。

Answer 14

我发一个吧。JS中模拟VBS的Space函数：Space(n)产生一个n个连续空格的字符串。在快速初始化大字符串的时候很有用。
之前在网上没搜到好的做法，这次自己发一个。
方法1：这是最简单最容易想到的方法，往一个字符串后面不断append空格：function Space(n)
{
  var str1=""
  var s1;
  for(s1=0;s1<n;s1++)
  {
      str1+=' ';
  }
  return str1;
}
方法2：利用JS数组的join方法：function Space(n)
{
    var a1=new Array(n+1);
    return a1.join(" ");
}
方法3：用二分法，递归构建字符串。function Space3(n)
{
    if(n>3)
    {
        var str1=Space3(Math.floor(n/2));
        str1+=str1;
        if(n%2!=0){ return str1+" ";}
        else { return str1;}
    }else if(n==3)
    {
        return "   ";
    }else if(n==2)
    {
        return "  ";
    }
    return " ";
}
测试结果：n的值：      100000    500000  
方法1耗时：   2781毫秒  242000毫秒  
方法2耗时：   15毫秒    141毫秒 
方法3耗时：   0毫秒     16毫秒 
VBS的Space函数：0毫秒   0毫秒 （VBS这组没有可比性，仅供参考）