渲染大量数据，利用setTimeout提升渲染速度

约定不等于承诺〃 2022-12-30 07:37 258阅读 0赞

举个栗子，有一个需求是用js实现渲染一个2万行6列的表格，我们首先不做代码优化，看下效果会怎么样，代码如下：

我们在浏览器中看到的效果：浏览器等待了一段时间才渲染出来，在此期间浏览器像是被卡主了一样什么都不能做。

对上面的代码做一个优化，使其分几步完成上面的需求，这样每次要做的事情就不会太多了。代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>渲染table测试</title>
    </head>
    <body>
    <button onclick="renderTableFun()">点击渲染table</button>
    <div id="box" class="container"></div>
    <script type="text/javascript">
    function renderTableFun(){ 
        var boxDom = document.getElementById('box');
        var cTable = document.createElement('table');
        var index = 0;
        //这次我们分5步来完成上面的任务，其实也可以分更多步
        var oneStepNum = 4000;
        var currentStep = 1;
        var renderTable = function renderTable(){ 
            for(var i = 0;i<oneStepNum;i++){ 
                var tr = document.createElement('tr');
                for(var j = 0;j<6;j++){ 
                    var td = document.createElement('td');
                    td.innerHTML = index;
                    tr.appendChild(td);
                    index++;
                };
                cTable.appendChild(tr);
            };
            boxDom.appendChild(cTable);
            currentStep++;
            if(currentStep>5){ 
                clearTimeout(timer);
                return;
            };
            var timer = setTimeout(renderTable,0);
        };
        renderTable();//渲染dom
    };
    </script>
    </body>
    </html>

我们发现代码经过这样优化之后，dom可以很快就被渲染出来。其思想就是：把一个很耗性能的操作或长时间的操作分解成一些耗性能较少或这耗时少的操作，就不会造成耗时长的代码使浏览器卡死的情况了，能快速的把页面先呈现在用户面前。

其实很多优化代码都是采用这种原理做的，比如[节流、防抖][Link 1]等。

# 参考文章 #

[https://www.cnblogs.com/MagicalOfD/p/6545161.html][https_www.cnblogs.com_MagicalOfD_p_6545161.html]

[Link 1]: https://blog.csdn.net/HuangsTing/article/details/111595353
[https_www.cnblogs.com_MagicalOfD_p_6545161.html]: https://www.cnblogs.com/MagicalOfD/p/6545161.html