createDocumentFragment 我不是女神ヾ 2022-05-24 13:07 114阅读 0赞 ## 主要区别 ## createElement创建的是元素节点,节点类型为1,createDocumentFragment创建的是文档碎片,节点类型是11 ## 性能优势 ## 程序员可以使用DocumentFragment将一批子元素添加到任何类似node的父节点上,对这批子元素的操作不需要一个真正的根节点。程序员可以不依赖可见的DOM来构造一个DOM结构,而效率高是它真正的优势,试验表明,它比直接操作DOM快70%。 使用DocumentFragement要比直接对DOM节点操作要快的多,而且程序员可以利用新DOM节点来操作DocumentFragement,这样比操作整个页面DOM要更容易。所以,当需要进行大量DOM操作时,尽量使用DocumentFragement,它会让你的应用变的更快! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="test" ></div> <script> var fragEle = document.createDocumentFragment(); for (var i = 0;i < 10 ;i++ ) { var ele = document.createElement("div"); ele.innerText = "Hello world"; fragEle.appendChild(ele); } document.getElementById("test").appendChild(fragEle); </script> </body> </html>
相关 使用createDocumentFragment和requestAnimationFrame,渲染大量数据页面不卡顿 1、实现思路:渲染大量数据时,合理使用 createDocumentFragment 和 requestAnimationFrame,将操作且分为一小段一小段去执行,从而实现页 快来打我*/ 2022年12月17日 13:58/ 0 赞/ 185 阅读
相关 createDocumentFragment()方法的妙用 在更新少量节点的时候可以直接向document.body节点中添加,但是当要向document中添加大量数据时,如果直接添加这些新节点,这个过程非常缓慢,因为每添加一个节点都会 àì夳堔傛蜴生んèń/ 2022年06月02日 08:28/ 0 赞/ 201 阅读
相关 createDocumentFragment 主要区别 createElement创建的是元素节点,节点类型为1,createDocumentFragment创建的是文档碎片,节点类型是11 性能优势 程序员 我不是女神ヾ/ 2022年05月24日 13:07/ 0 赞/ 115 阅读
相关 使用createDocumentFragment()创建DOM片段 参考文章: [https://www.imooc.com/wenda/detail/346318][https_www.imooc.com_wenda_detail_346 快来打我*/ 2022年03月17日 17:48/ 0 赞/ 191 阅读
相关 关于DOM重排重绘性能__createDocumentFragment和拼接html字符串的方式 解释: let fragment = document.createDocumentFragment();//fragment 是一个指向空[DocumentFragment ゝ一世哀愁。/ 2021年11月09日 02:52/ 0 赞/ 193 阅读
相关 document.createDocumentFragment [JS性能优化之创建文档碎片(document.createDocumentFragment)][JS_document.createDocumentFragment] 素颜马尾好姑娘i/ 2021年09月16日 00:28/ 0 赞/ 264 阅读
相关 document.createDocumentFragment 以及创建节点速度比较 `document.createDocumentFragment` `document.createDocumentFragment()`方法创建一个新空白的`Docum Dear 丶/ 2021年09月15日 08:48/ 0 赞/ 262 阅读
相关 JS性能优化之文档碎片-document.createDocumentFragment 讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么。 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反 雨点打透心脏的1/2处/ 2021年09月12日 07:44/ 0 赞/ 317 阅读
相关 document.createDocumentFragment() document.createDocumentFragment() 此方法可能在很多时候使用频率并不是很高,尤其是在比较简单的代码中。 因为没有此方法的存在同样会正常达... 红太狼/ 2020年05月26日 15:10/ 0 赞/ 611 阅读
还没有评论,来说两句吧...