使用createDocumentFragment和requestAnimationFrame，渲染大量数据页面不卡顿

快来打我* 2022-12-17 13:58 163阅读 0赞

1、实现思路：渲染大量数据时，合理使用 createDocumentFragment 和 requestAnimationFrame，将操作且分为一小段一小段去执行，从而实现页面不卡顿。

2、createDocumentFragment()

*  是用来创建一个虚拟的节点对象（用来创建文档碎片节点），该节点是一个虚拟节点，不属于文档树。在将 DocumentFragment 节点插入文档树时，插入的并不是 DocumentFragment 节点本身，而是插入他的子节点(后代节点)。
 *  当需要添加向页面添加很多DOM元素时（如添加很多个 li 标签），如果一个个createElement出来，然后再一个个appendChild上去，会频繁的操作DOM，很影响性能。因此可以可以使用 DocumentFragment 节点，先把 li 标签添加到 DocumentFragment，然后由 DocumentFragment 统一添加到页面上，会大大减少DOM操作，性能明显提升。（因为插入DocumentFragment节点的时候是插入他的后代节点，所以最后的实现效果是一样的，但性能有很大的提升。）

3、requestAnimationFrame() // 传入一个 回调函数/动画

*  该方法功能类似于 setInterval，但 requestAnimationFrame 在性能方面会更好一些。它不需要设置时间间隔，它的时间间隔由系统定义（一般为16.67ms），保证最佳的绘制效率。
 *  requestAnimationFrame() 浏览器没刷新一次，回调代码执行一次，不会造成丢帧或卡顿的现象，且当页面最小化或者隐藏时，requestAnimationFrame 会暂停渲染，当页面重新激活时，会从上次暂停的地方继续开始渲染，故性能方面会更好。

4、渲染大量数据不卡顿页面–例子

function renderOfNoStuck(total,parentNode,once){ 
    // total:必选，需要渲染的数据总量(可根据需求自定义)
    // parentNode：必选，需要将数据渲染到哪个节点下
    // once：可选，分段渲染时一小段渲染的数据量，默认为 20
    
    	if (!parentNode || parentNode.nodeType !== 1) { 
    	    // nodeType === 1 为元素节点 （2为属性节点，3为文本节点）
    	    throw new TypeError('请传入正确的参数');
    	}
    	setTimeout(() => { 
    	    // 把大量数据切成一小段一小段进行渲染
    	    const once = once || 20; // 一小段渲染的数据量(可根据需求自定义)
    	    const loopCount = Math.ceil(total / once);  // 插入数据需要的次数
    	    let countOfRender = 0; // 已渲染的数据量
    	    // 添加数据的方法
    	    function add() { 
    	        const fragment = document.createDocumentFragment();	// 创建一个 DocumentFragment节点
    	        for (let i = 0; i < once; i++) { 
    	            const li = document.createElement('li');
    	            li.innerText = Math.floor(Math.random() * total); // 给标签添加内容 (可根据需求自定义)
    	            fragment.appendChild(li); // 把数据先添加到 DocumentFragment 节点上
    	        }
    	        parentNode.appendChild(fragment); // 然后由 DocumentFragment 节点统一渲染到页面
    	        countOfRender += 1;
    	        loop();
    	    }
    	    function loop() { 
    	        if (countOfRender < loopCount) { 
    	            window.requestAnimationFrame(add); // requestAnimationFrame 传入回调函数add,渲染数据
    	        }
    	    }
    	    loop();
    	}, 0)
    }
    // let parentNode = document.querySelector('ul');
    // renderOfNoStuck(100000, parentNode)
    // renderOfNoStuck(20, parentNode, 1) // 设置成 1 时有一个比较好看的效果

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 requestAnimationFrame：优化动画和渲染的利器

requestAnimationFrame是浏览器提供的一个用于优化动画和渲染的API。它基于浏览器的刷新率，调度回调函数的执行，以确保动画和渲染的流畅性和高性能。使用r...

喜欢ヅ旅行/ 2024年04月22日 19:22/ 0 赞/ 38 阅读

相关前端页面卡顿怎么去优化

前端页面卡顿的原因有很多，下面是一些常见的优化方法： 1. 减少 HTTP 请求数量：合并文件、使用 CDN 加速、使用缓存 2. 压缩文件：使用 Gzip 压缩 CSS

布满荆棘的人生/ 2023年09月25日 15:33/ 0 赞/ 25 阅读

相关百度地图在jsp页面加载大量轨迹导致地图卡顿

原画线方式： //存储大量点轨迹json数组：historyPathList for(var i=0;i<historyPathList.length-1;i

r囧r小猫/ 2023年08月17日 16:35/ 0 赞/ 96 阅读

相关 Vue 大量数据展示卡顿解决方案（长列表优化）

需求分析（长列表展示）页面某处需要渲染 1w+ 条数据，并需要滚动展示，这时如果直接把这些数据渲染到页面上，会导致系统内存大量被占用，导致页面卡顿或崩溃我们都知道，

素颜马尾好姑娘i/ 2023年01月20日 15:53/ 0 赞/ 814 阅读

相关渲染大量数据，利用setTimeout提升渲染速度

举个栗子，有一个需求是用js实现渲染一个2万行6列的表格，我们首先不做代码优化，看下效果会怎么样，代码如下： <!DOCTYPE html> <html>

约定不等于承诺〃/ 2022年12月30日 07:37/ 0 赞/ 116 阅读

相关使用createDocumentFragment和requestAnimationFrame，渲染大量数据页面不卡顿

1、实现思路：渲染大量数据时，合理使用 createDocumentFragment 和 requestAnimationFrame，将操作且分为一小段一小段去执行，从而实现页

快来打我*/ 2022年12月17日 13:58/ 0 赞/ 164 阅读

相关如何将10万条数据渲染到页面做到不卡顿

如何将10万条数据渲染到页面做到不卡顿 window.requestAnimationFrame(callback) (请求动画帧) callback：下一次重绘之

柔光的暖阳◎/ 2022年11月04日 14:20/ 0 赞/ 157 阅读

相关 android页面卡顿定位,Android界面卡顿分析步骤详解

1、打开ddms工具，位于Sdk\\tools\\monitor.bat,双击 2、连上手机，选着进程，点击上面的start Method Profiling按钮 ![f9

落日映苍穹つ/ 2022年10月17日 13:48/ 0 赞/ 321 阅读

相关页面渲染数据

需求：已知购物车数据，渲染页面，根据每一个商品中的选中状态决定全选状态、总数量和总价格 <style> {

绝地灬酷狼/ 2022年09月11日 13:14/ 0 赞/ 212 阅读

相关 vue修改数据页面不重新渲染

使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，模拟案例如下： <template> <div> <div v-for="(it

迈不过友情╰/ 2021年07月26日 14:29/ 0 赞/ 863 阅读