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 相关文章推荐
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
详解使用vue实现tab 切换操作
2017/07/03 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
网络事业创业计划书范文
2014/01/09 职场文书
书法比赛获奖感言
2014/02/10 职场文书
公证书样本
2014/04/10 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
拓展策划方案
2014/06/03 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
浅谈Redis缓冲区机制
2022/06/05 Redis