工作中解决过如题的问题，4万条数据需要瞬间渲染到页面上，趁最近需要，重新整理一遍

第一次优化采用了数据分组分多次渲染的方法，能迅速渲染上一组数据，达到很好的初始视觉效果，但是总的dom元素数量还是一样庞大，当渲染完所有dom，滑动时还是会卡顿。

所以在更高要求下还是要用虚拟滚动，写在了下一篇。本篇就把分组简单的附上代码

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
<!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>
</head>
<body>
    
</body>
<script>
    // 创建20万条数据时间相比较渲染20万条数据的时间可以忽略不计
    let data = []
    for(let i = 0; i < 200000; i ++) {
        data.push(i+1)
    }
    // 分组，分成二维数组resultArr
    let partArr = []
    let resultArr = []
    for(let i = 0; i < data.length; i ++) {
        if((i+1) % 1000 == 0 && i+1 != data.length) {
            resultArr.push(partArr)
            partArr = []
        }
        partArr.push(data[i])
        if(i+1 == data.length) resultArr.push(partArr)
    }
    // 循环渲染
    function render(arr) {
        // dom节点的占位符。原来用的拼接字符串，然后用jquery的append添加，此处用createDocumentFragment，分组的思想是一样的
        let frag = document.createDocumentFragment()
        for(let i = 0; i < arr.length; i ++) {
            let p = document.createElement('p')
            p.innerHTML = arr[i]
            frag.appendChild(p)
        }
        document.body.appendChild(frag)
    }
    // 循环每组
    for(let i = 0; i < resultArr.length; i ++) {
        setTimeout(() => {
            render(resultArr[i])
        }, 50);
    }
</script>
</html>