1、JavaScript 添加DOM Element 执行效率比较:

抄自:http://wildbit.com/blog/2006/11/21/javascript-optimization-adding-dom-elements-to-document

JavaScript optimization: Adding DOM elements to document

Scenario: you’re developing rich Web application and you need to load dynamic elements using AJAX and then add them to current document. For some reason you don’t want (or can’t) use fully generated HTML, and decided to fetch items in JavaScript array.

I know two classic ways to do so: create elements using document.createElement()method and concatenate HTML strings and assign result to parentElement.innerHTMLproperty. Of course, you can combine both ways. Let’s examine these ways in detail.

Classic way (and in ideal world the best way) is to use DOM for element manipulations:

for (var i = 1; i < = 1000; i++) {
var li = document.createElement('li');
li.appendChild(document.createTextNode('Element ' + i));
el.appendChild(li);
}

I got 1403 ms in Internet Explorer 6 and 165 ms in Firefox 1.5. Not so bad, but what about creating DOM element from HTML code?

for (var i = 1; i < = 1000; i++) {
var li = document.createElement('<li>Element ' + i + ')
el.appendChild(li);
}

It works better in Internet Explorer (1134 ms), but does not work in Firefox at all. Weird! Of course, you can add try/catch block and create elements using first approach in catch block for Firefox. But I have a better solution.

Every DOM node has the attribute innerHTML which holds all child nodes as an HTML string.

el.innerHTML = '';
for (var i = 1; i < = 1000; i++) {
el.innerHTML += '<li>Element ' + i + '';
}

Wow, 39757 ms in Internet Explorer and 41058 ms in Firefox! Cool result, right? It's because browser tried to render list while we updating and it takes such a long time. Little optimization:

var html = '';
for (var i = 1; i < = 1000; i++) {
html += '<li>Element ' + i + '';
}
el.innerHTML = html;

Firefox shows great performance, 50 ms, but Internet Explorer still slow – 10994 ms. I found solution which works very fast in both browsers: to create array of HTML chunks, and the join them using empty string:

var html = [];
for (var i = 1; i < = 1000; i++) {
html.push('<li>Element ');
html.push(i);
html.push('');
}
el.innerHTML = html.join('');

It’s fastest approach for Internet Explorer 6 – 407 ms, and very fast in Firefox – 47 ms. Why I’m not saying fastest in case of Firefox? I added another test to make in cleaner:

var html = '';
for (var i = 1; i < = 1000; i++) {
html += '<li style="padding-left: ' + (i % 50) + '" id="item-' + i + '">Element ' + i + ' Column ' + (i % 50) + '';
}
el.innerHTML = html;

And second example:

var html = [];
for (var i = 1; i < = 1000; i++) {
html.push('<li style="padding-left: ');
html.push(i % 50);
html.push('" id="item-');
html.push(i);
html.push('">Element ');
html.push(i);
html.push(' Column ');
html.push(i % 50);
html.push('');
}
el.innerHTML = html.join('');

84 ms for the first example and 110 ms for the second.

Here is results in table and diagram formats.

No Method Internet Explorer 6 Firefox 1.5
1 document.createElement() 1403 166
2 document.createElement() Full 1134
3 element.innerHTML 39757 41058
4 element.innerHTML Optimized 10994 50
5 element.innerHTML Join 400 47
6 element.innerHTML Optimized Large 28934 84
7 element.innerHTML Join Large 950 110
 
 
结论:通过数组的方式会提高执行效率。
 
 

2、JavaScript DocumentFragment:更快捷的操作DOM的途径

抄自:http://itindex.net/detail/49284-javascript-documentfragment-dom

DocumentFragment例子

我们要使用UL元素,然后往里面插入LI元素:

<ul id="list"></ul>

DOM插入和修改是一个很费力耗时的工作,所以,这样的交互越少越好。这就是DocumentFragment发挥功用的地方了。第一步我们先创建一个DocumentFragment:

// Create the fragment
var frag = document.createDocumentFragment();

DocumentFragment实际上像一个伪DOM节点,在这个例子里你可以把它当成虚拟的UL元素。现在,我们开始往里面加入元素:

// Create numerous list items, add to fragment
for(var x = 0; x < 10; x++) {
var li = document.createElement("li");
li.innerHTML = "List item " + x;
frag.appendChild(li);
}

往DocumentFragment里添加元素就跟你操作普通的DOM节点一样。一旦页面DOM加载完成,你可以访问了,你就可以把DocumentFragement挂到它的父节点上:

// Mass-add the fragment nodes to the list
listNode.appendChild(frag);

使用DocumentFragement要比直接对DOM节点操作要快的多,而且程序员可以利用新DOM节点来操作DocumentFragement,这样比操作整个页面DOM要更容易。所以,当需要进行大量DOM操作时,尽量使用DocumentFragement,它会让你的应用变的更快!

结合以上文章可以发现:结合使用

DocumentFragment

数组

可大大提高执行效率。

Adding DOM elements to document的更多相关文章

  1. [D3] Create DOM Elements with D3 v4

    Change is good, but creating from scratch is even better. This lesson shows you how to create DOM el ...

  2. [D3] Select DOM Elements with D3 v4

    Before you can create dazzling data driven documents, you need to know how D3 accesses the DOM. This ...

  3. [Cypress] Create Aliases for DOM Elements in Cypress Tests

    We’ll often need to access the same DOM elements multiple times in one test. Your first instinct mig ...

  4. [D3] Modify DOM Elements with D3 v4

    Once you can get hold of DOM elements you’re ready to start changing them. Whether it’s changing col ...

  5. 第10章 文档对象模型DOM 10.2 Document类型

    Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示 ...

  6. ReactDOM & DOM Elements

    一.ReactDOM 1.1 render() ReactDOM.render(element,container,[callback]) 在container中渲染一个React元素,然后返回组件一 ...

  7. 【使用 DOM】使用 Document 对象

    Document 对象时通往DOM功能的入口,它向你提供了当前文档的信息,以及一组可供探索.导航.搜索或操作结构与内容的功能. 我们通过全局变量document访问Document对象,它是浏览器为我 ...

  8. Swift 里 Set(五)Adding & Removing Elements

    Adding Elements internal func _unsafeInsertNew(_ element: __owned Element) { _internalInvariant(coun ...

  9. DOM对象之document对象

    DOM对象:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. 打开网页后,首先看到的是浏览器窗口,即顶层的win ...

随机推荐

  1. Android call setting 源码分析

    看下篇之前,请先读这三篇文章: Android GSM驱动模块(rild)详细分析(一)基本架构及初始化 Android GSM驱动模块(rild)详细分析(二)request流程 Android G ...

  2. 杭电OJ——1011 Starship Troopers(dfs + 树形dp)

    Starship Troopers Problem Description You, the leader of Starship Troopers, are sent to destroy a ba ...

  3. vps使用(centos)2

    SVN Server搭建 1.安装软件包 [root@cloud ~]# yum install subversion mysql-server httpd mod-dav_svn mod-perl ...

  4. Python自动化开发-变量、数据类型和运算

    一.变量 变量定义:Variables are used to store infomation to referrenced and manipulated in a computer progra ...

  5. JS实现的在线推荐逻辑

    import _ from 'lodash';import cfg from '../cfg/cfg';import {Response} from '../shared/lib/response'; ...

  6. 第一百三十三节,JavaScript,封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

  7. Qdocconf 写法

    Qdocconf 文件可以写在单独的一个文件里, 也可以使用include 命令包含其它文件. Qdocconf 文件有两类输出: html 和 DITA XML格式.两种格式的差别是,html格式需 ...

  8. Web框架——Django笔记

    Web框架--Django笔记 MVC和MTV MVC:Model.View.Controller MTV:Model.Template.View Django--MTV 1.创建Django程序   ...

  9. action中list传到JSP中取不到值的问题

    今天遇到了这个问题 action中list传到JSP中取不到值 搞了半天是因为我在JSP中取值的的时候 <s:iterator  value="shlist" var=&qu ...

  10. javaScript设计模式之常用工厂模式

    工厂函数 定义 由一个工厂对象决定创建某一种产品对象类的实例,主要用来创建同一类对象. 使用场景 比如说你是到一个买宠物的店,里面有很多不同的宠物,你只需要说出宠物的名字给店员就行了. // 狗的类 ...