如何将HTML字符转换为DOM节点并动态添加到文档中详解
作者:玄魂工作室 发布时间:2023-08-23 12:26:39
前言
将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术。
字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题:
1 字符串转换为HTML DOM节点的基本方法及性能测试
2 动态生成的DOM节点添加到文档中的方法及性能测试
本文的示例: 有如下代码段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='container'>
<!-- 动态添加div
<div class='child'> XXX</div>
-->
</div>
</body>
</html>
任务是编写一个JavaScript函数,接收一个文本内容,动态生成一个包含该文本的div,返回该Node。下面话不多说了,来随着小编一起看看详细的介绍吧。
1.1 动态创建Node
1.1.1 innerHTML
第一种方法,我们使用document.createElement
方法创建新的元素,然后利用innerHTML将字符串注入进去,最后返回firstChild,得到动态创建的Node。
<script>
function createNode(txt) {
const template = `<div class='child'>${txt}</div>`;
let tempNode = document.createElement('div');
tempNode.innerHTML = template;
return tempNode.firstChild;
}
const container = document.getElementById('container');
container.appendChild(createNode('hello'));
</script>
下面我们看第二种方法
1.1.2 DOMParser
DOMParser 实例的parseFromString方法可以用来直接将字符串转换为document 文档对象。有了document之后,我们就可以利用各种DOM Api来进行操作了。
function createDocument(txt) {
const template = `<div class='child'>${txt}</div>`;
let doc = new DOMParser().parseFromString(template, 'text/html');
let div = doc.querySelector('.child');
return div;
}
const container = document.getElementById('container');
container.appendChild(createDocument('hello'));
1.1.2 DocumentFragment
DocumentFragment 对象表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用,用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分,它的变化不会引起DOM树的重新渲染的操作(reflow) ,且不会导致性能等问题。
利用document.createRange().createContextualFragment
方法,我们可以直接将字符串转化为DocumentFragment对象。
function createDocumentFragment(txt) {
const template = `<div class='child'>${txt}</div>`;
let frag = document.createRange().createContextualFragment(template);
return frag;
}
const container = document.getElementById('container');
container.appendChild(createDocumentFragment('hello'));
这里要注意的是我们直接将生成的DocumentFragment对象插入到目标节点中,这会将其所有自己点插入到目标节点中,不包含自身。我们也可以使用
frag.firstChild
来获取生成的div。
1.1.3 性能测试
下面我们来简单比对下上面三种方法的性能,只是测试生成单个节点,在实际使用中并不一定有实际意义。
先测试createNode。
function createNode(txt) {
const template = `<div class='child'>${txt}</div>`;
let start = Date.now();
for (let i = 0; i < 1000000; i++) {
let tempNode = document.createElement('div');
tempNode.innerHTML = template;
let node = tempNode.firstChild;
}
console.log(Date.now() - start);
}
createNode('hello');
测试100万个Node生成,用时 6322。
再来测试createDocument。
function createDocument(txt) {
const template = `<div class='child'>${txt}</div>`;
let start = Date.now();
for (let i = 0; i < 1000000; i++) {
let doc = new DOMParser().parseFromString(template, 'text/html');
let div = doc.firstChild;
}
console.log(Date.now() - start);
}
createDocument('hello');
测试100万个Node生成,用时 55188。
最后来测试createDocumentFragment.
function createDocumentFragment(txt) {
const template = `<div class='child'>${txt}</div>`;
let start = Date.now();
for (let i = 0; i < 1000000; i++) {
let frag = document.createRange().createContextualFragment(template);
}
console.log(Date.now() - start);
}
createDocumentFragment();
测试100万个Node生成,用时 6210。
createDocumentFragment方法和createNode方法,在这轮测试中不相上下。下面我们看看将生成的DOM元素动态添加到文档中的方法。
1.2.0 批量添加节点
被动态创建出来的节点大多数情况都是要添加到文档中,显示出来的。下面我们来介绍并对比几种常用的方案。
下面我们批量添加的方法都采用createDocumentFragment方法。
1.2.1 直接append
直接append方法,就是生成一个节点就添加到文档中,当然这会引起布局变化,被普遍认为是性能最差的方法。
const template = "<div class='child'>hello</div>";
function createDocumentFragment() {
let frag = document.createRange().createContextualFragment(template);
return frag;
}
// createDocumentFragment();
const container = document.getElementById('container');
let start = Date.now();
for (let i = 0; i < 100000; i++) {
container.appendChild(createDocumentFragment());
}
console.log(Date.now() - start);
上面的代码我们测算动态添加10万个节点。结果如下:
测试1000个节点耗时20毫秒,测试10000个节点耗时10001毫秒,测试100000个节点耗时46549毫秒。
1.2.2 DocumentFragment
上面我们已经介绍过DocumentFragment了,利用它转换字符串。下面我们利用该对象来作为临时容器,一次性添加多个节点。
利用document.createDocumentFragment()
方法可以创建一个空的DocumentFragment对象。
const template = "<div class='child'>hello</div>";
function createDocumentFragment() {
let frag = document.createRange().createContextualFragment(template);
return frag;
}
// createDocumentFragment();
const container = document.getElementById('container');
let fragContainer = document.createDocumentFragment();
let start = Date.now();
for (let i = 0; i < 1000; i++) {
fragContainer.appendChild(createDocumentFragment());
}
container.appendChild(fragContainer);
console.log(Date.now() - start);
测试1000个节点耗时25毫秒,10000个节点耗时2877毫秒,100000个节点浏览器卡死。
1.3 小结
简单了介绍了几种方法,并没有什么技术含量。但是从动态添加节点来看,网上说的DocumentFragment方法性能远远好于直接append的说法在我的测试场景中并不成立。
DocumentFragment正确的应用场景应该是作为虚拟DOM容器,在频繁修改查询但是并不需要直接渲染的场景中。
来源:https://www.cnblogs.com/xuanhun/p/9499348.html
猜你喜欢
- 下面示例代码是防止用网页刷新过快,如果多个页面使用,最好将<%...%>代码存为一个asp文件,在需要的页面最前面include
- 对于一个内容页的文章来说,如果这个文章内容过长或是其中有分类(排行),那么进行分页阅读无疑是最好的选择。如果一个文章内容不涉及分类,比如小说
- 加密解密字符串的asp函数,如用于ASP链接地址栏参数的加密,看代码就明白。比如:show.asp?id=DB26538FA54C70E1E
- system默认:managersys默认:change_on_install使用SQL Plus登录数据库时,system使用密码mana
- PDO::rollBackPDO::rollBack — 回滚一个事务(PHP 5 >= 5.1.0, PECL pdo >=
- Dreamweaver快捷键大全,记住一些常用的快捷键会大大提高你的网页设计效率,如果你都使用快捷键,那么如果你去面试工作就容易被录取,呵呵
- 数据库,网站运营的基础,网站生存的要素,不管是个人用户还是企业用户都非常依赖网站数据库的支持,然而很多别有用心的攻击者也同样非常&l
- 废话就不多说了,直接上内容。<form action="/home/search" method="ge
- 方法很简单,实现原理:使用asp的Request.ServerVariables("HTTP_REFERER") 判断来
- 1、灵活运用样式熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custo
- 如何编写具有良好结构的CSS?如果在设计流程中缺乏"秩序"或"章法"是非常不利的,你得冒着风险去添加
- 首先此问题来自向这个帖子http://hi.baidu.com/fire_love_live/item/247276cfda421217b6
- 1 Video介绍引用我翻译文档《在HTML5页面中嵌入音频和视频》中的介绍文字:“当今,在网页上嵌入视频且所有用户不管使用任何浏览器或者操
- IIS上设置301 跳转相信大家都会,只要在网站-属性-主目录里 选择重定向URL就行了,这样整站就跳转到目标站点了,但是有个问
- 异步操作数据的方式有两种常见的方式:XMLHttpRequest 和 iframe. 孰优孰劣在此我们不争论,只是想举一个例子说明在获取网片
- 一、偏好资源的积累利用DreamWeaver 4制作网页会应用到许多各种类型的要素,比如色彩、图片、模板、脚本等。利用站点资源面板将这些东东
- 网页版面布局的方法及技巧,版面指的是浏览器看到的完整的一个页面(可以包含框架和层)。因为每个人的显示器分辨率不同,所以同一个页面的大小可能出
- 译者按:在iOS HIG已经强大经典了N年之后,Android终于推出了一套比较系统的HIG(大概是为了配合Android 4.0 Ice
- 模块化分页1.查询语句块<% 取得当前文件名 temp = Split(request.ServerV
- 方法一:同步操作1.pipelines.py文件(处理数据的python文件)import pymysqlclass LvyouPipeli