高效js

/**高效 Javascript 编码Fast Loops循环是大多数脚本最基本的一个部分，在大多数情况下，循环不会有任何效率问题。但是，通过优化循环条件，还是可以让循环运行的更快一些看下面的几个例子*/for(var i = 0 ; i < document.getElementsByTagName('tr').length ; i++){document.getElementsByTagName('tr')[i].className = "newclass";document.getElementsByTagName('tr')[i].style.color = "red";...}var rows = document.getElementsByTagName("tr");for(var i = 0 ; i < rows.length ; i++){rows[i].className = "newclass";rows[i].style.color = "red";...}/*上面两个都不是高效的，getElementsByTagName返回一个动态的对象，而不是一个静态的数组。每次循环的时候，解析器都会再次检查对象，并且需要重新计算出有多少对象被引用。下面是一种好一些的方式来进行这种循环（下面的第一种通常是最好的方式）*//**这种写法稍微有点不太好理解这种方式的理解需要彻底的了解for循环for循环有两个分号，等于说可以传3个参数第一段实际上就是用来定义变量的第二段实际上就是传入一个表达式第三段一般传入的递增或者递减我们需要仔细分析的第二段只要是个表达式我们平常使用的是i>1 , i< 100之类的仔细看下，这种东西实际上返回的不是false就是true所以，我们在这个地方传入的是false或者true的boolean值就行了而这段代码里面传入的是row = rows[i]实际上判断boolean值的就是row这个变量只要变量row转换为boolean的时候为true就继续进行循环而rows[i]的i超过一定大小之后rows[i]就是null那么row也是null，null转换为boolean值的时候就是==false所以会停止循环，也就是循环判断终止的条件*/var rows = document.getElementsByTagName("tr");for(var i = 0 , row;row = rows[i];i++){row.className = 'newclass';row.style.color = 'color';...}var rows = document.getElementsByTagName("tr");for(var i = rows.length - 1; i > -1;i--){var row = rows[i];row.className = 'newclass';row.style.color = 'color';...}/*这下面这一种是我们经常能看到的，虽然做了变量缓存，但是增加了一个不必要的变量m，增加了内存的使用量*/var rows = document.getElementsByTagName("tr");for(var i = 0 , m = rows.length; i < m;i++){var row = rows[i];row.className = 'newclass';row.style.color = 'color';...}/*Reduce reflow每次我们添加一个元素到document中，浏览器必须重新reflow整个page，所有的元素都会被重新设置位置和渲染你添加的元素次数越多，reflow的次数也就越多。所以应该减少reflow的次数，这样页面的展现也就越快。如果你需要添加一个新元素，并且这个元素有很多子节点。应该先将子元素添加到新元素上面，然后才将新元素append到页面上这样只需要一次的reflow但是有一种情况就是你添加一个节点，并且需要给他新加一些相邻节点这种情况下可以新建一个fragment，然后将这些节点加入到fragment上面最后将fragment添加到document中。*//*Assign multiple styles我们通过js来修改元素的style的时候经常会这么写*/oElement.style.position = "absolute";oElement.style.top = "0px";oElement.style.left = "0px";...etc.../*再看另外一种写法*/oElement.setAttribute("style","position:absolute;top:0px;left:0px;...etc...");/*这种方式也可以将reflow的次数降低到一次*/

? 1 楼 haytalent 2011-01-12 受教了，谢谢 2 楼 bulktree 2011-01-12 LZ测试了吗？ 没看出来效率好到哪去 3 楼 李俊良 2011-01-12 bulktree 写道LZ测试了吗？ 没看出来效率好到哪去
测试过
不过得需要大量的数据量才能真正测试出来

一般用户用不着

但是只有做到很高层次的应用上面，或者框架的编写上才会有用

其中很多至少可以从原理上面分析就是正确的

自己可以测试下 4 楼 argont 2011-01-13 高效并没有见得，不过可能是常用的编码方式。 5 楼 lx_corn 2011-01-14 希望楼主可以 加入测试数据 这样会 更有说服力。

oElement.style.position = "absolute";
oElement.style.top = "0px";
oElement.style.left = "0px";
...etc...

/*再看另外一种写法*/
oElement.setAttribute("style","position:absolute;top:0px;left:0px;...etc...");

这样 会不会把原来style属性覆盖掉呢？ 即 本来 不想修改的部分数据