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

有一位同事跟大家说他在网上看到一道面试题:“如果后台传给前端几万条数据,前端怎么渲染到页面上?”,如何回答? 于是办公室沸腾了, 同事们讨论开了, 你一言我一语说出自己的方案。 有的说直接循环遍历生成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并不算真正的多线程, 但是为了方便表达,便借用了线程一词

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

时间: 2017-03-27

jQuery调取jSon数据并展示的方法

本文实例讲述了jQuery调取jSon数据并展示的方法.分享给大家供大家参考.具体如下: 以下代码是将页面中的展示部分 复制代码 代码如下: function searchProductlistByfilterCondition(index, type, sort, filterWord) {      //cite_html      var citem_html = '<div class="citem"><div class="citemtop&quo

Vue.js展示AJAX数据简单示例讲解

最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐. 当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单.优美.自然,而且便于与在用的页面框架集成. 感谢vue.js的作者,官方网站地址:https://cn.vuejs.org 举个小例子.注意,代码中使用jQuery.bootstrap.没有用过bootstrap不影响阅读本文. 一.返回的JSON数据示例 [ {"playid":"12113c676a4e

web页面数据展示新想法(json)

在客户端使用js将json的数据绑定到页面元素中,而在服务器端只用根据参数生成不同数据的json字符串,这样不但减少了网络数据流量,而且也分离了显示层和逻辑层. 为了绑定数据,客户端必须要有绑定数据使用的js代码.而数据绑定一般都是一样的,所以可以使用公用的绑定方式,比如span就将数据绑定到html属性中. 优点: 1.数据交换量小,有利于传输. 2.页面和业务层分离 3.数据绑定无刷新 4.服务器端因为要生成的数据量减少了,所以压力会降低 缺点: 1.由于使用js绑定数据,造成客户端压力增大

使用JS批量选中功能实现更改数据库中的status状态值(批量展示)

我们在开发项目的时候经常会在后台管理时用到批量展示功能来动态的修改数据库的值.下面以修改数据库的status状态值来实现批量展示功能.批量选中功能引用js来实现. 前端html代码: <table class="mlt" style="border:1px solid red;"> <thead> <tr> <if condition="$type eq 'pg'"> <th colspan=

C#.NET中如何批量插入大量数据到数据库中

在WEB项目开发过程中有时会碰到批量插入数据到数或者是将EXCEL文件据入到数据库中.为了方便实现可以先将EXCEL导入到GRIDVIEW中然后一次批量插入.实现代码如下: 前台代码 <asp:GridView ID="dgBom" runat="server" AutoGenerateColumns="false" CellPadding="1" CellSpacing="2"> <He

MyBatis批量插入数据到Oracle数据库中的两种方式(实例代码)

一.mybatis批量插入数据到Oracle中的两种方式: 第一种: <insert id="addList" parameterType="java.util.List" useGeneratedKeys="false"> INSERT ALL <foreach item="item" index="index" collection="list"> INTO

C#操作数据库中存取图片文件的方法

本文实例讲述了C#操作数据库中存取图片文件的方法.分享给大家供大家参考.具体如下: private string sqlconnstr = "Data Source=.;Database=db_test;User id=sa;PWD=123456"; /*功能:把一种图片插入到数据库中 *返回值:无 */ void InsertImageToDB() { //将需要存储的图片读取为数据流 FileStream fs = new FileStream(@"D:/Bear.jpg

js实现批量删除功能

本文实例为大家分享了js实现批量删除功能的具体代码,供大家参考,具体内容如下 界面如下: 勾选复选框会自动记录id,设置value="id"即可 下面是全选操作(js): 其中开头的复选框的id为:delete_checkbox 下面记录条的复选框的name为:delete_checkbox if($("input[id='delete_checkbox']").is(':checked')==true){ $('input[name="delete_ch

BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)

废话不多说,直接给大家贴代码了,具体代码如下所示: $('#table').bootstrapTable('destroy'); $('#table').bootstrapTable({ url:'../data/kehulist.json', uniqueId: "id", striped:true, // pagination:true, clickToSelect:true, height:340, columns: [{ field : 'state', checkbox:tr

基于js实现checkbox批量选中操作

本文实例为大家分享了js实现checkbox批量选中的具体代码,供大家参考,具体内容如下 <html > <head> <title>checkbox全选</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style type="text/css"></style&

PHP jQuery+Ajax结合写批量删除功能

为了美观,我还是引入了bootstrap的模态框,我引入的是自己的数据库 library中的一张表 名为:maninfo表 是一张个人信息表 表的加载我就不写了,比较简单,  大概写一下需要的按钮和html部分就可以了 <button type="button" class="btn btn-primary" id="plscdz" >批量删除</button> 全选: <input type="check

jQuery+ajax实现批量删除功能完整示例

本文实例讲述了jQuery+ajax实现批量删除功能.分享给大家供大家参考,具体如下: 效果展示: 完整代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met

vue+element实现批量删除功能的示例

今年开始学习vue+element实现后台开发,在实现批量删除功能时有2个小知识点记录在下: 1.如何实现单击行交替选中当前行的复选框,element官网的table实例中没有找到.--通过row-click和toggleRowSelection实现 2.如何获取选中行的值来实现批量删除.--通过selection-change实现 代码如下 html: <div class="row mt30 pl15"> <el-button type="warning