JavaScript性能优化 创建文档碎片(document.createDocumentFragment)_javascript技巧

在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法。代码如下:

复制代码 代码如下:

for(var i=0;i<5;i++){
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
}

但是,如果当我们要向document中添加大量数据时(比如1w条),如果像上面的代码一样,逐条添加节点,这个过程就可能会十分缓慢。
为了解决这个问题,我们可以引入createDocumentFragment()方法,它的作用是创建一个文档碎片,把要插入的新节点先附加在它上面,然后再一次性添加到document中。代码如下:

复制代码 代码如下:

var oFragmeng = document.createDocumentFragment(); //先创建文档碎片
for(var i=0;i<10000;i++){
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
oFragmeng.appendChild(op); //先附加在文档碎片中
}
document.body.appendChild(oFragmeng);//最后一次性添加到document中

经过测试,在ie,firefox下性能明显得以提高。大家可以自己测试下。
前端性能优化都是从一些细节地方做起的,如果不加以注意,后果很严重。

PS:这个优化跟循环添加html代码有点类似。

时间: 2024-09-17 05:16:23

JavaScript性能优化 创建文档碎片(document.createDocumentFragment)_javascript技巧的相关文章

javascript性能优化之DOM交互操作实例分析_javascript技巧

本文实例讲述了javascript性能优化之DOM交互操作技巧.分享给大家供大家参考,具体如下: 在javascript各个方面,DOM毫无疑问是最慢的一部分.DOM操作与交互要耗费大量时间,因为它们往往需要重新渲染整个页面或者某一部分.理解如何优化与DOM的交互可以极大提高脚本完成的速度. 1.最小化DOM更新 看下面例子: var list = document.getElementById("ul"); for (var i=0; i < 10; i++){ var ite

javascript性能优化之事件委托实例详解_javascript技巧

本文实例分析了javascript性能优化之事件委托.分享给大家供大家参考,具体如下: 为下面每个LI绑定一个click事件 <ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Sa

java和javascript获取word文档的书签位置对比_javascript技巧

1.javascript:把IE浏览器的activex都打开,使用如下网页,可以看到书签顺序和位置: <html> <head> <script> var word; word = new ActiveXObject("Word.Application"); var range = word.Range; word.Visible = true; var path = "D:\\xxx\\xxx\\xx.doc"; word.Do

关于javascript document.createDocumentFragment()_javascript技巧

他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild. 也支持以下DOM2屬性: attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ow

javascript 文档的编码问题解决_javascript技巧

所以呢,在引用js文档的时候,要设置被引用的文档是什么编码的. 如:一个utf-8的页面引用一个gb2312的js文档,那么就要这么写 <script type="text/javascript" charset="gb2312" src="gb2312.js"></script> 这样就不会出现问题了.

JS实现兼容各浏览器解析XML文档数据的方法_javascript技巧

本文实例讲述了JS实现兼容各浏览器解析XML文档数据的方法.分享给大家供大家参考.具体分析如下: 网站上很多用JS解析XML文档的资料或多或少都有点问题, 以下是自己总结的代码,用来解析XML文档,兼容各个浏览器. parseXMLDOM.js代码: /* * 纯JS解析XML文档(兼容各个浏览器) */ function parseXMLDOM(){ var _browserType = ""; var _xmlFile = ""; var _XmlDom = n

JS获取IE版本号与HTML设置IE文档模式的方法_javascript技巧

JavaScript获取IE版本代码: var gIE = getIE(); alert(gIE.version) function getIE() { var rmsie = /(msie) ([\w.]+)/; var ua = navigator.userAgent.toLowerCase(); var match = rmsie.exec(ua) var result = {}; if (match && match.length > 0) { result = { brow

兼容IE和Firefox的javascript获取iframe文档内容的函数_javascript技巧

复制代码 代码如下: <script type="text/javascript"> function getIframeContent(){ //获取iframe中文档内容 var doc; if (document.all){//IE doc = document.frames["MyIFrame"].document; }else{//Firefox doc = document.getElementById("MyIFrame"

通过Javascript将数据导出到外部Excel文档的函数代码_javascript技巧

复制代码 代码如下: function AutomateExcel() { try { //Start Excel and get Application object. var oXL; try { oXL = new ActiveXObject("Excel.Application"); } catch(e) { alert("无法启动Excel!\n\n如果您确信您的电脑中已经安装了Excel," + "那么请调整IE的安全级别.\n\n具体操作:\