高效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的次数降低到一次*/