Javascript asynchronous innerHTML use analysis _ javascript skills

Using innerHTML instead of createElement to dynamically add webpage content has become a common concept. However, in business applications, the datagrid of big data is not uncommon. Even innerHTML is too stretched, so people have developed the time-based loading technology (using setTimeout ). Of course, this time-based loading technology is only a secondary technology and does not have the ability to add nodes. Today, another more exotic technology http://james.padolsey.com/javascript/asynchronous-innerhtml/ "target = _ blank> Asynchronous innerHTML has been developed again, and it is very advanced to praise foreigners in this area.

The Code is as follows:

Function asyncInnerHTML (HTML, callback ){
Var temp = document. createElement ('P '),
Frag = document. createDocumentFragment ();
Temp. innerHTML = HTML; // the content to be added is put here first.
(Function (){
If (temp. firstChild ){
Frag. appendChild (temp. firstChild); // then move it to the file fragment.
SetTimeout (arguments. callee, 0); // uses the asynchronous call itself to piece together the file fragments until the p node is moved empty.
} Else {
Callback (frag); // click it to insert a node.
}
})();
}

Advantages of this technology:
1. Use closures to solve the memory overflow problem of IE6
2. Use the setTimeout (fn, 0) hack to drag the operation out of the queue to prevent the browser from being suspended.
3. Use Document Fragment to reduce page rendering times
4. The callback node can be inserted using the DOM standard method (appendChild) (for example, the innerHTML of labels such as table, tbody, tr, and td of IE is read-only)
Usage:

The Code is as follows:

Var htmlStr ='

...

...

...

';
AsyncInnerHTML (htmlStr, function (fragment ){
// You can treat 'fragment 'as a regular node.
Document. body. appendChild (fragment );
});

However, this method does not work in all browsers when adding nodes to the table, so it is a big failure. It is tested that the rendering of IE8, IE6, and FF3.5 has errors. chrome, safari4, and opera10 can render the table in good condition. It is estimated that the node is lost when the node is transferred to the File Fragment by IE8 and so on.

<Style>. filament_table {border-collapse: collapse! Important; border-top: 1px solid # A9EA00; border-left: 1px solid # C1DAD7; table-layout: fixed; width: 400px ;}. filament_table thead th {background: # A9EA00; color: # FCDE6A; border-bottom: 1px solid # C1DAD7; border-right: 1px solid # C1DAD7; padding: 2px 5px ;}. filament_table tbody td ,. filament_table tbody th {border-bottom: 1px solid # C1DAD7; border-right: 1px solid # C1DAD7; padding: 2px 5px; color: #76C2C3; }. Filament_table tfoot td {border-bottom: 1px solid # C1DAD7; border-right: 1px solid # C1DAD7; background: # A9EA00; color: # FCDE6A; font-size: 12px; padding: 0 ;}. filament_table tbody td a {text-decoration: none; color: #76C2C3 ;}. filament_table tbody tr: nth-child (even) {background: # F7FBFF;} </style> <script type = "text/javascript"> var getData = function () {var builder = []; for (var I = 0; I <10; I ++) {B Uilder. push ("<tr> <td> directory"); builder. push (I); builder. push ("</td> <td> item"); builder. push (I); builder. push ("</td> <td> item"); builder. push (I); builder. push ("</td> </tr>");} return builder. join ('');} function asyncInnerHTML (HTML, callback) {var temp = document. createElement ('P'), frag = document. createDocumentFragment (); temp. innerHTML = HTML; // the content to be added is put here first. (Function () {if (temp. firstChild) {frag. appendChild (temp. firstChild); // then move it to the File Fragment setTimeout (arguments. callee, 0); // then put the insert content operation into an independent stack as an asynchronous call} else {callback (frag ); // here is the operation that actually inserts a node}) () ;}adddata = function () {asyncInnerHTML (getData (), function (flag) {var tbody = document. getElementById ("test"); tbody. appendChild (flag );})} script <table class = "filament_table"> <thead> <tr> <th colspan = "3"> asynchronous innerHTML </th> </tr> </thead> <tbody id = "test"> </tbody> </table> <p> <button type = "button" onclick = "addData () "> Start </button> </p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

In the firebug of FF3.5, labels of newly added nodes in table are lost.

In the developer tool of IE8, we found that an error occurred while adding new nodes to the table, which is common to IE!

Related demo visible http://bbs.51js.com/viewthread.php? Tid = 84489 & extra = & page = 1 "target = _ blank> This is not the best way to insert dynamic content.

<Style> # myTable {height: 300px; overflow: auto; border: 1px solid # 39F; width: 600px;} table, td, th {font-size: 12px; border-collapse: collapse; height: 100%; border: 1px solid # 39F;} tr. odd {background: # B1E4F3;} td. index {background: # B1E4F3; color: #000066; text-align: center ;} </style> <body> <p id = "myTable"> <table cellspacing = "0" cellpadding = "2" id = "tb"> <tr class = "odd"> <td style = "width: 51px "class =" index "> 1 </ Td> <td style = "width: 121px"> name 1 </td> <td style = "width: 51px"> male </td> <td style = "width: 51px "> 20 </td> <td style =" width: 121px "> 1987-12-7 </td> <td style =" width: 201px "> this person is very lazy, nothing left </td> </tr> </table> </p> script freeFor = function (I, to, fn) {(function () {fn (I); I ++ <? SetTimeout (arguments. callee, 30): 0 ;}) () ;}; var T = document. getElementById ("tb"), R = T. rows [0], B = T. getElementsByTagName ("tbody") [0]; freeFor (1, 40, function (z) {var F = document. createDocumentFragment (); for (var I = 1; I <50; ++ I) {var Y = R. cloneNode (true); var I = Y. getElementsByTagName ("TD") [0]; I. innerHTML = (I * z + 1); I. className = 'index'; Y. className = I % 2? '': 'Odd'; F. appendChild (Y) ;}; B. appendChild (F); F = null;}); script </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]