JavaScript 非同期 innerHTML 使用分析_JavaScript スキル

もちろん、このタイムシェアリング ロード技術は単なる補助的な技術であり、ノードを追加する機能はありません。最近では、さらに特異な技術 非同期 innerHTML が再び開発されており、この分野の研究では外国人が非常に進んでいることを賞賛せずにはいられません。

コードをコピー コードは次のとおりです。

function asyncInnerHTML(HTML, callback) {
var temp = document.createElement('div'),
frag = document.createDocumentFragment();
temp.innerHTML = HTML;//追加するコンテンツが最初にここに配置されます。
(function(){
if(temp.firstChild) {
frag.appendChild(temp.firstChild);//その後、少しずつドキュメントフラグメントに移動します
setTimeout(arguments.callee, 0) ;//非同期呼び出しを使用して、div ノードが空になるまで自分でドキュメントの断片をつなぎ合わせます
} else {
callback(frag);//ここでノードを挿入する実際の操作が実行されます
}
})();
}

このテクノロジーの利点:
1. クロージャーを使用して IE6 のメモリ オーバーフローの問題を解決します
2. (fn,0) このハックは、ブラウザーがアニメーションを一時停止しないように操作をキューからドラッグします
3. ドキュメント フラグメントを使用して、ページのレンダリングの数を減らします
4. コールバック ノードは、次の方法で挿入できます。 DOM 標準メソッド (appendChild) (IE の table 、 tbody の innerHTML、tr、td などのタグは読み取り専用です)
使用法:

コードをコピー コードは次のとおりです:

var htmlStr = '<div><p>...</p><p>.. .</p><div><div>..</div>';
asyncInnerHTML(htmlStr, function(fragment){
// 'fragment' を通常のものとして扱うことができます
document.body.appendChild(fragment);
});

ただし、このメソッドはテーブルにノードを追加するときに機能するわけではありません。大失敗だと言われます。 IE8、IE6、FF3.5 ではレンダリング エラーが発生することがテストされていますが、chrome、safari4、opera10 などではテーブルを完全にレンダリングできます。 IE8 などがノードを文書フラグメントに転送すると、ノード損失が発生すると推定されています。

<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> <table class="filament_table"> <thead><tr><th colspan="3">异步的innerHTML</th></tr></thead> <tbody id="test"> </tbody> </table> <script type="text/javascript"> var getData = function(){ var builder = []; for(var i=0;i<10;i++){ builder.push("<tr><td>目录"); builder.push(i); builder.push("<td>商品"); builder.push(i); builder.push("<td>商品"); builder.push(i); builder.push(""); } return builder.join(''); } function asyncInnerHTML(HTML, callback) { var temp = document.createElement('div'), frag = document.createDocumentFragment(); temp.innerHTML = HTML;//要加入的内容先放到这里。 (function(){ if(temp.firstChild) { frag.appendChild(temp.firstChild);//然后一点点挪到文档碎片 setTimeout(arguments.callee, 0);//然后把插入内容的操作作为异步调用放到一个独立的堆栈中 } else { callback(frag);//这里才是真正执行插入节点的操作 } })(); } addData = function(){ asyncInnerHTML(getData(),function(flag){ var tbody = document.getElementById("test"); tbody.appendChild(flag); }) } </script> <p><button type="button" onclick="addData()">开始</button></p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

在FF3.5的firebug显示下，table新添加的节点，标签都丢失了。

在IE8的开发人员工具中，我们发现table新添加节点出错严重，见于IE一惯的表现，这是很正常的事！

相关演示可见无忧的贴子，发现这种方法不是最佳的插入动态内容的方法。

<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> <div id="myTable"> <table cellspacing="0" cellpadding="2" id="tb"> <tr class="odd"> <td style="width: 51px" class="index">1</td> <td style="width: 121px">姓名1</td> <td style="width: 51px"><span style="color: #00f">男</span></td> <td style="width: 51px">20</td> <td style="width: 121px">1987-12-7</td> <td style="width: 201px">这个人很懒，什么都没有留下</td> </tr> </table> </div> <script> freeFor=function(i,to,fn){ (function(){ fn(i); i++<to?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>