Home > Developer > JavaScript
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 = <div> <strong> test </strong> </div>;
Var range = document. createRange ();
Range.selectNodeContents(document.doc umentElement );
Var fragment = range. createContextualFragment (str );
Document. body. appendChild (fragment );
<! Doctype html>
<Html>
<Head>
<Title> efficient conversion of strings into file fragments by situ zhengmei </title>
<Script>
Window. onload = function (){
Try {
Var str = <div> <strong> test </strong> </div>;
Var range = document. createRange ();
Range.selectNodeContents(document.doc umentElement );
Var fragment = range. createContextualFragment (str );
Document. body. appendChild (fragment );
} Catch (e ){}
}
</Script>
</Head>
<Body>
</Body>
</Html>
Run code
<! Doctype html>
<Html>
<Head>
<Title> Performance Test by situ zhengmei </title>
<Script>
Window. onload = function (){
Try {
Var str = <div class = "calendar" id = "pager-top"> <a rel = "prev" href = "#" class = "prev"> aaa </ a> <span class = "edit-in-place-add"> </span> </div>;
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>
</Head>
<Body>
</Body>
</Html>
Run code
Brower innerHTML createContextualFragment
Chrome12 34 70
Ff4 36 33
Opera 28 17
Green Channel: Please follow my favorites to contact me
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
