JS性能优化之文档片段createDocumentFragment

时间: 2018-08-28阅读: 2985标签: 优化

我们用原生js进行开发时,经常会用到两种更新DOM节点的方法:innerhtml 和 appendChild() 。其中 innerhtml 会完全替换掉原先的节点内容,如果我们是想向元素追加子节点的话,那么 innerHTML 显然满足不了需求。 转而我们就会想到 appendChild() 方法。appendChild方法接收的参数类型为单个的节点类型对象。因此当我们要添加多个子节点时,只能通过循环来实现。

例如:

for (var i = Things.length - 1; i >= 0; i--) {
    element.appendChild(Things[i]);
}

 

我们都知道,对DOM的操作次数越多,性能消耗也就越大。像这样的循环添加节点,循环了多少次,就对DOM操作了多少次,性能消耗明显是不划算的。我们就会想,能否把要插入的节点进行打包,然后一次性添加呢?如果可以的话,那就只对DOM做了一次操作了。要实现打包,这就要用到我们的主角 createDocumentFragment。

DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。

 

示例:创建主流web浏览器列表

HTML

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

 

JavaScript

var element  = document.getElementById('ul');

var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera', 
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);  // 此处往文档片段插入子节点,不会引起回流 (相当于打包操作)
});

element.appendChild(fragment);  // 将打包好的文档片段插入ul节点,只做了一次操作


参考资料: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1035

前端性能优化的三大处理方式

减少 HTTP 的请求次数和传输报文的大小,可以减少 HTTP 请求次数或者减少请求内容的大小 ,使图片渲染的更快:因为他们是基于代码渲染的,而对于位图(png/jpg/gif)是需要先把图片编码再渲染 ,可以避免图片失真变形

首页白屏优化实践

自从前端三大框架React、Vue、Angular面世以来,前端开发逐渐趋向规范化、统一化,大多数时候新建前端项目,首先想到使用的技术一定是三大框架之一,框架给前端开发带来了极大的便利和规范,但是由于这三大框架都是JS驱动

网站优化重点注意事项

可能很多的小白还不清楚,网站优化的重点在哪里,到底是站内优化重要还是站外优化重要,要知道的是,百度除了相关说明的,外链对网站的帮助已经越来越小,但是并不是代表就可以不去做

Vue项目优化

在日常的Vue项目开发中,随着业务的日渐负责,代码量的日益增加,随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差。为此我们需要减少vendor.js的体积,从本质上来解决这种问题

JS 代码脏乱差?你需要知道这些优化技巧

JavaScript 是万众瞩目的力量。它是世界上最流行的编程语言。它容易理解,有丰富的学习资源,对初学者非常友好。JavaScript 有着庞大的资源库,对小公司和大企业都颇具吸引力。庞大的 JS 工具和库生态系统为开发者的生产力带来了福音

WEB前端_搜索引擎工作原理与SEO优化

搜索引擎的工作分为三个阶段,即爬行,索引和检索;搜索引擎具有网络爬虫或蜘蛛来执行爬网,每次抓取工具访问网页时,它都会复制该网页并将其网址添加到索引中。

Node学习笔记:优化crud增删改查

在安装过程中需要特别注意,需要将 Install MongoDB Compass 前默认的勾选取消,可以使用 mongod --version 命令查看 MongoDB 版本,若版本号输出正常则安装完毕

Proxy-Go v7.4 发布,内网穿透针对 HTTP 优化!

Proxy是golang实现的高性能http,https,websocket,tcp,udp,socks5代理服务器,支持正向代理、反向代理、透明代理、内网穿透、TCP/UDP端口映射、SSH中转

Webpack 打包后代码执行时机分析与优化

代码执行时机将决定着是否能够正常执行,当依赖文件没加载完成就开始执行、使用对应模块,那么将会导致执行异常。这在“ 存在资源加载失败时,加载重试影响原来文件的执行顺序 ”的场景下尤为常见。

前端性能优化总结

原则:多使用内存,缓存或者其他方法;减少CPU计算,减少网络请求;减少IO操作(硬盘读写).加载资源优化:静态资源的合并和压缩。静态资源缓存(浏览器缓存策略)。使用CDN让静态资源加载更快。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!