面试总结 - 大量数据分批渲染(requestAnimationFrame)6.js

最新推荐文章于 2024-06-03 20:59:07 发布

Mobro

最新推荐文章于 2024-06-03 20:59:07 发布

阅读量2.8k

点赞数 1

分类专栏：笔记文章标签：前端面试

本文链接：https://blog.csdn.net/weixin_41610178/article/details/94412410

版权

笔记专栏收录该内容

21 篇文章 2 订阅

订阅专栏

分批渲染和同时渲染区别的例子效果~~
使用requestAnimationFrame来实现。requestAnimationFrame这个玩意儿呢，就是告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

<!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>requestAnimationFrame</title>
  <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
  <style>
    ul li { float: left; list-style: none; }
  </style>
</head>
<body>
  <ul id="requestAnimationFrame"></ul>
  <script>
    let data = localStorage.getItem('data');
    let counts = 10000;
    if (!data) {
      data = [];
      for (var i = counts; i > 0; i --) {
        data.push({
          name: ` ~\b `,
          index: i,
        })
      }
      localStorage.setItem("data", JSON.stringify(data));
    } else {
      data = JSON.parse(data);
    }

    function indirectRefresh(total, onceCount) {
      //total -> 渲染数据总数 onceCount -> 一次渲染条数
      let count = 0, //初始渲染次数值
        loopCount = total / onceCount //渲染次数
      function refreshAnimation() {
        var str = '';
        for (var i = 0; i< onceCount; i ++) {
          str += `<li>${data[onceCount*count + i].name}</li>`;
        }
        $('#requestAnimationFrame').append(str);
        if (count < loopCount) {
          count++
          requestAnimationFrame(refreshAnimation)
        }
      }
      requestAnimationFrame(refreshAnimation)
    }
    function directRefresh () {
       var str = '';
       for (var i = 0; i < data.length; i ++) {
         str += `<li>${data[i].name}</li>`;
       }
        $('#requestAnimationFrame').append(str);
    }
    indirectRefresh(data.length, 5);  // 分批渲染
    // directRefresh();   // 同时渲染
  </script>
</body>
</html>

最近很懒，分享个老电影看看吧~~ 哈哈哈
《孤儿怨》不恐怖，没有鬼啊，怪啊之类的家伙~

3分钟，了解天下大事

每天花3分钟在【每日全搜索】上，可尽知天下大事。
把省下来的时间留给自我技术沉淀噻~
在这里插入图片描述

Mobro

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
面试总结 - 大量数据分批渲染(requestAnimationFrame)6.js

分批渲染和同时渲染区别的例子效果~~使用requestAnimationFrame来实现。requestAnimationFrame这个玩意儿呢，就是告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。<!DOCTYPE html><html lang="en"...
复制链接

扫一扫

专栏目录