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开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
随机推荐
- android默认获取敏感权限
1.通过系统签名获取权限 定制系统中,可以通过源码的签名文件对应用进行签名,在应用的AndroidManifest.xml中配置好参数,如图 <manifest xmlns:android=&q ...
- ASE19团队项目alpha阶段model组 scrum9 记录
本次会议于11月13日,19时整在微软北京西二号楼sky garden召开,持续7分钟. 与会人员:Jiyan He, Kun Yan, Lei Chai, Linfeng Qi, Xueqing W ...
- 一秒钟教会你如何 使用jfreechart制作图表,扇形图,柱形图,线型图,时序图,附上详细代码,直接看效果
今天有小伙伴问到我怎么使用jfreeChat生成图标,去年就有一个这方便的的总结,今天再遇到,就总结出来,供大家参考: 第一个: 创建柱状图,效果图如下: 柱状图代码如下: package cn.xf ...
- SmartBinding with kbmMW #4
前言 在前面写过的文章中,详细介绍过如何将各种的控件与数据源进行绑定(Bind).在这篇文章中,将重点讨论如何绑定TImage和TListView.(同时支持VCL与Firemonkey). 将图形数 ...
- vscode 踩坑汇总
gopls 提示 update 将 "go.useLanguageServer": true 改为 "go.useLanguageServer": false
- eclipse创建Maven Web项目以及无法修改Project Facets
1.在eclipse中创建maven项目,在菜单栏的:File-->New-->other中,搜索maven则会出现Maven Project; 2.点击next继续; 3.点击next继 ...
- briup_JDBC
连接mysql和orcle的驱动jar包 链接:https://pan.baidu.com/s/1M5RZY62UOZbfFGIwDQK6SQ 提取码:cu6e 复制这段内容后打开百度网盘手机App ...
- PAT Advanced 1153 Decode Registration Card of PAT (25 分)
A registration card number of PAT consists of 4 parts: the 1st letter represents the test level, nam ...
- Caffe---Pycaffe转换均值文件:xxx_mean.binaryproto成为xxx_mean.npy
Pycaffe转换均值文件:xxx_mean.binaryproto成为xxx_mean.npy 为什么需要mean.binaryproto转mean.npy? 使用Caffe的C++接口进行操作时, ...
- Map的使用及遍历方式
Java中Map遍历的四种方式 如果同时需要key和value推荐使用entrySet(第一种): 如果只是获取key,或者value,推荐使用keySet或者values方式(第二种): 如果需要在 ...