前端大量数据渲染，懒加载数据

最新推荐文章于 2023-11-19 15:10:31 发布

随心，随行

最新推荐文章于 2023-11-19 15:10:31 发布

阅读量706

点赞数 1

分类专栏： web前端文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_44588893/article/details/129133879

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

前端大量数据渲染，懒加载数据

前端数据量太大会导致页面加载缓慢，可能浏览器最终崩溃。

思路分析

前端获取到的数据，进行分割。
滚动到底部，渲染数据（采用观察者函数监视是否到底部）

代码demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .main-box {
        height: 600px;
        overflow: hidden;
        border: 1px solid red;
      }
      #data-main {
        height: 100%;
        overflow-y: auto;
      }
      .col {
        width: 100%;
        display: flex;
      }
      .col div {
        width: 100%;
        flex: 1;
      }
      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="main-box">
      <ul id="data-main">
        <li class="end-item">......</li>
      </ul>
    </div>

    <script>
      // 生成1000000条数据
      function getData() {
        let data = [];
        for (var i = 0; i < 1000000; i++) {
          data.push({
            name: "test" + i,
            id: i,
          });
        }
        return data;
      }

      // 分割数组数据按100条分割
      let itemIndex = 0;
      function getDataSplit() {
        const newData = getData().slice(itemIndex, itemIndex + 100);
        itemIndex = itemIndex + 100;
        return newData;
      }

      //
      //   function forData() {
      //     let str = "";
      //     getDataSplit().forEach((item) => {
      //       str += `
      //                     <li class="col item-data">
      //                         <div>${item.id}</div><div>${item.name}</div>
      //                     </li>
      //              `;
      //     });

      //     let dom = document.getElementById("data-main");
      //     dom.insertAdjacentHTML("afterbegin", str);
      //   }
      //   forData();

      // 设置观察器
      const observer = new IntersectionObserver(
        (entry) => {
          // 是出现在视口
          if (entry[0].isIntersecting) {
            console.log("Inter");
            let str = "";
            getDataSplit().forEach((item) => {
              str += `
                        <li class="col item-data">
                            <div>${item.id}</div><div>${item.name}</div>
                        </li>
                 `;
            });
            let itemDom = document.querySelector(".end-item");
            // let dom = document.getElementById("data-main");
            // 元素前面添加
            itemDom.insertAdjacentHTML("beforebegin", str);
            // dom.insertAdjacentHTML("beforeend", str);
          } else {
          }
        },
        {
          threshold: 0.1,
        }
      );
      let itemDom = document.querySelector(".end-item");
      observer.observe(itemDom);
    </script>
  </body>
</html>