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

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


<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>requestAnimationFrametitle>
  <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 += `
  • ${data[onceCount*count + i].name}
  • `
    ; } $('#requestAnimationFrame').append(str); if (count < loopCount) { count++ requestAnimationFrame(refreshAnimation) } } requestAnimationFrame(refreshAnimation) } function directRefresh () { var str = ''; for (var i = 0; i < data.length; i ++) { str += `
  • ${data[i].name}
  • `
    ; } $('#requestAnimationFrame').append(str); } indirectRefresh(data.length, 5); // 分批渲染 // directRefresh(); // 同时渲染
    script> body> html>

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

    你可能感兴趣的:(笔记)