JavascriptDOM operation performance ----- create DOM

In many cases, we need to create a series of element nodes, just like the following operations: Java code varlistdocument. getElementById (& amp; #39; content & amp; #39;); for (vari0; I & lt; 10; I ++) {varitemdocument. createElement (& amp; #39; li.

 

In many cases, we need to create a series of element nodes, just like the following operations:

Java code

Var list = document. getElementById ('content ');

For (var I = 0; I <10; I ++ ){

Var item = document. createElement ('lil ');

List. appendChild (item );

Item. appendChild (document. createTextNode ('item' + I ));

}

 

Var list = document. getElementById ('content ');

For (var I = 0; I <10; I ++ ){

Var item = document. createElement ('lil ');

List. appendChild (item );

Item. appendChild (document. createTextNode ('item' + I ));

}

 

In fact, this operation efficiency is very low. We need to constantly update the DOM in the partition. The page should be updated every time a loop occurs, and the number of cycles may not be particularly obvious. However, if there are many operations, the efficiency is very problematic. Let's look at the following code:

Java code

Var list = document. getElementById ('content ');

Var fragment = document. createDocumentFragment ();

For (var I = 0; I <10; I ++ ){

Var item = document. createElement ('lil ');

Fragment. appendChild (item );

Item. appendChild (document. createTextNode ('item' + I ));

}

List. appendChild (fragment );

 

Var list = document. getElementById ('content ');

Var fragment = document. createDocumentFragment ();

For (var I = 0; I <10; I ++ ){

Var item = document. createElement ('lil ');

Fragment. appendChild (item );

Item. appendChild (document. createTextNode ('item' + I ));

}

List. appendChild (fragment );

 

Here we should first put all the element nodes in fragment, and then add them to the DOM at one time. Here we only perform one DOM operation, which improves the performance, it can also avoid page flashes caused by non-stop DOM operations, which makes me feel a bit confused about StringBuffer/StringBuilder in java.

In the face of the above problems, we usually have another method, that is, using the innerHTML method. Although this is not a standard usage of DOM, it is many people (including me) they all like usage very much:

Java code

Var createDatagrid = function (rows ){

Var html = [];

Html. push ('

Html. push (' );

For (var I = 0; I <rows. length; I ++ ){

Html. push ('

Html. push ('

Html. push ('

Html. push ('

Html. push ('

Html. push ('

Html. push ('

Html. push ('

Html. push ('

}

Html. push ('

Html. push ('

'); '); '); '); '); '); '); '); '); '); ');

'+ Rows [I]. user_name +'

'+ Rows [I]. type_id +'

'+ Rows [I]. send_time +'

'+ Rows [I]. gps_time) +'

'+ Rows [I]. speed +'

'+ Rows [I]. course +'

'+ Rows [I]. gps_status +'

');

Document. getElement. innerHTML = html. join ("");

}

 

Var createDatagrid = function (rows ){

Var html = [];

Html. push ('

Html. push (' );

For (var I = 0; I <rows. length; I ++ ){

Html. push ('

Html. push ('

Html. push ('

Html. push ('

Html. push ('

Html. push ('

Html. push ('

Html. push ('

Html. push ('

}

Html. push ('

Html. push ('

'); '); '); '); '); '); '); '); '); '); ');

'+ Rows [I]. user_name +'

'+ Rows [I]. type_id +'

'+ Rows [I]. send_time +'

'+ Rows [I]. gps_time) +'

'+ Rows [I]. speed +'

'+ Rows [I]. course +'

'+ Rows [I]. gps_status +'

');

Document. getElement. innerHTML = html. join ("");

}

 

The above efficiency is also very high, and the efficiency of the second method is similar, but this method is not based on javascript DOM calls, it is created through the HTML Parser using its internal DOM call, so it is efficient

 

From lovebeyond