Efficient conversion of strings into document fragments

In javascript dynamic insertion technology, I introduced the technology of converting innerHTML into document fragments, which is used by various major libraries. But in fact, if our strings do not have the th, tbody, col, and other tags that need to be packaged for dynamic generation, and there is no such annoying script tag, we are improving the performance of SyntaxHighli

In html "target = _ blank> javascript dynamic insertion technology, I introduced the technology for converting innerHTML into document fragments, which is used by various major libraries. But in fact, if our strings do not have the th, tbody, col, and other tags that need to be packaged for dynamic generation, there is no such annoying script tag, we still have many methods to improve performance, such as insertAdjacentHTML. However, if you want to use insertAdjacentHTML, there are many restrictions. For example, to avoid innerHTML as a read-only element in IE, FF must be supported in a very high version, and call objects (such as jQuery) the element can only be a node, not a string. Therefore, in many cases, we need to convert it into a node set first, today I am introducing the use of createContextualFragment to directly convert strings to document fragments!

In the traditional innerHTML method, a redundant div element is generated as a converter, and then a File Fragment is created using createDocumentFragment, which is transferred from one node to another. If createContextualFragment is used, this step can be avoided.

// Http://www.cnblogs.com/rubylouvre/archive/2011/04/15/2016800.html
Var str =Test;
Var range = document. createRange ();
Range.selectNodeContents(document.doc umentElement );
Var fragment = range. createContextualFragment (str );
Document. body. appendChild (fragment );

 



Efficient conversion of strings into document fragments by situ zhengmei
Script

Window. onload = function (){
Try {
Var str =Test;
Var range = document. createRange ();
Range.selectNodeContents(document.doc umentElement );
Var fragment = range. createContextualFragment (str );
Document. body. appendChild (fragment );
 
} Catch (e ){}

}

Script

 
Run code

 



Performance testing by situ zhengmei
Script
Window. onload = function (){
Try {
Var str = aaa;
Var start = new Date;
For (var I = 0, firstChild; I <400; I ++ ){
Var div = document. createElement (div );
Div. innerHTML = str;
Var fragment = document. createDocumentFragment ();
While (firstChild = div. firstChild) {// transfers the node on the div to the File Fragment!
Fragment. appendChild (firstChild );
}
}
Var div1 = document. createElement (div );
Div1.innerHTML = "innerHTML:" + (new Date-start)
Document. body. appendChild (div1)
Start = new Date;
Var HTML = document.doc umentElement;
For (var I = 0; I <400; I ++ ){
Var range = document. createRange ();
Range. selectNodeContents (HTML );
Range. createContextualFragment (str );
}
Var div2 = document. createElement (div );
Div2.innerHTML = "createContextualFragment:" + (new Date-start)
Document. body. appendChild (div2)
} Catch (e ){
Var div3 = document. createElement (div );
Div3.innerHTML = "error:" + e
Document. body. appendChild (div3)
}

}

Script


 

 
Run code

Brower innerHTML createContextualFragment
Chrome12 34 70
Ff4 36 33
Opera 28 17

Green Channel: Please follow my favorites to contact me