关于JS中文档碎片的理解
来源:互联网 发布:淘宝双十一数据统计 编辑:程序博客网 时间:2024/06/15 16:21
我们大家都知道,当我们在操作DOM的时候,是一个很耗性能的过程,尤其是改变DOM的结构就更加的消耗性能,但是有些时候我们不得不在DOM中添加内容,改变DOM的结构,此时我们就要减少DOM结构改变时的性能消耗,怎么减少性能消耗呢,这时我们就要引用“文档碎片”,其目的就是将我们每次增加的节点先存储在文档碎片中,在将文档碎片再添加到DOM结构中,这样将多次增加节点改变DOM结构,变了只改变一次DOM结构,大大得减少了性能的消耗。
<script> let frg=document.createElementFragment();//创建一个文档碎片 for(let i=0;i<1000;i++){ var oDiv=document.createElement("div");创建一个节点 oDiv.innerHTML="大家好"+i; frg.appendChild(ODiv);//没创建一条就添加到文档碎片中 } document.body.appendChild(frg);//添加到页面的末尾。 frg=null;//将临时创建的文档碎片在操作完成之后,赋值为null。释放内存,减少性能的消耗。</script>
在这里我们需要注意的是:当我们在给页面末尾追加这文档碎片的时候,只是将文档碎片的子节点添加到了页面的末尾,而文档碎片本身并没有添加到页面中。在添加结束之后,记得将临时创建的文档碎片赋值为null,目的是减少性能的消耗。
即减少了DOM结构改变时消耗的性能,又防止了使用完毕的文档碎片消耗性能,一举多得,prefect!!!
阅读全文
0 0
- 关于JS中文档碎片的理解
- 【phpcms-v9】phpcms-v9中关于碎片的理解
- js创建文档碎片
- js--文档碎片
- JS中的文档碎片
- js文档碎片---DocumentFragment
- 关于ORACLE碎片的理解和解决办法
- JS 文档碎片 添加元素
- 关于js中prototype的理解
- 关于JS中prototype的理解
- 关于js中数据类型的自我理解
- 关于 js 中 this 的理解
- js中关于this关键字的理解
- 关于js中call方法的理解
- 关于json的理解(js中)
- 关于HTML文档中第一行<!DOVTYPE>命令的理解
- js事件委托和文档碎片
- JS性能优化之文档碎片创建
- RIOT物联网操作系统
- Gogs与Linux主机共享SSH22端口
- 03-vueJs简介
- Python语言程序设计-学习笔记4:Python编程之数据类型
- linux基本操作---磁盘管理
- 关于JS中文档碎片的理解
- webpack的一些简单操作
- 浅析Java中通过ThreadLocal实现线程绑定来传递参数
- 吴恩达deeplearning之结构化机器学习—策略(1)
- 分治算法的简介
- sql2008r2安装失败
- malloc的基本实现
- UVALive 7263 Today Is a Rainy Day(BFS预处理)
- linux系统命令(一)用户与组