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

大家在使用JavaScript的时候，DOM操作是最平常不过的了， 随着Web前端技术的发展,我们越来越多的使用JS来操作DOM元素，比如通过ajax请求获取到数据，然后更新页面上的元素，一般情况下，这种操作我们会用类似node.appendChild()这中方式来完成。这个方法是无缓冲的，也就是说我们每次调用appendChild方法的时候，浏览器都会重新渲染页面。当然，使用这种方法也没有什么不行，因为我们在一般情况下都是对少量的DOM节点进行更新，也并不会带来太大的性能问题，但是如果大量的更新DOM节点，那么性能的差距就会越来越明显了。因为浏览器要不停的渲染页面，尤其是一些复杂的标签，大量的重新渲染非常消耗性能，影响用户体验。那么有什么好的方法能让这类DOM操作的效率提高呢？

　　虽然我们平时在开发中遇到这样情况的时候并不多，但还是有必要了解一下，JS中提供了一个DocumentFragment的机制，相信大家对这个并不陌生，它可以提供一个缓冲的机制，将DOM节点先放到内存中，当节点都构造完成后，再将DocumentFragment对象添加到页面中，这时所有的节点都会一次渲染出来，这样就能减少浏览器很多的负担，明显的提高页面渲染速度。例如下面的代码：

代码如下:

function CreateNodes(){
for(var i = 0;i < 10000;i++){
var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" + i + " <br />";
document.body.appendChild(tmpNode);
}
}
function CreateFragments(){
var fragment = document.createDocumentFragment();
for(var i = 0;i < 10000;i++){
var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" + i + "<br />";
fragment.appendChild(tmpNode);
}
document.body.appendChild(fragment);
}

　　上面的代码给出了两个函数，分别是用普通的DOM方法和DocumentFragement两种方式向页面添加一万个div节点，大家可以自己实验一下，使用第二种方式要比第一种快很多。这里只是简单的div标签的平铺添加，如果是更加复杂的HTML标签或是多层的嵌套标签，那么性能的差距就会更加明显。
　　通过上面的例子，大家在开发JavaScript应用的时候，如果遇到这种大量节点的情况，不妨将DocumentFragment作为一个备选的方案。

赞 (0)

相关推荐

  • 关于javascript document.createDocumentFragment()

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

  • 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

  • 浅析document.createDocumentFragment()与js效率

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

  • Vue中fragment.js使用方法详解

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

  • 监控 url fragment变化的js代码

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

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

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

  • JavaScript如何动态监听DOM元素高度详解

    JavaScript如何动态监听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渲染思路分析

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

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

  • JavaScript 中的文档对象模型 DOM

    JavaScript 中的文档对象模型 DOM

    目录 1.什么是DOM 2.选择元素 3.getElementById() 4.querySelector() 5.querySelectorAll() 6.添加新元素 7.更改CSS样式 8.如何监听事件 1.什么是DOM DOM 文档对象模型,是 HTML 和 XML 文档的编程接口,用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects),允许从文档中创建.更改或删除元素,还可以向这些元素添加事件,使页面更加动态. DOM 将 HTML

  • JavaScript中MutationObServer监听DOM元素详情

    JavaScript中MutationObServer监听DOM元素详情

    一.基本使用 可以通过MutationObserver构造函数实例化,参数是一个回调函数. let observer = new MutationObserver(() => console.log("change")); console.log(observer); observer对象原型链如下: MutationObserver实例: 可以看到有disconnect.observer.takeRecords方法. 1. observer方法监听 observer方法用于关联

随机推荐