性能:
一.優(yōu)化性能
1.優(yōu)化for循環(huán):在循環(huán)體外算出需要循環(huán)的最大次數(shù)。
2.將DOM節(jié)點附加到文檔:
4.打破循環(huán)引用:當DOM結(jié)點于一個對象的屬性進行雙向引用后,由于DOM元素是一直存在的,所以其對象屬性即使沒有任何可編程的引用指向也不會被垃圾回收掉,所以需要手動編寫清除的函數(shù),把對象的屬性設(shè)置為null。
5.移除DOM元素:當需要再次使用某個DOM元素時候,優(yōu)先使用隱藏元素方式。當不再需要使用時候,使用移除元素方式。另外,在使用隱藏元素方式時候,可以首先檢測元素時候存在,不存在再建立元素。
一.優(yōu)化性能
1.優(yōu)化for循環(huán):在循環(huán)體外算出需要循環(huán)的最大次數(shù)。
2.將DOM節(jié)點附加到文檔:
1
var?container?=?document.createElement('div');
2
var?outer?=?document.getElementById('top');//已經(jīng)存在的結(jié)點
3
outer.appendChild(container);
4
for(var?i=0;i<count;i++){
6
??var?node?=?document.createElement('div');
7
??container.appendChild(node);
8
}
//因為首先是把附加容器加入到了DOM,然后再填充容器,所以整個文檔需要修改count+1次。
修正!
2

3

4

6

7

8

//因為首先是把附加容器加入到了DOM,然后再填充容器,所以整個文檔需要修改count+1次。
1
var?container?=?document.createElement('div');
2
var?outer?=?document.getElementById('top');//已經(jīng)存在的結(jié)點
3
for(var?i=0;i<count;i++){
4
??var?node?=?document.createElement('div');
5
??container.appendChild(node);
6
}
7
outer.appendChild(container);
//雖然container被修改了count次,但是對于整個文檔來說在沒有被附加到DOM中之前并沒有重新繪制。這樣,整個文檔只需要修改1次。
3.盡量減少點號操作符的使用:查找父變量的子變量時候,提前找到父變量,而不需要每次都從同一個父變量再次找它的子變量。
2

3


4

5

6

7

//雖然container被修改了count次,但是對于整個文檔來說在沒有被附加到DOM中之前并沒有重新繪制。這樣,整個文檔只需要修改1次。
4.打破循環(huán)引用:當DOM結(jié)點于一個對象的屬性進行雙向引用后,由于DOM元素是一直存在的,所以其對象屬性即使沒有任何可編程的引用指向也不會被垃圾回收掉,所以需要手動編寫清除的函數(shù),把對象的屬性設(shè)置為null。
5.移除DOM元素:當需要再次使用某個DOM元素時候,優(yōu)先使用隱藏元素方式。當不再需要使用時候,使用移除元素方式。另外,在使用隱藏元素方式時候,可以首先檢測元素時候存在,不存在再建立元素。
?1
function?message(txt){
?2
???var?box?=?document.getElementById('message');
?3
???var?txtNode?=?document.createTextNode(txt);
?4
???if(box?==?null)
?5
???{
?6
????????? ?box?=?document.createElement("div");
?7
????????? ?box.appendChild(txtNode);
?8
????? ??}
?9
???else
10
???{
11
??????? ?var?oldTxtnode?=?box.firstChild;//取得box的textNode
12
????????? box.replace(txtNode,oldTxtNode);//使用replace()替換
13
?????? ?}
14
}


?2

?3

?4

?5


?6

?7

?8

?9

10


11

12

13

14
