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并不算真正的多线程, 但是为了方便表达,便借用了线程一词

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

(0)

相关推荐

  • 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

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

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

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

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

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

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

  • Js表格万条数据瞬间加载实现代码

    Js表格,万条数据瞬间加载 在Ajax动态加载数据的实际应用中,大家都习惯了一种思维方式:一条数据创建一行. 于是如果数量大的时候,一次性要加载完数据的话,浏览器就会卡上半天 受Flex的DataGrid控件的启发,在Flex的DataGrid控件中,展示数据的方法并不是有多少条数据就创建多少行,它最多只创建你在界面上所看到的十几二十行(假设为n行),如果数据多的话,在滚动过程中,会从数据中抽取你应该看到的这n行数据,重新展示在已经创建好的那n行控件中. 也就是说,Flex的DataGrid控件

  • vue前端优雅展示后端十万条数据面试点剖析

    目录 前置工作 后端搭建 前端页面 直接渲染 setTimeout分页渲染 requestAnimationFrame 文档碎片 + requestAnimationFrame 懒加载 虚拟列表 前置工作 如果后端真的返回给前端10万条数据,咱们前端要怎么优雅地展示出来呢?(哈哈假设后端真的能传10万条数据到前端) 先把前置工作给做好,后面才能进行测试 后端搭建 新建一个server.js文件,简单起个服务,并返回给前端10w条数据,并通过nodemon server.js开启服务 没有安装no

  • 88秒插入1000万条数据到MySQL数据库表的操作方法

    我用到的数据库为,mysql数据库5.7版本的 首先自己准备好数据库表 其实我在插入1000万条数据的时候遇到了一些问题,现在先来解决他们,一开始我插入100万条数据时候报错,控制台的信息如下: com.mysql.jdbc.PacketTooBigException: Packet for query is too large (4232009 > 4194304). You can change this value on the server by setting the max_allo

  • Python采集猫眼两万条数据 对《无名之辈》影评进行分析

    一.说明 本文主要讲述采集猫眼电影用户评论进行分析,相关爬虫采集程序可以爬取多个电影评论. 运行环境:Win10/Python3.5. 分析工具:jieba.wordcloud.pyecharts.matplotlib. 基本流程:下载内容 ---> 分析获取关键数据 ---> 保存本地文件 ---> 分析本地文件制作图表 注意:本文所有图文和源码仅供学习,请勿他用,转发请注明出处! 本文主要参考:https://mp.weixin.qq.com/s/mTxxkwRZPgBiKC3Sv-

  • 教你如何6秒钟往MySQL插入100万条数据的实现

    一.思路 往MySQL中插入1000000条数据只花了6秒钟! 关键点: 1.使用PreparedStatement对象 2.rewriteBatchedStatements=true 开启批量插入,插入只执行一次,所有插入比较快. 二. 代码 package test0823.demo1; import java.sql.*; /** * @author : Bei-Zhen * @date : 2020-08-24 0:43 */ public class JDBC2 { //static

  • 详解mybatis批量插入10万条数据的优化过程

    数据库 在使用mybatis插入大量数据的时候,为了提高效率,放弃循环插入,改为批量插入,mapper如下: package com.lcy.service.mapper; import com.lcy.service.pojo.TestVO; import org.apache.ibatis.annotations.Insert; import java.util.List; public interface TestMapper { @Insert("") Integer test

  • mysql查询优化之100万条数据的一张表优化方案

    1.两种查询引擎查询速度(myIsam 引擎 ) InnoDB 中不保存表的具体行数,也就是说,执行select count(*) from table时,InnoDB要扫描一遍整个表来计算有多少行. MyISAM只要简单的读出保存好的行数即可. 注意的是,当count(*)语句包含 where条件时,两种表的操作有些不同,InnoDB类型的表用count(*)或者count(主键),加上where col 条件.其中col列是表的主键之外的其他具有唯一约束索引的列.这样查询时速度会很快.就是可

  • MySQL如何利用存储过程快速生成100万条数据详解

    1.在测试的时候为了测试大数据量的情况下项目的抗压能力我们通常要创造一些测试数据那么现在这个方法绝对好用 其中可能会有sql空间的报错可以自己尝试解决,这里做了分批插入,每次插入30万条,所以没有遇到类似的空间问题 首先,创建要插入100万数据的表格 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------------- -- Table structure for sdb_b2c_orders -- ----

  • 用存储过程、GetRows()、抽取10万条数据的速度测试

    现有10W条数据,Access数据库保存 通过正常提取:  复制代码 代码如下: <%  Set conn= Server.CreateObject("ADODB.Connection")  c&Server.MapPath("db2.mdb")  conn.Open connstr Set rs = Server.CreateObject ("ADODB.Recordset")  sql = "Select * from

随机推荐