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

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

将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术。 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题:<br />

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生成,用时 <b>6322</b>。

再来测试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生成,用时 <b>55188</b>。

最后来测试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生成,用时 <b>6210</b>。

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

1.png

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

1.3 小结

简单了介绍了几种方法,并没有什么技术含量。但是从动态添加节点来看,网上说的DocumentFragment方法性能远远好于直接append的说法在我的测试场景中并不成立。

DocumentFragment正确的应用场景应该是作为虚拟DOM容器,在频繁修改查询但是并不需要直接渲染的场景中。

本文转载自玄魂工作室 全新 的前端垂直订阅号“玄说前端”,欢迎关注

原文发布于微信公众号 - 玄魂工作室(xuanhun521)

原文发表时间:2018-08-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python爬虫实战之路

python操作Excel,你觉得哪个库更好呢?

每一个Excel数据文件从上至下分为三个层级的对象: workbook: 每一个Excel文件就是一个workbook。 sheet: 每一个workbook中...

6.5K3
来自专栏進无尽的文章

编码篇-OC跨多层UI事件传递处理

在 iOS 中,对象间的交互模式大概有这几种:直接 property 传值、delegate、KVO、block、protocol、多态、Target-Acti...

1643
来自专栏GIS讲堂

Arcgis for Js实现graphiclayer的空间查询(续)

上文中,实现了简单的针对graphiclayer的空间查询工作,在本节,将更加详细的介绍针对graphiclayer的空间查询。首先,空间查询的方式:提供多种类...

1083
来自专栏HTML5学堂

2016.07 第2周 群问题分享

HTML+CSS 移动端中1px的边框如何实现 2016.07.04~2016.07.08 核心概念: viewport、CSS3属性 参考答案: 一、通过设置...

2966
来自专栏技术博客

JavaScript开发中几个常用知识点总结

  最近在做项目的时候自己写了一些JavaScipt代码,于是自己又进行简单的查阅资料整理了一下,发现了如下几个比较有用的知识点:

994
来自专栏IMWeb前端团队

谁说你只是"会用"jQuery?

前言 套用上篇文章向zepto.js学习如何手动触发DOM事件 的开头??? 前端在最近几年实在火爆异常,vue、react、angular各路框架层出不穷,...

2286
来自专栏小狼的世界

使用YUI3创建Popup弹出层

很多互联网的项目应用中,弹出层出现的越来越多,使用YUI3可以快速的实现制作弹出层的效果。

841
来自专栏移动开发之家

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

 在如今的 Fultter 大潮下,本系列是让你看完会安心的文章。本系列将完整讲述:如何快速从0开发一个完整的 Flutter APP,配套高完成度 Flut...

2422
来自专栏魂祭心

原 利用Appdomain动态加载程序集,

3668
来自专栏用户2442861的专栏

Emmet for Dreamweaver:HTML/CSS代码快速编写神器

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML...

2412

扫码关注云+社区

领取腾讯云代金券