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

最新推荐文章于 2024-06-04 23:35:24 发布

hst❀

最新推荐文章于 2024-06-04 23:35:24 发布

阅读量622

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/HuangsTing/article/details/111609424

版权

javascript 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

举个栗子，有一个需求是用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;
    for(var i = 0;i<20000;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);
};
</script>
</body>
</html>

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

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

<!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可以很快就被渲染出来。其思想就是：把一个很耗性能的操作或长时间的操作分解成一些耗性能较少或这耗时少的操作，就不会造成耗时长的代码使浏览器卡死的情况了，能快速的把页面先呈现在用户面前。

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

参考文章

https://www.cnblogs.com/MagicalOfD/p/6545161.html

hst❀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
渲染大量数据，利用setTimeout提升渲染速度

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>渲染table测试</title></head><body><button onclick="renderTableFun()">点击渲染table</button><div id="box" class="container"></div&g
复制链接

扫一扫

专栏目录