高效的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 ...');
posted @ 2019-10-30 14:23  shirliey  阅读(972)  评论(0编辑  收藏  举报