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

在浏览器中,我们一旦把节点添加到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代码有点类似。

时间: 2010-07-11

监控 url fragment变化的js代码

当然,页面最好不要刷新,但是,拷贝一下浏览器的链接,又希望是下次能定位到你播发的那个视频.方法很简单,改变一下 url 的 fragment 就可以了. 监听fragment 的变化是这类编程的核心.在主流的浏览器(IE firefox)里面 都有一个 onhashchange 的事件监听 fragment 的变化. 但是,他们的行为有些差异.在IE8 以前的 IE版本里面,当 window.location 对象迅速变化的情况下,onhashchange 不会触发,非常奇怪的bug. 下面我写

浅析document.createDocumentFragment()与js效率

document.createDocumentFragment()说白了就是为了节约使用DOM.每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间.为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中.这是我写的一个简单的测试页面: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

关于javascript document.createDocumentFragment()

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

Vue中fragment.js使用方法详解

大部分内容源自 jQuery,当然,同时也参考了 component/domify ,如果有兴趣去这翻阅原始的代码,可以到 jQuery 中查找 wrapMap:至于 domify,直接到 github 搜索即可,相关项目类容很少,直接看 index.js 就行了. createDocumentFragment 如果要在一个节点上一次性插入多个元素怎么办,比如说一次插入 10000 个节点? 最简单粗暴的方式就是: var parent = document.getElementById('pa

JavaScript Tips 使用DocumentFragment加快DOM渲染速度

大家在使用JavaScript的时候,DOM操作是最平常不过的了, 随着Web前端技术的发展,我们越来越多的使用JS来操作DOM元素,比如通过ajax请求获取到数据,然后更新页面上的元素,一般情况下,这种操作我们会用类似node.appendChild()这中方式来完成.这个方法是无缓冲的,也就是说我们每次调用appendChild方法的时候,浏览器都会重新渲染页面.当然,使用这种方法也没有什么不行,因为我们在一般情况下都是对少量的DOM节点进行更新,也并不会带来太大的性能问题,但是如果大量的更

javascript学习基础笔记之DOM对象操作

DOM文档对象模型是HTML和XML的应用程序接口(API),DOM将整个页面规划成由节点层次构成的文档.DOM对象给予开发者对HTML的访问权限,并且使开发者能将HTML作为XML文档来处理和查看.DOM对象是与语言无关的API,意味着它的实现并不是与javascript绑定,这在于初学者来说可能会理解错误.DOM是针对XML的基于树的API,它关注的不仅仅是解析XML代码,而是用一系列相互关联的对象来表示这些代码,而这些对象可以被修改,而且无需重新解析代码就能直接访问它们.由于DOM的使用上

javascript随机将第一个dom中的图片添加到第二个div中示例

javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

JavaScript驾驭网页-CSS与DOM

推荐阅读:JavaScript驾驭网页-DOM DOM是种符合万维网标准的HTML操纵方式,它能比innerHTML特性达成更多操控功能 这里有HTML代码与CSS代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> span.class

实现JavaScript的组成----BOM和DOM详解

我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页内容无关(这些是DOM的事),目前,BOM已经被W3C搬入了HTML5规范中. window对象: BOM的core,表示浏览器的一个实例,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在

10条影响CSS渲染速度的写法与使用建议第1/3页

这篇文章主要写的提高网页在客户端浏览器的渲染速度的CSS部分,暂时总结了10条. 1.*{} #jb51 *{} 尽量避开 由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果.所以就有了*通配符.*会遍历所有的标签: *{margin:0; padding:0} 如果这样写,页面中所有的标签的margin全是0:padding也是0: #jb

vue2.0的虚拟DOM渲染思路分析

1.为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue框架(文章链接),其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更改后通过appendChild函数将真实的DOM插入到页面. 虽然采用的是文档碎片,但是操作的还是真实的DOM. 而我们知道操作DOM的代价是昂贵的,所以vue2.0采用了虚拟DOM来代替对真实DOM的操作,最后通过某种机制来完成对真实DOM的更新,渲染视图. 所谓的虚拟DOM,其实就是 用JS来模

javascript页面渲染速度测试脚本分享

复制代码 代码如下: /* 获取渲染开始的时间戳, 保存在数组PAGE_SPEED_TIME中 */<html><script type="text/javascript">/*tag*/PAGE_SPEED_TIME = [new Date().getTime()];</script><head>......</head> 复制代码 代码如下: ....../* 页面最末端,计算页面加载耗用的时间 */</body&g

javascript tips提示框组件实现代码

tip.js 复制代码 代码如下: function tips(obj,tag){ var tip = document.createElement('div'),arg= arguments[2],left,top; //创建tipbox var bodywid= document.documentElement.clientWidth; //这里也可以替换为容器的宽度$(id).outerWidth(); var abs = obj.getElementsByTagName(tag); ti

浅谈Javascript中的12种DOM节点类型

前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成. 属性 一般地,节点至少拥有nodeType.nodeName和nodeValue这三个基本属性. 节点类型不同,这三个属性的值也不相同 nodeType nodeType属性返回节点类型的常