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打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
微信小程序实现多图上传
Jun 19 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 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中Smarty模板初体验
2011/08/08 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
浅析node.js中close事件
2014/11/26 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
Python decimal模块使用方法详解
2020/06/08 Python
Python colormap库的安装和使用详情
2020/10/06 Python
python实现学生信息管理系统源码
2021/02/22 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
优秀毕业大学生推荐信
2013/11/13 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
无传销社区工作方案
2014/05/13 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android