前端优化渲染：长列表渲染

js实现长列表渲染

众所周知，DOM多了之后，页面会变得很卡顿。有时候又不得不渲染很多数据，比如长列表，这时就需要前端做一些渲染优化了。

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      div,
      ul,
      li {
        box-sizing: border-box;
      }

      ul,
      li {
        list-style: none;
      }

      .scroll {
        margin: 50px auto;
        width: 500px;
        height: 300px;
        overflow-y: auto;
        background-color: pink;
      }

      .item {
        width: 100%;
        height: 50px;
        border: 1px solid #b2ceeb;
        margin-bottom: 5px;
      }

      .item:last-child {
        margin-bottom: 0;
      }
    style>
  head>
  <body>
    <div class="scroll">
      <ul class="container">ul>
    div>
  body>
html>
<script>
  // 获取滚动元素和列表容器元素
  const scrollEle = document.querySelector(".scroll");
  const containEle = document.querySelector(".container");

  const scrollArea = scrollEle.clientHeight; // 可视区域的高度
  const itemH = 50; // 每一个项目的高度（定高）
  const size = Math.ceil(scrollArea / itemH); // 可视区域能展示的条数

  // 初始化数据列表
  const dataList = new Array(10000);

  function scrollFn() {
    const scrollTop = scrollEle.scrollTop; // 获取滚动距离
    const first = Math.floor(scrollTop / itemH); // 根据滚动距离和列表高度计算出当前视图中第一条数据的索引
    const end = first + size; // 计算视图中最后一条数据的索引
    const data = dataList.slice(first, end); // 根据索引截取视图所展示的数据
    // 拼装截取的数据
    let box = "";
    for (let i = 0; i < data.length; i++) {
      box += `${first + 1 + i}`;
    }
    containEle.innerHTML = box; // 内容替换

    // 通过给列表容器设置padding值来保证滚动条的位置正确
    const paddingTop = first * itemH;
    const paddingBottom = (dataList.length - end) * itemH;
    containEle.setAttribute(
      "style",
      `padding-top: ${paddingTop}px; padding-bottom: ${paddingBottom}px`
    );
  }
  document.onload = scrollFn(); // 初始化渲染
  scrollEle.onscroll = scrollFn;
script>
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

上面这种方式只是适用于数据是一次性给的情况。其实我个人觉得，数据多了最好和后端协商一下，让后端做分页处理。全靠前端的话，局限性比较大。哪怕做了虚拟列表处理，数据过大的情况下，还是展示不全。
目前我测试过的谷歌浏览器的页面的最大宽/高是33554400px，如果超过这个宽度/高度，会被默认切掉。

相关阅读:
Qt文件对话框的使用
01- SA8155P QNX LA/LV 启动(01) - startup
领跑两轮电动车江湖，谁是“关键先生”？
MyBatis
【C语言】结构体+位段+枚举+联合(2)
含汞废水的深度处理方法
vulnhub靶场之THALES: 1
使用不同尺寸的传感器拍照时，怎么保证拍出同样视场范围的照片？
java基于ssm的汽车维修工时费快速估价系统
v-for列表渲染有无key值对比-diff算法详解

原文地址：https://blog.csdn.net/qq_32021429/article/details/132903092