如何渲染几万条数据但不卡主页面之 requestAnimationFrame

最新推荐文章于 2023-05-30 10:35:43 发布

Programmer boy

最新推荐文章于 2023-05-30 10:35:43 发布

阅读量1.7k

点赞数

分类专栏：小知识点汇总文章标签： requestAnimationFrame() 实现大批量的数据渲染

本文链接：https://blog.csdn.net/m0_37631322/article/details/89678875

版权

小知识点汇总专栏收录该内容

41 篇文章 1 订阅

订阅专栏

综述：window.requestAnimationFrame API在动画方面有非常大的应用价值，当初fangjing在做动画组件的时候，就是使用的这个API实现的，效果还是不错的，百灵中的歌词实现动画使用setInterval()循环遍历实现，在性能不好的盒子上动画顺滑度并不好，使用这个方法实现动画的话，效果是否会更好呢？这里给提供了一种可以借鉴的思路。

1.如何渲染几万条数据并不卡主页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<ul>控件</ul>
<script>
    setTimeout(() => {
        // 插入十万条数据
        const total = 100000;
        // 一次插入 20 条，如果觉得性能不好就减少
        const once = 20;
        // 渲染数据总共需要几次
        const loopCount = total / once;
        let countOfRender = 0
        let ul = document.querySelector("ul");
    function add() {
        // 优化性能，插入不会造成回流
        const fragment = document.createDocumentFragment();
        for (let i = 0; i < once; i++) {
            const li = document.createElement("li");
            li.innerText = Math.floor(Math.random() * total);
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        countOfRender += 1;
        loop();
    }
    function loop() {
        if (countOfRender < loopCount) {
            window.requestAnimationFrame(add);
        }
    }
    loop();
    }, 0);
</script>
</body>
</html>

2.`window.requestAnimationFrame()介绍`

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行；

注意：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()

当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，因此在大多数浏览器里，当requestAnimationFrame() 运行在后台标签页或者隐藏的<iframe> 里时，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。

回调函数会被传入DOMHighResTimeStamp参数，DOMHighResTimeStamp指示由RequestAnimationFrame（）排队的回调开始触发的时间。指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。在同一个帧中的多个回调函数，它们每一个都会接受到一个相同的时间戳，即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数，单位毫秒，最小精度为1ms(1000μs)。

Programmer boy

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
如何渲染几万条数据但不卡主页面之 requestAnimationFrame

综述：window.requestAnimationFrame API在动画方面有非常大的应用价值，当初fangjing在做动画组件的时候，就是使用的这个API实现的，效果还是不错的，百灵中的歌词实现动画使用setInterval()循环遍历实现，在性能不好的盒子上动画顺滑度并不好，使用这个方法实现动画的话，效果是否会更好呢？这里给提供了一种可以借鉴的思路。1.如何渲染几万条数据并不卡主页...
复制链接

扫一扫