如何将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万个节点。结果如下:

如何将HTML字符转换为DOM节点并动态添加到文档中详解

测试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

标签:html字符,dom节点,文档
0
投稿

猜你喜欢

  • Python序列对象与String类型内置方法详解

    2023-09-22 13:25:18
  • Python使用正则表达式获取网页中所需要的信息

    2023-04-08 17:13:33
  • Python爬取百度翻译实现中英互译功能

    2023-04-29 08:32:26
  • 浅谈java里的EL表达式在JSP中不能解析的问题

    2023-06-20 11:55:05
  • 如何将bag文件批量转成mp4

    2021-06-10 11:04:54
  • Pytorch深度学习经典卷积神经网络resnet模块训练

    2022-12-02 01:43:23
  • php中使用key,value,current,next和prev函数遍历数组的方法

    2023-10-18 20:17:39
  • Python常见字典内建函数用法示例

    2022-08-07 08:59:23
  • sql 取两值之间的数据方法(例:100-200之间的数据)

    2024-01-24 03:55:20
  • js实现简单的放大镜效果

    2024-04-30 08:52:03
  • Oracle 查看表空间的大小及使用情况sql语句

    2023-07-14 20:06:31
  • 模式化窗口

    2009-06-18 18:41:00
  • 关于JavaScript中高阶函数的魅力详解

    2024-04-18 09:29:40
  • MyBatis-plus+达梦数据库实现自动生成代码的示例

    2024-01-16 03:41:42
  • Dreamweaver量身打造Wordpress留言板

    2009-12-09 17:08:00
  • 探析Windows下将gvim8配置为Python IDE的方法

    2021-02-02 06:28:30
  • MySQL 5.0触发器参考教程第1/4页

    2024-01-23 17:03:58
  • MySQL数据表分区策略及优缺点分析

    2024-01-22 05:37:19
  • Django集成CAS单点登录的方法示例

    2023-02-20 14:51:09
  • Python3中正则模块re.compile、re.match及re.search函数用法详解

    2023-04-22 10:03:28
  • asp之家 网络编程 m.aspxhome.com