高效的js原生代码

1、遍历元素

//不推荐

var element = document.getElementsByTagName('div');

for(var i=0; i<element.length; i++){

    element[i].innerHTML = '111';

    element[i].style.color = 'red';

}

//推荐
var element = document.getElementsByTagName('div');

for(var i=0,e; e=element[i]; i++){

    e.innerHTML = '111';
    e.style.color = 'red';

}

//推荐
var element = document.getElementsByTagName('div');

for(var i=0; i<element.length; i++){

    var e = element[i];

    e.innerHTML = '111';

    e.style.color = 'red';

}

2、字符串匹配

所有字符串匹配技术都非常快，但应谨慎使用，以免造成浪费。通常，在Opera中使用非常简单的字符串匹配，stringObject.indexOf比stringObject.match更快。如果搜索简单的字符串匹配项，应尽可能使用indexOf而不是正则表达式匹配项。

除非绝对必要，否则应避免与很长的字符串（10KB +）匹配。如果您确定匹配只会发生在字符串的特定部分，请选择一个子字符串，然后与之进行比较，而不是整个字符串。

正则表达式创建一次，重复使用。

3、减少计时器的使用

4、运用逻辑运算符&&（假前真后）

为了最大程度地提高效率，您可以先检查文件名，然后在满足文件名检查的情况下继续执行更昂贵的文件内容检查。

5、减少元素添加次数：每次向文档中添加元素时，浏览器都必须对页面进行重排，以计算出所有内容的放置和渲染方式。

var foo = document.createDocumentFragment();

foo.appendChild(document.createElement('p'););

foo.appendChild(document.createElement('p'));

foo.firstChild.appendChild(document.createTextNode('Test'));

foo.lastChild.appendChild(document.createTextNode('Me'));

foo.firstChild.style.color = 'green';

document.body.appendChild(foo);

6、分配多种样式

//低效

oElement.style.position = 'absolute';

oElement.style.top = '0px';

oElement.style.left = '0px';

//高效

oElement.setAttribute('style','position:absolute;top:0px;left:0px;... etc ...');