资讯专栏INFORMATION COLUMN

渲染大量数据我是这样操作的

daydream / 3436人阅读

摘要:后来没有想到合适的解决方案,临时渲染少量数据解决了。线程浏览器内分线程渲染线程事件触发线程等。知道了这一点,我们就可以想办法解决它渲染大量数据。比之前一下子渲染几千条数据导致渲染引擎卡顿甚至停滞强多啦。

简介

事情的由来是这样紫的,目前我负责公司内部的核心业务Gis天眼系统开发,遇到一个问题就是:后端返回几千条数据导致浏览器渲染失败,浏览器几乎是停滞状态。后来没有想到合适的解决方案,临时渲染少量数据解决了。我记得清清楚楚,我已经看过关于这样的问题怎么解决,可惜我没有使用,原因是学而不思,看而不用。后来由于家里有些事情,我请假回家休假休息了一段时间。回来之后开了一次会议,说我同事 实现了一个上述问题,用到了js线程。然后我就针对此问题开始了二次思考。就有了本文。

JS线程

浏览器内分js线程、GUI渲染线程、事件触发线程、等。大家都知道JS是单线程,但是问题来了,单线程如何实现异步,比如说我们经常使用的Ajax是怎么实现的呢?当你真正了解JS的Event Loop你就会明白!哦:原来如此。这里我就对线程进行抛砖引玉,如果想深入学习可以看一下这篇文章:
10分钟理解JS引擎的执行机制

如何渲染大数据

渲染大量数据肯定会涉及到GUI渲染线程与js线程。如下简单的代码:


//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了吗?看了肯定知道其原理。

首先判断JS是同步还是异步,同步就进入主进程,异步就进入event table

异步任务在event table中注册函数,当满足触发条件后,被推入event queue

同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中。

第一版本

我使用了递归调用实现如下代码:

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

var j=1;
/**
 * 渲染方式
 * 
 * @number {number} 数量
 * */
function showDom(number){
    console.log("渲染"+(j++)+"次");
    for(var i=0;i500){
        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
参考demo

demo1 渲染大量数据

总结

通过上述方案我们也要提高用户体验度,让用户觉得数据多正在努力加载中。如果一次性appendChild内容很多渲染引擎会卡死。通过定时器逐个appendChild则会提高性能。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94055.html

相关文章

  • 渲染大量数据我是这样操作

    摘要:后来没有想到合适的解决方案,临时渲染少量数据解决了。线程浏览器内分线程渲染线程事件触发线程等。知道了这一点,我们就可以想办法解决它渲染大量数据。比之前一下子渲染几千条数据导致渲染引擎卡顿甚至停滞强多啦。 简介 事情的由来是这样紫的,目前我负责公司内部的核心业务Gis天眼系统开发,遇到一个问题就是:后端返回几千条数据导致浏览器渲染失败,浏览器几乎是停滞状态。后来没有想到合适的解决方案,临...

    ThreeWords 评论0 收藏0
  • 渲染大量数据我是这样操作

    摘要:后来没有想到合适的解决方案,临时渲染少量数据解决了。线程浏览器内分线程渲染线程事件触发线程等。知道了这一点,我们就可以想办法解决它渲染大量数据。比之前一下子渲染几千条数据导致渲染引擎卡顿甚至停滞强多啦。 简介 事情的由来是这样紫的,目前我负责公司内部的核心业务Gis天眼系统开发,遇到一个问题就是:后端返回几千条数据导致浏览器渲染失败,浏览器几乎是停滞状态。后来没有想到合适的解决方案,临...

    instein 评论0 收藏0
  • 我是如何使用React+Redux构建大型应用

    摘要:所以前端工程师不仅仅是写好页面和做好兼容性。对前端工程师的技术能力也会带来考验。这里想要说的是,如果使用了,使用了服务端渲染,对于前端工程师的个人素质要求会比较高,因为需要处理很多服务端的问题。 背景 我们团队有个项目由于开发时间较长,且是前后端杂糅的开发方式,维护成本很高,在线上暴露的问题很多。而且因为对接了公司一百多条产品线,每天都会接到大量的客诉和产品线反馈的问题。2017年11...

    canopus4u 评论0 收藏0
  • 方案设计--如何看待前端框架选型 ?

    摘要:纯前端开发主要是针对静态页面。自主权最大,正常是使用进行辅助开发,上线等。大致原因使用是为了和端的保持同步。四总结对于比较正式的项目,前端技术选型策略一定是产品收益最大化,用户在首位。 对于前端团队,可以实现企业受益最大化要点。 一、技术选型的策略 1、保证产品质量 (1)功能稳健:网页不白屏,不错位,不卡死;操作正常;数据精准。 (2)体验优秀:加载体验,交互体验,视觉体验,无障碍访...

    gnehc 评论0 收藏0
  • EJS学习指南

    摘要:基本概念的基本概念十分简单一个模板数据和传统的字符串模板拼接非常相似例如我们有一个列表该列表展示一组新闻理想中的状态如下新闻新闻新闻新闻新闻如果数据是异步获取的我们可以利用循环拼接字符串来实现内部的多个然后再追加到中但是更像是如下的样子伪代 基本概念 ejs的基本概念十分简单,一个html = 模板 + 数据,和传统的php字符串模板拼接非常相似. 例如我们有一个列表该列表展示一组新闻...

    wangym 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<