原生方法实现前端一次拿到上万条数据的渲染

最新推荐文章于 2024-07-24 10:40:52 发布

Kratial

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量476

点赞数 25

文章标签：前端

本文链接：https://blog.csdn.net/Kratial/article/details/139071858

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 90%;
            border: 1px solid green;
            overflow: auto;
        }
        .userinfo{
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 2px 2px 3px gray;
            background-color: rgb(184, 146, 219);
            padding: 10px;
            margin: 0 10px 10px 10px;
        }
        .userinfo:nth-child(1){
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <script>
        let list = []
        let box = document.getElementsByClassName("box")[0]
        let http = function({method='GET',data=null,header,url=''}) {
            let xhr // 创建对象
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return new Promise((resolve,reject)=>{
                xhr.open(method,url,true);
                xhr.send();
                xhr.onreadystatechange=function() {
                    if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成
                        resolve(xhr.responseText);
                    }
                }
            })
        }
        // 处理每次n条数据的渲染
        function handleRender(data,box) {
           let fragment = document.createDocumentFragment();
           for (let i = 0; i < data.length; i++) {
              let userBox = document.createElement('div');
              let IDBox = document.createElement('div')
              let nameBox = document.createElement('div')
              let ageBox = document.createElement('div')
              userBox.setAttribute('class','userinfo')
              IDBox.innerText = data[i].id
              nameBox.innerText = data[i].name
              ageBox.innerText = data[i].age
              userBox.appendChild(IDBox)
              userBox.appendChild(nameBox)
              userBox.appendChild(ageBox)
              fragment.appendChild(userBox)
           }
           box.appendChild(fragment)
           fragment = null;
        }
        function init (resList,step) {
            let start = 0;
            function startRender() {
                let hasLen = resList.slice(start,).length
                let eachList = [];
                if (hasLen < step) {
                    eachList = resList.slice(start,)
                    return;
                } else{
                    eachList = resList.slice(start,start+step)
                    start+=step
                }
                handleRender(eachList,box) // 每次渲染step条数据，需要渲染【数据的总条数 / step】次
                requestAnimationFrame(startRender)
            }
            return startRender
        }
        
        http({method: 'GET',url: 'http://localhost:2000/testGetData'}).then(res=>{
            box.innerText = ''
            res = JSON.parse(res)
            list = res.list || []
            init(list,10)()
        })
        // 利用事件委托来处理每一条数据的点击事件，以减少内存的占用
        document.addEventListener('click',(e)=>{
           alert(e.target.innerText)
        })
        
    </script>
</body>
</html>```