js中几种动态创建元素并设置文本内容的比较,及性能测试。
动态创建标签并添加文本信息
- <ul>
- </ul>
1 appendChild (都兼容)
- var ul = document.getElementsByTagName("ul")[0];
- for(var i = 0; i < 5; i++) {
- var li = document.createElement("li");
- li.appendChild(document.createTextNode("text"));
- ul.appendChild(li); //逐个添加列表项,会导致浏览器的反复渲染
- }
2.insertAdjacentHTML (都兼容)
- var ul = document.getElementsByTagName("ul")[0];
- for(var i = 0; i < 5; i++) {
- ul.insertAdjacentHTML("afterbegin", "<li>text</li>")
- }
3.innerHTML (都兼容)
- var ul = document.getElementsByTagName("ul")[0],
- html = "";
- for(var i = 0; i < 5; i++) {
- html += "<li>text</li>";
- }
- ul.innerHTML = html;
4.createDocumentFragment (都兼容)
- var ul = document.getElementsByTagName("ul")[0],
- dF = document.createDocumentFragment();//创建文档片段
- for(var i = 0; i < 5; i++) {
- var li = document.createElement("li");
- li.appendChild(document.createTextNode("text"));
- dF.appendChild(li); //用文档片段来保护创建的列表项,然后再一次性添加到文档中,这里的文档片段相当于一个仓库
- }
- ul.appendChild(dF);
- ul = null,
- dF = null;
下面是几种方法的性能对比
测试网站 https://jsperf.com
测试结果以每秒钟执行测试代码的次数(Ops/sec)显示,这个数值越大越好。除了这个结果外,同时会显示测试过程中的统计误差,以及相对最好的慢了多少(%),统计误差也是非常重要的指标
本人只在chrome上 测试了。数据可能不准确。你也可以在ff ,ie或其他浏览器测试。
insertAdjacentHTML vs append

insertAdjacentHTML vs innerHTML

insertAdjacentHTML vs createDocumentFragment

appendChild vs createDocumentFragment

终上所述几种方法依我个人的测试得出结论
innerHTML>>insertAdjacentHTML >appendChild >createDocumentFragment
所以最好使用innerHTML(性能最优越)来动态创建标签。 insertAdjacentHTML代码量最少
js中几种动态创建元素并设置文本内容的比较,及性能测试。的更多相关文章
- js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
- IE8下动态生成option无法设置文本内容
问题: 1.在IE8下,JS动态添加 option 的时候,value 有值,但是文本内容添加不上 例:<option value="北京"></option&g ...
- JS动态创建元素(两种方法)
前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
- js入门之DOM动态创建数据
一. 知识点回顾 1. DOM结构 nodeName: '' 标签名 nodeType: '' 类型 1元素节点 2属性节点 3文本节点 nodeValue: '' 如果是元素节点 nodeValue ...
- [转]js中几种实用的跨域方法原理详解
转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...
- JS中几种常见的数组算法(前端面试必看)
JS中几种常见的数组算法 1.将稀疏数组变成不稀疏数组 /** * 稀疏数组 变为 不稀疏数组 * @params array arr 稀疏数组 * @return array 不稀疏的数组 */ f ...
- jquery利用appendTo动态创建元素
动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考. 当HTML字符串是没有属性的元素是, 内部使用document.cre ...
- Javascript:DOM动态创建元素实例应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 初探原生js根据json数据动态创建table
初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
随机推荐
- 阅读文章《DDD 领域驱动设计-如何 DDD?》的阅读笔记
文章链接: https://www.cnblogs.com/xishuai/p/how-to-implement-ddd.html 文章作者: 田园里的蟋蟀 首先感谢作者写出这么好的文章. 以下是我的 ...
- 【ASE高级软件工程】第一次结对作业
问题定义 具体规则见:讲义.大致规则如下: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数 ...
- 【SpringBoot】整合日志框架
一.日志框架概述 1.1 日志框架的产生 1.2 市面上的日志框架 二.SLF4j 使用与整合 2.1 如何在系统中使用SLF4j 2.2 如何整合日志框架 2.3 SpringBoot中的日志关系 ...
- 三、DQL语言
目录 一.基础查询 (一)语法 (二)特点 (三)示例 二.条件查询 (一)语法 (二)筛选条件的分类 三.排序查询 (一)语法 (二)特点 四.常见函数 (一)介绍 (二)分类 五.单行函数 (一) ...
- Dedecms限制栏目列表生成的最大页数
首先,我们要登陆DEDECMS后台 >> 系统 >> 站点设置 的同条栏目上,添加一个新的变量,变量名称:cfg_listmaxpage,变量说明:栏目生成列表最大页数,变量值 ...
- 翻译应用将在Win8.1系统中取消下载安装
自Windows8.Windows Phone 7.1和Windows Phone 8受到影响之后,微软又正式宣布停止对翻译应用提供支持服务.Microsoft Translator这款应用将从Win ...
- Hadoop_20_MapReduce程序的运行模式
1.MapReduce程序的运行模式 1. Windows中运行MapReduce程序 (1)mapreduce程序是被提交给LocalJobRunner在本地以单进程的形式运行 (2)而处理的数据及 ...
- 根据进程id pid 查容器id
To get container ID you can use: cat /proc/<process-pid>/cgroup Then to convert the container ...
- 如何处理请求返回的二进制数据流转化成xlsx文件?
/* fileName : 文件名 res:二进制流 */ function getOutExcel(fileName, res) { let blob = new Blob([res], { typ ...
- JVM命令jinfo
jinfo也是jvm中参与的一个命令,可以查看运行中jvm的全部参数,还可以设置部分参数. 格式 jinfo [ option ] pid jinfo [ opti ...