高效js

1. /** 
2. 高效 Javascript 编码 
3.  
4. Fast Loops 
5. 循环是大多数脚本最基本的一个部分，在大多数情况下，循环不会有任何效率问题。 
6. 但是，通过优化循环条件，还是可以让循环运行的更快一些 
7. 看下面的几个例子 
8. */  
9.   
10. for(var i = 0 ; i < document.getElementsByTagName('tr').length ; i++){  
11.     document.getElementsByTagName('tr')[i].className = "newclass";  
12.     document.getElementsByTagName('tr')[i].style.color = "red";  
13.     ...  
14. }  
15.   
16. var rows = document.getElementsByTagName("tr");  
17. for(var i = 0 ; i < rows.length ; i++){  
18.     rows[i].className = "newclass";  
19.     rows[i].style.color = "red";  
20.     ...  
21. }  
22. /* 
23. 上面两个都不是高效的，getElementsByTagName返回一个动态的对象，而不是一个静态的数组。 
24. 每次循环的时候，解析器都会再次检查对象，并且需要重新计算出有多少对象被引用。 
25. 下面是一种好一些的方式来进行这种循环（下面的第一种通常是最好的方式） 
26. */  
27.   
28. /** 
29. 这种写法稍微有点不太好理解 
30. 这种方式的理解需要彻底的了解for循环 
31. for循环有两个分号，等于说可以传3个参数 
32. 第一段实际上就是用来定义变量的 
33. 第二段实际上就是传入一个表达式 
34. 第三段一般传入的递增或者递减 
35.  
36. 我们需要仔细分析的第二段 
37. 只要是个表达式 
38. 我们平常使用的是i>1 , i< 100之类的 
39. 仔细看下，这种东西实际上返回的不是false就是true 
40. 所以，我们在这个地方传入的是false或者true的boolean值就行了 
41. 而这段代码里面传入的是 
42. row = rows[i] 
43. 实际上判断boolean值的就是row这个变量 
44. 只要变量row转换为boolean的时候为true就继续进行循环 
45. 而rows[i]的i超过一定大小之后rows[i]就是null 
46. 那么row也是null，null转换为boolean值的时候就是==false 
47. 所以会停止循环，也就是循环判断终止的条件 
48. */  
49. var rows = document.getElementsByTagName("tr");  
50. for(var i = 0 , row;row = rows[i];i++){  
51.     row.className = 'newclass';  
52.     row.style.color = 'color';  
53.     ...  
54. }  
55.   
56. var rows = document.getElementsByTagName("tr");  
57. for(var i = rows.length - 1; i > -1;i--){  
58.     var row = rows[i];  
59.     row.className = 'newclass';  
60.     row.style.color = 'color';  
61.     ...  
62. }  
63.   
64. /*这下面这一种是我们经常能看到的，虽然做了变量缓存，但是增加了一个不必要的变量m，增加了内存的使用量*/  
65. var rows = document.getElementsByTagName("tr");  
66. for(var i = 0 , m = rows.length; i < m;i++){  
67.     var row = rows[i];  
68.     row.className = 'newclass';  
69.     row.style.color = 'color';  
70.     ...  
71. }  
72.   
73. /* 
74. Reduce reflow 
75.  
76. 每次我们添加一个元素到document中，浏览器必须重新reflow整个page，所有的元素都会被重新设置位置和渲染 
77. 你添加的元素次数越多，reflow的次数也就越多。 
78. 所以应该减少reflow的次数，这样页面的展现也就越快。 
79. 如果你需要添加一个新元素，并且这个元素有很多子节点。 
80. 应该先将子元素添加到新元素上面，然后才将新元素append到页面上 
81. 这样只需要一次的reflow 
82.  
83. 但是有一种情况 
84. 就是你添加一个节点，并且需要给他新加一些相邻节点 
85. 这种情况下可以新建一个fragment，然后将这些节点加入到fragment上面 
86. 最后将fragment添加到document中。 
87. */  
88.   
89. /* 
90. Assign multiple styles 
91.  
92. 我们通过js来修改元素的style的时候 
93. 经常会这么写 
94. */  
95. oElement.style.position = "absolute";  
96. oElement.style.top = "0px";  
97. oElement.style.left = "0px";  
98. ...etc...  
99.   
100. /*再看另外一种写法*/  
101. oElement.setAttribute("style","position:absolute;top:0px;left:0px;...etc...");  
102.   
103. /*这种方式也可以将reflow的次数降低到一次*/