JavaScript中的文档碎片DocumentFragment

最新推荐文章于 2024-08-23 07:56:35 发布
最新推荐文章于 2024-08-23 07:56:35 发布
阅读量695 收藏
点赞数
分类专栏： 前端 文章标签： javascript fragment 文档碎片
本文为博主原创文章，转载请注明出处。
本文链接：https://blog.csdn.net/m0_37568521/article/details/78516268
版权
本文介绍了JavaScript中的文档碎片（DocumentFragment）及其在性能优化中的应用。通过使用文档碎片，可以避免频繁的DOM操作导致的浏览器渲染，提高页面性能。文章详细解释了文档碎片的作用，并提供了一个在ul中一次性添加多个li的例子。
摘要由CSDN通过智能技术生成
前言：时隔两年又一次接触到文档碎片，还记得当时blue老师讲文档碎片的时候，自己仍然是记忆犹新。学习了这个知识点以后，从来没有用过，这次在看书的时候看到这个东西了，想着还是来总结一下吧，说不定后面在哪个项目都用到了（主要原因是以前写网站都没有考虑到性能优化，现在还是的考虑一下这个问题啦）


文档碎片是什么东西

如果我们要在一个ul中添加100个li，如果不使用文档碎片，那么我们就需要使用append经常100次的追加，这会导致浏览器一直不停的渲染，是非常消耗资源的。但是如果我们使用文档碎片了，我们可以先将100个li添加到文档碎片中，然后直接把这个文档碎片追加到ul中即可。所以文档碎片其实就是一个临时的仓库。

文档碎片的具体应用

在一个ul中添加100个li

<!DOCTYPE html>
<html lang="en">
<
最低0.47元/天 解锁文章
输出是最好的学习
关注
专栏目录
js之DocumentFragment节点文档碎片性能优化操作的一种
angrynouse的博客
06-13 236
文档碎片
fragment.js
10-31
Fragment是可以让你的app纵享丝滑的设计，如果你的app想在现在基础上性能大幅度提高，并且占用内存降低，同样的界面Activity占用内存比Fragment要多，响应速度Fragment比Activty在中低端手机上快了很多，甚至能达到好几倍！如果你的app当前或以后有移植平板等平台时，可以让你节省大量时间和精力。 作者：YoKey 链接：http://www.jianshu.com/p/d9143a92ad94 來源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
js中的文档碎片
weixin_50963877的博客
10-14 342
我们知道，当我们在操作DOM的时候，是一个很耗性能的过程，尤其是改变DOM的结构就更加的消耗性能，但是有些时候我们不得不在DOM中添加内容，改变DOM的结构，此时我们就要减少DOM结构改变时的性能消耗，怎么减少性能消耗呢，这时我们就要引用“文档碎片”，其目的就是将我们每次增加的节点先存储在文档碎片中，在将文档碎片再添加到DOM结构中，这样将多次增加节点改变DOM结构，变了只改变一次DOM结构，大大得减少了性能的消耗。文档碎片：(操作1次dom)1、我们要明白当js操作dom时发生了什么？
Fragment.js 开源项目教程
最新发布
gitblog_00954的博客
08-23 328
Fragment.js 开源项目教程 fragment.jsA tiny tool for easily loading html fragments and templates项目地址:https://gitcode.com/gh_mirrors/fr/fragment.js 项目介绍 Fragment.js 是一个轻量级的 JavaScript 库，旨在简化网页中片段标识符（fragment...
JavaScript中的文档碎片 DocumentFragement
weixin_34238642的博客
01-22 191
JavaScript中的文档碎片 DocumentFragement 文档碎片是什么： 如果我们要在一个ul中添加100个li，如果不使用文档碎片，那么我们就需要使用append经常100次的追加，这会导致浏览器一直不停的渲染，是非常消耗资源的。但是如果我们使用文档碎片了，我们可以先将100个li添加到文档碎片中，然后直接把这个文档碎片追加到ul中即可。所以文档碎片其实就是一个临时的仓库。 如下代...
JS中的文档碎片
CC_R_3344的博客
05-19 498
JS中的文档碎片
JavaScript中的文档碎片
liujiujiang的博客
10-29 1130
JavaScript中，文档碎片独立于DOM树之外，存在于内存中，在创建之初为一个空白的文档片段，我们可以使用createDocumentFragment来创建 let fragment = document.createDocumentFragment(); 对文档碎片的操作，包括插入节点，删除节点的API都和其他DOM元素相同，但是也存在一些不同 将DOM树中的元素插入到文档碎片中的时候，DOM树中的元素会删除 <body> <div id="t1">t.
JavaScript文档碎片操作实例分析
11-23
JavaScript文档碎片操作是一种优化DOM（文档对象模型）操作的技术，主要应用于处理大量DOM元素的添加或删除，以提高页面性能。DOM操作是JavaScript中相对昂贵的运算，因为每次修改DOM结构，浏览器都需要重新计算元素...
Vue双向绑定原理（一）文档片段DocumentFragment
Creabine的博客
03-03 3907
DocumentFragment介绍JavaScript有以下几种创建节点的方式： createAttribute(name)： 用指定名称name创建特性节点 createComment(text)：　　　　　　　 创建带文本text的注释节点 createElement(tagname)：　　　　　 创建标签名为tagname的节点 creat
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十三：HTML DOM-文档元素的操作（一）
01-20
因此，了解并使用DOM碎片（DocumentFragment）、批量操作和事件委托等优化技巧也是前端开发者的必备技能。 总的来说，本手册将为你提供一个关于HTML DOM元素操作的基础教程，帮助你掌握基本的元素选取、属性操作、...
javascript文档碎片
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
05-26 214
概念： JavaScript中，文档碎片独立于DOM树之外，存在于内存中，在创建之初为一个空白的文档片段，我们可以使用createDocumentFragment来创建 作用： 将需要添加的大量元素 先添加到文档碎片 中，再将文档碎片添加到需要插入的位置，大大减少dom操作，提高性能。 简单示例： //创建100个li，只操作一次dom <body> <ul id="ul"></ul> <script type="text/javascri
dom操作之文档碎片
01-03 546
文档碎片 在日常的工作中，避免不了我们要想一个元素中插入大量的动态元素，比如： 在页面中有一个ul，我们随着页面的某一个事件的触发，需要向#box中插入大量的li，正常的写法为： var oUl = document.querySelectorAll('#box')[0]; for(var i=0;i<1000;i++){ var
文档碎片
gwdgwd123的博客
09-13 248
DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。 因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。...
文档碎片(fragment)
anzheng6118的博客
06-18 110
原始代码： 1 var list = document.getElementById("myList"); 2 for (var i = 0; i < 10; i++) { 3 var item = document.createElement("li"); 4 list.appendChild(item); 5 item.appendChil...
文档碎片（精彩）
weixin_53342968的博客
02-15 405
文档碎片
浅谈文档碎片
眷恋天空的驴
03-17 1389
不管是js还是很常见的jquery，我们一般操作DOM就会引起页面数据的渲染，在比较大的项目或者说的更直接点，是面试别人问起来的时候知道。细节也很重要。createDocumentFragment() 的作用主要是以前你用小刀一刀一刀的割，但是文档碎片使用的是长40米的大刀，一刀就解决。何乐不为呢。测试碎片在大动干戈的情况下确实稍微效率高点。 通常操作DOM的几种情况：1：for(var i=0;
JS文档碎片
weixin_46421045的博客
06-10 218
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul></ul>
js--文档碎片
chen_wen_xian的专栏
06-10 919
文档碎片的作用：可以提高DOM操作性能（理论上），实际上不一定提高性能，反而降低性能。 比如下面的两个页面进行比较：点击普通按钮和碎片按钮进行比较两个弹出的时间大小；时间越大说明性能越低； 文档碎片--普通页面： 无标题文档 window.onload=function(){ var oBtn=document.getElementById('bt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值