全国咨询热线:18720358503

小程序在线设计_JavaScript怎么一次性展示几万条数

类别:企业动态 发布时间:2021-01-12 浏览人次:

JavaScript如何一次性展示几万条数据       本文主要介绍了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 
 $("#(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 grou凡科抠图 = group(response);
 for (var i = 0; i grou凡科抠图.length; i++) {
 //闭包, 保持i值的正确性
 window.setTimeout(function () {
 var group = grou凡科抠图[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时互相篡位。

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

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

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

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


下一篇:没有了

推荐阅读

小程序在线设计_JavaScript怎么一次性展示几万条数

JavaScript怎样一次性展现几万元总数据 文中关键详细介绍了JavaScript一次性展现几万元总数据的完成方式。具备非常好的参照使用价值,下边跟随网编一起來看看吧有一名朋友跟大伙...

2021-01-12
网站设计应从运营和客户开始

网站制作应从经营和顾客刚开始创作者:做为一个网站的设计方案和开发设计,大家说還是应当创立一个重点的新项目工作组来承担全部新项目的开发设计,包含了频道设计方案,作用...

2021-01-12
网站建设设计中要注意主次区分重点

企业动态性制造行业新闻资讯建网站有关九度角度强烈推荐信息内容 企业网站建设设计方案时要留意次序区别关键 重要词:企业网站建设 网站制作 图象设计方案 营销推广谋化 互动性...

2021-01-12
从“知乎”的力量谈问答类网站的进化

魏则西恶性事件 搅拌的动能有多少,单是一个百度搜索个股单天就挥发5三亿美金,而西安市企业网站建设发觉, 魏则西恶性事件 始发于问与答网站类 知乎问答 ,问与答类网站针对大...

2021-01-12
小程序前端设计_深化了解Nodejs Global 模块

深层次了解Nodejs Global 控制模块 访问器上面有自身的全局性目标 window,同样, nodejs 下也是有自身的全局性目标 global,而且在每个控制模块下 都可以以立即浏览 global 目标。在 ...

2021-01-12
小程序首页模板_Bootstrap Table使用整理(五)之分页

Bootstrap Table应用梳理(五)之分页查询组成查寻 本文关键详细介绍了 Bootstrap Table应用梳理(五)之分页查询组成查寻的案例编码,十分出错,具备参照效仿使用价值,必须的朋友能够参...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信