在很多时候我们都需要创建一系列的元素节点,就像如下的操作一样:
var list = document.getElementById('content');
for(var i=0;i<10;i++){
var item = document.createElement('li');
list.appendChild(item);
item.appendChild(document.createTextNode('item'+i));
}
其实这样的操作效率是很低的,需要不断的区更新DOM,每循环一次就要对页面进行更新,循环少可能不是特别明显,但要是操作多的话,那效率是很成问题的,再看看下面的代码:
var list = document.getElementById('content');
var fragment = document.createDocumentFragment();
for(var i=0;i<10;i++){
var item = document.createElement('li');
fragment.appendChild(item);
item.appendChild(document.createTextNode('item'+i));
}
list.appendChild(fragment);
这里是先吧所有的元素节点先放到fragment里面,就最后一次性的添加到DOM里面,这里就只做了一次的DOM操作,这样既能提高性能,也能避免因为不停的操作DOM导致页面闪烁的问题,这让我感觉有点想java中的StringBuffer/StringBuilder。
面对上面的问题,我们通常还有另外一种做法,就是用innerHTML的方式,这虽然不是DOM的标准用法,但却是很多人(包括我)都非常喜欢的用法:
var createDatagrid = function(rows) {
var html = [];
html.push('<table width="631" border="0" cellspacing="1" cellpadding="0">');
html.push('<tbody'>);
for (var i = 0; i < rows.length; i++) {
html.push('<tr onmouseover=\'this.style.backgroundColor="#FAFAFA";\' onmouseout="this.style.backgroundColor=\'\';" style="text-align:center;">');
html.push('<td align="center" height="22">' + rows[i].user_name + '</td>');
html.push('<td align="center">' + rows[i].type_id+ '</td>');
html.push('<td align="center">' + rows[i].send_time+ '</td>');
html.push('<td align="center">' + rows[i].gps_time)+ '</td>');
html.push('<td align="center">' + rows[i].speed + '</td>');
html.push('<td align="center">' + rows[i].course + '</td>');
html.push('<td align="center">' +rows[i].gps_status+ '</td>');
html.push('</tr>');
}
html.push('</tbody>');
html.push('</table>');
document.getElement.innerHTML = html.join("");
}
上面这种效率也是很高的,和第二种方法的效率是差不多的,但这种做法并不是基于javascript的DOM的调用,而是通过HTML的解析器使用其内部的DOM调用来创建的,所以他效率不错
分享到:
相关推荐
JavaScript DOM编程艺术 --全
returning-DOM-elements-javascript-源码.rar
javaScript-DOM编程艺术javaScript-DOM编程艺术javaScript-DOM编程艺术javaScript-DOM编程艺术
第三章:javascript-DOM对象模型-补充课件.ppt
javascript_DOM,javascript_DOM,javascript_DOM,javascript_DOM
JavaScript和DOM操作-第10周 第10周研究:列出并说明使我们能够从DOM中选择元素JavaScript方法。 什么是文件对象? 没有从DOM中选择元素的文档对象上还有哪些其他可用方法? 您本周学到的最喜欢的东西是什么? ...
JavascriptDOM基本操作 dom 精品操作
JavaScript-DOM-交互式和动态JavaScript JavaScript DOM的代码存储库-交互式和动态JavaScript,由Packt发布 JavaScript DOM-交互式和动态JavaScript 这是发布的的代码存储库。 它包含从头到尾完成视频课程所需的...
npm install --save dom-to-pdf 用法 var domToPdf = require ( 'dom-to-pdf' ) ; var element = document . getElementById ( 'test' ) ; var options = { filename : 'test.pdf' } ; domToPdf ( element , ...
dom-to-image:使用HTML5 canvas从DOM节点生成图像
JavaScript-DOM--:JavaScript DOM编程艺术源代码
VBScript JavaScript Dhtml SQL WSH DOM XML CSS ASp等12个参考手册
dom.js - 一个专门处理 DOM 相关操作的 JavaScript 工具方法库。原生 JavaScript 纯手动打造,无任何依赖;支持 UMD 和 ES6 模块规范,适应各种运行环境;支持调用 DOM 整体模块和独立调用方法;提供 100+ 实用的 ...
经典之作《javascript dom编程艺术》源码。通过一个实际案例,讲述了原生的javascript操作dom的使用方法,以及操作dom中应该注意的一些事项。
Javascript标准DOM_Range操作 - 百度文库.doc
2-创建项目文件夹并cd到其中: mkdir assignment--dom-manipulations-basics cd assignment--dom-manipulations-basics 3-下载.zip文件并解压缩: curl ...
dom-accessibility-api 计算给定 DOM 元素的可访问名称或描述。 在 JavaScript 中实现用于测试。 $ yarn add dom-accessibility-api import { computeAccessibleName , computeAccessibleDescription , } from ...
Javascript系列-DOM操作(理论) Javascript系列-DOM操作(理论)Javascript系列-DOM操作(理论)
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown键盘事件-用wasd移动图片的位置 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-onmouseover事件 鼠标悬浮切换图片 带注释/总结 【前端 ...