If the requirement for dynamic client interaction is relatively high and elements need to be added frequently and dynamically in the DOM, performance problems may occur, so DocumentFragment may be used. For more information, see the following example, the performance difference is big.
Copy to ClipboardReference: [www.bkjia.com] <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> www.bkjia.com </title>
<Script type = "text/javascript">
Function slowAdd (){
For (var I = 0; I <10000; I ++ ){
Var op = document. createElement ("span ");
Var oText = document. createTextNode (I );
Op. appendChild (oText );
Document. body. appendChild (op );
}
}
Function fastAdd (){
Var oFragmeng = document. createDocumentFragment (); // create document fragments
For (var I = 0; I <10000; I ++ ){
Var op = document. createElement ("span ");
Var oText = document. createTextNode (I );
Op. appendChild (oText );
OFragmeng. appendChild (op );
}
Document. body. appendChild (oFragmeng); // Add the object to the document at the last time.
}
</Script>
</Head>
<Body>
<P>
<Input id = "Button1" type = "button" value = "button" onclick = "slowAdd ()"/> </p>
<P>
<Input id = "Button2" type = "button" value = "button" onclick = "fastAdd ()"/> </p>
</Body>
</Html>
Source: http://justinw.cnblogs.com/