高效的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 ...');