海量数据页面渲染优化

javascript
  目录
  1. 1. 海量数据页面渲染优化
    1. 1.1. 一 使用requestAnimationFrame
    2. 1.2. 二 使用setTimeout
    3. 1.3. 三 时间切片

页面有大量数据渲染的优化处理

海量数据页面渲染优化

平时在工作中需要在页面中渲染的数据量并不多，不过在极端情况下可能会渲染成千上万条，如果直接把数据生成dom节点往页面中插入的话，可能会使浏览器挂掉，下面列举3个优化方式：

一 使用requestAnimationFrame

使用requestAnimationFrame函数，可以根据浏览器刷新频率进行渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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>
  <div>
    <ul id="ul"></ul>
  </div>
</body>
<script>
  const maxNum = 50000;
  const num = 20;
  let count = 0;
  let ul = document.querySelector('#ul');
  function add() {
    let frag = document.createDocumentFragment();
    for(let j=0; j<num; j++) {
      let li = document.createElement('li');
      li.innerHTML = num*count + j;
      frag.appendChild(li);
    }
    ul.appendChild(frag);
    loop();
  }
  function loop() {
    count++;
    if(count < maxNum/num) {
      requestAnimationFrame(add);
    }else {
      console.log('总用时->'+Math.ceil((performance.now() - startTime))+'ms');
    }
  }
  let startTime = performance.now();
  add();
</script>
</html>

二 使用setTimeout

使用setTimeout函数，完成一段工作后将线程让出去，让浏览器其它任务执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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>
  <div>
    <ul id="ul"></ul>
  </div>
</body>
<script>
  const maxNum = 50000;
  const num = 20;
  let count = 0;
  let ul = document.querySelector('#ul');
  function add() {
    let frag = document.createDocumentFragment();
    for(let j=0; j<num; j++) {
      let li = document.createElement('li');
      li.innerHTML = num*count + j;
      frag.appendChild(li);
    }
    ul.appendChild(frag);
    loop();
  }
  function loop() {
    count++;
    if(count < maxNum/num) {
      setTimeout(add);
    }else {
      console.log('总用时->'+Math.ceil((performance.now() - startTime))+'ms');
    }
  }
  let startTime = performance.now();
  add();
</script>
</html>

上述两种方式，一个是使用requestAnimationFrame，一个是使用setTimeout，前者是根据浏览器刷新频率，60HZ就是1000/60毫秒执行一次，但这里有个问题我没有实验，就是单词任务如果超过一次刷新的时间会如何处理呢？（所以尽可能把单次任务执行时间控制在浏览器一次刷新时间范围内）。
而setTimeout就没有刷新时间，任务执行完成之后，任务队列中没有其它任务的话，直接执行setTimeout里的任务。
所以在都是50000条数据，单次向dom中插入20条数据的任务，两者所耗费的时间是不一样的。
方法一用时：总用时->168309ms
方法二用时: 总用时->94812ms
根据用时可以看出来，方法二不需要等待浏览器的刷新时间（在理想状态，没有其它任务情况下），所需时间是比方法一少的。

三 时间切片

什么是时间切片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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>
  <div>
    <ul id="ul"></ul>
  </div>
</body>
<script>
  const maxNum = 50000;
  const num = 20;
  let count = 0;
  let ul = document.querySelector('#ul');

  function *gen() {
    while(count <  maxNum/num) {
      yield (function() {
              let frag = document.createDocumentFragment();
              for(let j=0; j<num; j++) {
                let li = document.createElement('li');
                li.innerHTML = num*count + j;
                frag.appendChild(li);
              }
              ul.appendChild(frag);
            })();
    }
  }
  function ts(gen) {
    if (typeof gen === 'function') gen = gen()
    if (!gen || typeof gen.next !== 'function') return
    return function next() {
        const start = performance.now()
        let res = null
        do {
            res = gen.next();
            count++;
        } while (!res.done && performance.now() - start < 30)

        if (res.done) {
          console.log('总用时->'+Math.ceil((performance.now() - startTime))+'ms');
          return
        }
        setTimeout(next)
    }
  }
  let startTime = performance.now();
  ts(gen)();
</script>
</html>

方法三用时: 总用时->1703ms
可以看出速度明显高于前两种方法，因为方法三可以设置切片时间，根据浏览器的性能或者页面的实际交互情况来设置具体的切片时间。

  web性能   面试题