JavaScript如何一次性展示几万条数据


Posted in Javascript onMarch 30, 2017

有一位同事跟大家说他在网上看到一道面试题:“如果后台传给前端几万条数据,前端怎么渲染到页面上?”,如何回答? 于是办公室沸腾了, 同事们讨论开了, 你一言我一语说出自己的方案。 有的说直接循环遍历生成html插到页面上;有的说应该用分页来处理;还有的说这个面试官是个白痴, 哪有后台传几万条数据给前端这种情况的;我仔细思考了一下,先不论后端到底会不会白痴到传几万条数据给前端,假如真碰到这种情况,那么如果前端获取到数据以后, 直接将数据转换成html字符串,通过DOM操作插入到页面,势必导致页面运行出现卡顿, 为此我还特意写了一个 demo测试了一下, 代码如下

$.get("data.json", function (response) {
 //response里大概有13万条数据
 loadAll( response );
});
function loadAll(response) {
 var html = "";
 for (var i = 0; i < response.length; i++) {
  var item = response[i];
  html += "<li>title:" + item.title + " content:" + item.content + "</li>";
 }
 $("#content").html(html);
}

data.json中大概有13万条数据左右, 通过ajax获取数据后以最简单粗暴的方法展示数据,在chrome浏览器下, 刷新页面到数据显示,我心中默数, 整个过程大概花掉5秒钟左右的时间, 卡顿非常明显。 我大致观察了一下代码的运行时间,发现循环生成字符串这过程其实并不算太耗时, 性能瓶颈是在将html字符串插入到文档中这个过程上, 也就是 $("#content").html(html); 这句代码的执行, 毕竟有13万个li元素要被挺入到文档里面, 页面渲染速度缓慢也在情理之中。

既然一次渲染13万条数据会造成页面加载速度缓慢,那么我们可以不要一次性渲染这么多数据,而是分批次渲染, 比如一次10000条,分13次来完成, 这样或许会对页面的渲染速度有提升。 然而,如果这13次操作在同一个代码执行流程中运行,那似乎不但无法解决糟糕的页面卡顿问题,反而会将代码复杂化。 类似的问题在其它语言最佳的解决方案是使用多线程,JavaScript虽然没有多线程,但是setTimeout和setInterval两个函数却能起到和多线程差不多的效果。 因此,要解决这个问题, 其中的setTimeout便可以大显身手。 setTimeout函数的功能可以看作是在指定时间之后启动一个新的线程来完成任务。

$.get("data.json", function (response) {
  //response里大概有13万条数据
  loadAll( response );
});

function loadAll(response) {
  //将13万条数据分组, 每组500条,一共260组
  var groups = group(response);
  for (var i = 0; i < groups.length; i++) {
    //闭包, 保持i值的正确性
    window.setTimeout(function () {
      var group = groups[i];
      var index = i + 1;
      return function () {
        //分批渲染
        loadPart( group, index );
      }
    }(), 1);
  }
}

//数据分组函数(每组500条)
function group(data) {
  var result = [];
  var groupItem;
  for (var i = 0; i < data.length; i++) {
    if (i % 500 == 0) {
      groupItem != null && result.push(groupItem);
      groupItem = [];
    }
    groupItem.push(data[i]);
  }
  result.push(groupItem);
  return result;
}

var currIndex = 0;

//加载某一批数据的函数
function loadPart( group, index ) {
  var html = "";
  for (var i = 0; i < group.length; i++) {
    var item = group[i];
    html += "<li>title:" + item.title + index + " content:" + item.content + index + "</li>";
  }
  //保证顺序不错乱
  while (index - currIndex == 1) {
    $("#content").append(html);
    currIndex = index;
  }
}

以上代码大致的执行流程是

1. 用ajax获取到需要处理的数据, 共13万条

2. 将数组分组,每组500条,一共260组

3. 循环这260组数据,分别处理每一组数据, 利用setTimeout函数开启一个新的执行线程(异步),防止主线程因渲染大量数据导致阻塞。

loadPart函数中有这段代码

while (index - currIndex == 1) {
 $("#content").append(html);
 currIndex = index;
}

是为了保证不同的线程中最终插入html到文档中时顺序的一致性, 不至于同时执行的代码在插入html时互相篡位。

通过这种方式执行, 页面瞬间就刷出来了,不用丝毫等待时间。 从同步改为异步,虽然代码的整体资源消耗增加了, 但是页面却能瞬间响应, 而且, 前端的运行环境是用户的电脑,因此些许的性能损失带来的用户体验提升相对来说还是值得的。

虽然示例中提到的情况在现实环境中几乎不可能出现, 但是在我们平时的工作中总会有一些似是而非的场景出现, 利用里面的处理思路, 或许对我们解决问题会有一定的帮助。

ps:setTimeout并不算真正的多线程, 但是为了方便表达,便借用了线程一词

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
常规表格多表头查询示例
Feb 21 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
ECMAScript6--解构
Mar 30 #Javascript
js图片放大镜效果实现方法详解
Oct 28 #Javascript
js a标签点击事件
Mar 30 #Javascript
JS+html5制作简单音乐播放器
Sep 13 #Javascript
TypeScript入门-接口
Mar 30 #Javascript
如何编写jquery插件
Mar 29 #jQuery
基于JavaScript实现瀑布流效果
Mar 29 #Javascript
You might like
php中cookie的作用域
2008/03/27 PHP
试用php中oci8扩展
2015/06/18 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python logging模块学习笔记
2014/05/24 Python
python实现八大排序算法(1)
2017/09/14 Python
python邮件发送smtplib使用详解
2020/06/16 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
建筑工程专业学生的自我评价
2013/12/25 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
发票退票证明
2015/06/24 职场文书
委托书范本格式
2019/04/18 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
Mysql案例刨析事务隔离级别
2021/09/25 MySQL