知识大全浅析document.createDocumentFragment()与js效率

Posted 2022-07-20 知

篇首语：获取生活中最丰硕果实和最大享受的秘密在于，冒险犯难地生活！本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全浅析document.createDocumentFragment()与js效率相关的知识，希望对你有一定的参考价值。

浅析document.createDocumentFragment()与js效率 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

对于循环批量操作页面的DOM有很大帮助！利用文档碎片处理然后一次性append 并且使用原生的javascript语句操作

　　document createDocumentFragment()说白了就是为了节约使用DOM 每次JavaScript对DOM的操作都会改变页面的变现并重新刷新整个页面从而消耗了大量的时间为解决这个问题可以创建一个文档碎片把所有的新节点附加其上然后把文档碎片的内容一次性添加到document中 这是我写的一个简单的测试页面

复制代码代码如下: <!DOCTYPE PUBLIC " //W C//DTD XHTML Transitional//EN" " < xmlns=" <head> <meta equiv="Content Type" content="text/; charset=gb " /> <title>document createDocumentFragment()测试页面</title> </head> <body> <script type=text/javascript> var d = new Date(); for(var i= ;i< ;i++) var op=document createElement("P"); var oText=document createTextNode("test "); op appendChild(oText); document body appendChild(op); var d = new Date(); document write("方法一用时 " + (d getTime() d getTime()) + "<br/>"); // + var d = new Date(); var oFrag=document createDocumentFragment(); for(var i= ;i< ;i++) var op=document createElement("P"); var oText=document createTextNode("test "); op appendChild(oText); oFrag appendChild(op); document body appendChild(oFrag); //这段代码中 var d = new Date(); document write("方法二用时 " + (d getTime() d getTime()) + "<br/>"); </script> </body> </> cha138/Article/program/Java/JSP/201311/20613

知识大全 浅析document.createDocumentFragment()与js效率

知识大全浅析document.createDocumentFragment()与js效率