衬着大批数据我是如许操纵的

2024年4月28日 260次阅读 来源: javascript

简介

事变的由来是如许紫的，现在我担任公司内部的中心营业Gis天眼系统开辟，碰到一个题目就是：后端返回几千条数据致使浏览器衬着失利，浏览器几乎是阻滞状况。厥后没有想到适宜的处理计划，暂时衬着少许数据处理了。我记得清清楚楚，我已看过关于如许的题目怎样处理，惋惜我没有运用，原因是学而不思，看而不必。厥后因为家里有些事变，我告假回家休假歇息了一段时间。返来以后开了一次集会，说我同事 完成了一个上述题目，用到了js线程。然后我就针对此题目最先了二次思索。就有了本文。

JS线程

浏览器内分js线程、GUI衬着线程、事宜触发线程、等。人人都晓得JS是单线程，然则题目来了，单线程怎样完成异步，比如说我们常常运用的Ajax是怎样完成的呢？当你真正相识JS的Event Loop你就会邃晓！哦：原来如此。这里我就对线程举行举一反三，假如想深切进修能够看一下这篇文章：
10分钟明白JS引擎的实行机制

怎样衬着大数据

衬着大批数据一定会涉及到GUI衬着线程与js线程。以下简朴的代码：

<!--
  dom 节点
-->
<div id="app">
            
</div>    

//js代码            
var app=document.getElementById("app");   
var Fragment=document.createDocumentFragment()；         
for(var i=0;i<100;i++){
    var span=document.createElement("span");
    span.innerHTML = i;
    app.appendChild(span);
}
//开辟项目时，一定不会这么操纵dom。这里只是一个例子

从上面代码能够剖析、每次for轮回运用dom举行衬着。浏览器是怎样衬着的呢？JS线程是单线程，它假如实行js线程，GUI衬着线程一定会期待，如许一来衬着大批数据就会形成页面卡顿，以至阻滞、奔溃。页面显现结果就是一会儿这些dom节点悉数衬着出来。晓得了这一点，我们就能够想办法处理它（衬着大批数据）。

初探代码实行体式格局

以下代码：

console.log(1);
setTimeout(function(){
    console.log(2);
},100);
console.log(3);

人人一定会说这个很简朴，输出1 3 2。我想说的是人人看JS的Event Loop了吗？看了一定晓得其道理。

  1. 起首推断JS是同步照样异步,同步就进入主历程,异步就进入event table
  2. 异步使命在event table中注册函数,当满足触发前提后,被推入event queue
  3. 同步使命进入主线程后一向实行,直到主线程空闲时,才会去event queue中检察是不是有可实行的异步使命,假如有就推入主历程中。

第一版本

我运用了递归挪用完成以下代码：

var app=document.getElementById("app");

var j=1;
/**
 * 衬着体式格局
 * 
 * @number {number} 数目
 * */
function showDom(number){
    console.log('衬着'+(j++)+"次");
    for(var i=0;i<number;i++){
        var span=document.createElement("span");
        span.innerHTML = i;
        app.appendChild(span);
    }
}
/**
 * 衬着大数据量的dom节点
 * 
 * @count {number} 总数目
 * 
 * */
function init(count){
    if(typeof count!=="number") {
        console.warn(count+"范例不是：Number");
        return;
    }
    if(count>500){
        setTimeout(function(){
            showDom(500);
            init(count-500);
        },200);
    }else{
        showDom(count);
    }
}

init(4000);

能够看出应用上述体式格局能够简朴轻松完成衬着大批数据，给用户的以为是，当前数据许多，我须要一步一步衬着。比之前一会儿衬着几千条数据致使GUI衬着引擎卡顿、以至阻滞强多啦。

第二版本

接下来我又参考书本运用了下面的代码。

/**
 * 分时函数
 * @ary {Arry} 数据
 * @callback {Function} 回掉函数，一个参数，当前数据项
 * @count {Number} 数目
 * 
 * */
function timeChunk(ary,callback,count){
    var objTs=Object.prototype.toString,//检测范例
    t;//定时器
    if(objTs.call(ary)!=="[object Array]"){
        return console.warn(ary+"---》应该是Arry范例");
    }
    if(objTs.call(callback)!=="[object Function]"){
        return console.warn(callback+"---》应该是回掉函数");
    }
    if(objTs.call(count)!=="[object Number]"){
        return console.warn(count+"---》应该是Number范例");
    }
    //最先实行函数    
    function start(){
        for(var i=0;i<Math.min(count||1,ary.length);i++){
            callback(ary.shift());
        }
    }
    return function(){
        t=setInterval(function(){
            if(ary.length===0){
                return clearInterval(t);
            }
            start();
        },200);
    }
}
//后端返回数据

var ayy=[];
for (var a=0;a<50000;a++) {
    ayy.push(a);
}
//最先运用 分时函数
var init=timeChunk(ayy,function(i){
    var span=document.createElement("span");
    span.innerHTML = i;
    app.appendChild(span);
},500);
//最先衬着大数据
init();

参考demo

demo1 衬着大批数据

总结

经由过程上述计划我们也要进步用户体验度，让用户以为数据多正在勤奋加载中。假如一次性appendChild内容许多衬着引擎会卡死。经由过程定时器逐一appendChild则会进步机能。

    原文作者：javascript
    原文地址: https://segmentfault.com/a/1190000014239712
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞