首页 > 编程笔记 > JavaScript笔记 > JS DOM
阅读:22
JS createDocumentFragment()方法:创建文档片段
DocumentFragment 是一个虚拟的节点类型,仅存在于内存中,没有添加到文档树中,所以看不到渲染效果。使用文档片段的好处,就是避免浏览器渲染和占用资源。当文档片段设计完善后,再使用 JavaScript 一次性添加到文档树中显示出来,这样可以提高效率。
主要特征值:nodeType 值等于 11、nodeName 等于 "#document-fragment"、nodeValue 等于 null、parentNode 等于 null。
在 JavaScript 中可以使用 createDocumentFragment() 方法创建文档片段:
使用 appendChild() 或 insertBefore() 方法可以把文档片段添加到文档树中。
每次使用 JavaScript 操作 DOM 都会改变页面呈现,并触发整个页面重新渲染(回流),从而消耗系统资源。为了解决这个问题,可以先创建一个文档片段,把所有的新节点附加到文档片段上,最后再把文档片段一次性添加到文档中,减少页面重绘的次数。
主要特征值:nodeType 值等于 11、nodeName 等于 "#document-fragment"、nodeValue 等于 null、parentNode 等于 null。
在 JavaScript 中可以使用 createDocumentFragment() 方法创建文档片段:
var fragment = document.createDocumentFragment();
使用 appendChild() 或 insertBefore() 方法可以把文档片段添加到文档树中。
每次使用 JavaScript 操作 DOM 都会改变页面呈现,并触发整个页面重新渲染(回流),从而消耗系统资源。为了解决这个问题,可以先创建一个文档片段,把所有的新节点附加到文档片段上,最后再把文档片段一次性添加到文档中,减少页面重绘的次数。
示例
下面示例使用文档片段创建主流 Web 浏览器列表。<ul id="ul"></ul> <script> var element = document.getElementById('ul'); var fragment = document.createDocumengFragment(); var browsers = ['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer']; browsers.forEach (function (brower) { var li = document.createElement('li'); li.textContent = browser; fragment.appendChild(li); //此处往文档片段插入子节点,不会引起回流 }); element.appendChild(fragment); //将打包好的文档片段插入ul节点 </script>上面示例准备为 ul 元素添加 5 个列表项。如果逐个添加列表项,将会导致浏览器反复渲染页面。为避免这个问题,可以使用一个文档片段来保存创建的列表项,然后再一次性将它们添加到文档中,这样能够提升系统的执行效率。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频