createDocumentFragment()用法总结

createDocumentFragment()用法总结

1.描述

DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。

因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。

2.关于DocumentFragment

  1. createDocumentFragment()方法,是用来创建一个虚拟的节点对象,或者说,是用来创建文档碎片节点。它可以包含各种类型的节点,在创建之初是空的。

  2. DocumentFragment节点不属于文档树,继承的parentNode属性总是null。它有一个很实用的特点,当请求把一个DocumentFragment节点插入文档树时,插入的不是DocumentFragment自身,而是它的所有子孙节点,即插入的是括号里的节点。这个特性使得DocumentFragment成了占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。

    另外,当需要添加多个dom元素时,如果先将这些元素添加到DocumentFragment中,再统一将DocumentFragment添加到页面,会减少页面渲染dom的次数,效率会明显提升。

  3. 如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时,会删除原来的节点。

  4. createDocumentFragment()方法和createElement()方法的区别:

    (1) 需要很多的插入操作和改动,继续使用类似于下面的代码则会很有问题

var ul = document.getElementById("ul");
for (var i = 0; i < 20; i++) {var li = document.createElement("li");li.innerHTML = "index: " + i;ul.appendChild(li);
}

由于每一次对文档的插入都会引起重新渲染(计算元素的尺寸,显示背景,内容等),所以进行多次插入操作使得浏览器发生了很多次渲染,效率是比较低的。这是我们提倡通过减少页面的渲染来提高DOM操作的效率的原因。一个优化的方法是将要创建的元素写到一个字符串上,然后一次性写到innerHTML上,这种利用浏览器对innerHTML的解析确实是相比上面的多次插入快了很多。但是构造字符串灵活性上面比较差,很难符合创建各种各样的DOM元素的需求。利用DocumentFragment,可以弥补这两个方法的不足。

因为文档片段存在于内存中,并不在DOM中,所以将子元素插入到文档片段中时不会引起页面回流(对元素位置和几何上的计算),因此使用DocumentFragment可以起到性能优化的作用。例如上面的代码就可以改成下面的片段。

var ul = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i = 0; i < 20; i++) {var li = document.createElement("li");li.innerHTML = "index: " + i;fragment.appendChild(li);
}
ul.appendChild(fragment);

(2) createElement创建的元素可以使用innerHTMLcreateDocumentFragment创建的元素使用innerHTML并不能达到预期修改文档内容的效果,只是作为一个属性而已。两者的节点类型完全不同,createElement创建的是元素节点,节点类型为1,createDocumentFragment创建的是文档碎片,节点类型是11。并且createDocumentFragment创建的元素在文档中没有对应的标记,因此在页面上只能用js中访问到。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/769836.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

hcia datacom课程学习(3):http与https、FTP

1.超文本传输协议&#xff1a;http与https &#xff08;1&#xff09;用来访问www万维网。 wwwhttp&#xff0b;html&#xff0b;URLweb &#xff08;2&#xff09;它们提供了一种发布和接受html界面的方法&#xff1a;当在网页输入URL后&#xff0c;从服务器获取html文件来…

Java项目基于Docker打包发布

一、后端项目 1.打包应用 mvn clean package -DskipTests 2、新建dockerfile文件 #基础镜像 FROM openjdk:8 #工作空间 WORKDIR /opt #复制文件 COPY wms-app-1.0-SNAPSHOT.jar app.jar&#xff08;add也可以&#xff09; #配置容器暴漏的端口 EXPOSE 8080 //不暴露端口使用…

vue的常用指令

v-bind&#xff1a;用于响应地更新 HTML 属性。 <img v-bind:src"imageSrc"> <!-- 简写形式 --> <img :src"imageSrc"> v-on&#xff1a;用于监听 DOM 事件&#xff0c;并在触发时运行一些 JavaScript 代码。 <button v-on:cli…

c语言函数大全(Q开头)

c语言函数大全(Q开头) There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all parallel goods. Those who are worried about being cheated should leave quickly. 函数名…

软件测试|Python random模块,超乎想象的强大

Python的random模块是一个非常强大的工具&#xff0c;用于生成随机数和随机选择。它提供了许多函数和方法&#xff0c;可以满足各种随机化需求。本文将介绍random模块的基本功能和常见用法&#xff0c;以帮助读者更好地理解和利用这个模块。 返回整数 random.randange() 语法…

淘宝店商家爬虫工具 天猫店卖家电话采集软件使用指南

淘宝店商家爬虫工具是一款用于采集天猫店卖家电话号码的软件。本文将提供使用指南&#xff0c;并附带相关代码&#xff0c;帮助用户快速了解和使用该软件。 代码示例&#xff1a; import requests from bs4 import BeautifulSoup# 设置请求头 headers {User-Agent: Mozilla/…

关于 FastAPI 路径参数,你知道多少?

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…

建立远程 Git 代码仓库

一、建立远程代码库 要在 Git 中建立远程代码库&#xff0c;你通常需要在代码托管平台上创建一个新的远程仓库&#xff0c;然后将本地仓库与之关联。以下是一般步骤&#xff1a; 在代码托管平台上创建远程仓库&#xff1a; 登录到你选择的代码托管平台&#xff08;如 GitHub、…

React Developer Tools安装

问题描述 在react开发中&#xff0c;需要插件来帮助我们开发&#xff0c;例如&#xff1a; 方法 &#xff08;可能需要魔法 进去后搜索&#xff1a; 点击下载即可

【Nebula笔记】基础操作

目录 一、预备~ 二、基础操作 (一) 图空间 1. 创建图空间 2. 清空图空间 3. 其他 4. FAQ 执行DROP SPACE语句删除图空间后&#xff0c;为什么磁盘的大小没变化&#xff1f; (二) 点类型 1. 创建Tag 2. 删除Tag 3. 更新Tag 4. 其他 (三) 边类型 1. 创建Edge type…

git如何在某个commitId的状态提交到一个分支

有些时候&#xff0c;我们在使用子仓库&#xff0c;或者其他情况&#xff0c;会有一个状态是当前的git仓库是在一个commitId上&#xff0c;而没有在一个分支上&#xff1a; 这时如果想要把基于这个commitId创建一个分支&#xff0c;可以使用下面这个命令&#xff1a; git push…

HCIA实验

实验目的&#xff1a; 1、R6为ISP&#xff0c;接口IP地址均为公有地址&#xff0c;该设备只能配置IP地址&#xff0c;之后不能再对其进行任何配置&#xff1b; 2、R1-R5为局域网&#xff0c;私有IP地址192.168.1.0/24&#xff0c;请合理分配&#xff1b; 3、R1、R2、R4&#x…

前端理论总结(html5)——form表单的新增特性/h5的新特性

form表单的新增特性 range&#xff1a;范围 color&#xff1a;取色器 url&#xff1a;对url进行验证 tel&#xff1a;对手机号格式验证 email&#xff1a;对邮箱格式验证 novalidate &#xff1a;提交表单时不验证 form 或 input 域 numbe…

i5 1240p和r7 8840HS差距 酷睿i51240p和r7 8840HS参数对比

r7 8840HS采用 Zen 4架构 4 nm制作工艺8核 16线程主频 3.3GHz睿频5.1GHz 三 级缓存16MB TDP 功耗 28w 搭载AMD Radeon 780M核显 选r7 8840HS还是i5-1240P这些点很重要 http://www.adiannao.cn/dy i5-1240P处理器具有4个性能核心&#xff0c;8个效能核心&#xff0c;总计12核心…

JUC-多线程

目录 进程 线程 线程的串行 区别 多线程 进程 是指计算机中已执行的程序&#xff0c;曾经是分时系统的基本运作单位在面向进程设计的系统&#xff08;如早期的UNIX&#xff0c;Linux 2.4及更早的版本&#xff09;中&#xff0c;是程序的基本执行实体在面向线程设计的系统…

【网络建设与运维】2024年河北省职业院校技能大赛中职组“网络建设与运维”赛项规程

培训、环境、资料、考证 公众号&#xff1a;Geek极安云科 网络安全群&#xff1a;775454947 网络系统管理群&#xff1a;223627079 网络建设与运维群&#xff1a;870959784 极安云科专注于技能提升&#xff0c;赋能 2024年广东省高校的技能提升&#xff0c;在培训中我们的应急…

jdbc连接回顾

不使用任何工具类手动连接 package com.oracle.jdbc;import java.sql.*;/***jdbc查询 jdbc数据库下&#xff0c;user表中所有数据并打印在控制台* jdbc操作数据库步骤* 1注册驱动* 2创建数据库连接对象* 3获取传输器对象* 4执行sql* 5处理结果集* 6释放资源*/public cla…

OSCP靶场--Crane

OSCP靶场–Crane 考点(CVE-2022-23940sudo service提权) 1.nmap扫描 ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.229.146 -sC -sV --min-rate 2500 Starting Nmap 7.92 ( https://nmap.org ) at 2024-03-25 08:07 EDT Nmap scan report for 192.16…

python环境移植(本机windows到离线windows环境)

Python环境整体迁移(包括无网络情况)_python 迁移 新老无法联网-CSDN博客

Java 算法和数据结构 答案整理,最新面试题

Java中如何使用动态规划求解背包问题&#xff1f; 1、定义子问题&#xff1a; 首先确定动态规划状态&#xff0c;通常以物品数量和背包容量为变量定义子问题&#xff0c;例如dp[i][j]表示前i件物品放入容量为j的背包所能获得的最大价值。 2、确定状态转移方程&#xff1a; 基…