JavaScript asynchronous innerHTML usage analysis_javascript skills

Of course, this time-sharing loading technology is only an auxiliary technology and does not have the ability to add nodes. Nowadays, another more peculiar technology Asynchronous innerHTML has been developed again. I cannot help but praise that foreigners are very advanced in research in this area.

Copy code The code is as follows:

function asyncInnerHTML(HTML, callback) {
var temp = document.createElement('div'),
frag = document.createDocumentFragment();
temp.innerHTML = HTML;//The content to be added is placed here first.
(function(){
if(temp.firstChild) {
frag.appendChild(temp.firstChild);//Then move to the document fragment little by little
setTimeout(arguments.callee, 0) ;//Use asynchronous calls to piece together document fragments by yourself until the div nodes are emptied
} else {
callback(frag);//This is where the actual operation of inserting nodes is performed
}
})();
}

Advantages of this technology:
1. Use closures to solve the memory overflow problem of IE6
2. Use setTimeout(fn,0) The hack drags the operation out of the queue to prevent the browser from suspended animation
3. Use Document Fragment to reduce the number of renderings of the page
4. The callback node can be inserted using the DOM standard method (appendChild) (such as IE's table , innerHTML of tbody, tr, td and other tags are read-only)
Usage:

Copy code 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 every browser when adding nodes to the table, and it has to be said that it is a big failure. It has been tested that IE8, IE6, and FF3.5 have rendering errors, but chrome, safari4, opera10, etc. can render the table perfectly. It is estimated that node loss occurs when IE8 and others transfer nodes to document fragments.

<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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of javascript keyboard events Recommended_javascript skillsNext article：Summary of javascript keyboard events Recommended_javascript skills

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills