10w数组求最大值不卡顿,向文档插入10W数据不卡顿

        async function findMax(largeList){
            return new Promise((resolve,reject) =>{
                requestIdleCallback(()=>{
                    try{
                        let max = largeList[0]
                        for(let i=0;i<largeList.length;++i){
                            if(largeList[i]>max){
                                max = largeList[i];
                            }
                        }
                        resolve(max);
                    }
                    catch(error){
                        reject(error);
                    }
                });
            });
        }

window.requestIdleCallback()方法将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。

你可以在空闲回调函数中调用requestIdleCallback()，以便在下一次通过事件循环之前调度另一个回调。

这个方法只是把js操作移到了一个空闲的时间里，没有切片还是会卡

       // 插入十万条数据
        const total = 100000
            // 一次插入 20 条，如果觉得性能不好就减少
        const once = 20
            // 渲染数据总共需要几次
        const loopCount = total / once
        let countOfRender = 0
        let ul = document.querySelector("ul");

        function add() {
            // 优化性能，插入不会造成回流
            const fragment = document.createDocumentFragment();
            for (let i = 0; i < once; i++) {
                const li = document.createElement("li");
                li.innerText = Math.floor(Math.random() * total);
                fragment.appendChild(li);
            }
            ul.appendChild(fragment);
            countOfRender += 1;
            loop();
        }

        function loop() {
            if (countOfRender < loopCount) {
                window.requestAnimationFrame(add);
            }
        }
        loop();

http://caibaojian.com/optimize-large-data.html