JavaScript --- 渲染数据量大的数组

很多时候，需要在页面上展示从后台来的大量数据,如果一次性渲染，会影响用户的体验。(而且浏览器中的JS严格限制了资源)

/*
*使用分组的思想来渲染大量的数组
*@parmas array 要处理的数组
*@params process 对数组中每一个item进行的操作
*@parmas context 执行的上下文
*/
function chunk(array, process, context){setTimeout(function(){var item = array.shift();process.call(context, item);if (array.length > 0){setTimeout(arguments.callee, 100);}}, 100);
}

// 定义数组
var myArray = [12, 123, 123, 4324, 412314 , 43241,341,3241]   // 随便弄的一个数组
function myProcess(item){var div = document.getElementById("myDiv");div.innerHTML += item + "<br>";
}
// 调用上面的chunk函数
chunk(myArray, myProcess);

详情参考《JavaScript高级程序设计》(第3版) P613

JavaScript --- 渲染数据量大的数组相关推荐

Echars 折线图自动向右平移显示数据(数据量大的时候适应)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Ech ...
我艹，MySQL数据量大时，delete操作无法命中索引。
来自:Java面试那些事儿最近,在脉脉上看到一个楼主提出的问题:MySQL数据量大时,delete操作无法命中索引:并且还附上了相关案例截图. 最终,楼主通过开启MySQL分析优化器追踪,定位到是优 ...
历史数据如何处理_数据库表数据量大读写缓慢如何优化（1）【冷热分离】
今天讨论的内容是冷热分离,也许概念并不陌生,对其使用场景也比较熟悉,但涉及锁的内容时仍然需要认真思考,这部分内容在我们实际开发中的"坑"还是不少的. 业务场景一曾经经历过供应链相 ...
mysql给数据量大的表添加索引的办法
有一个问题,一张表有3百万条记录,随着时间的增加,记录量会更多,此时查询速度很慢.在创建此表前没有未相应字段添加索引,所以此时需要为表添加索引.但是因为数据量大的原因,索引添加不成功,想了很多办法,终 ...
面试官问单表数据量大一定要分库分表吗？我们用六个字和十张图回答
1 文章概述在业务发展初期单表完全可以满足业务需求,在阿里巴巴开发手册也建议:单表行数超过500万行或者单表容量超过2GB才推荐进行分库分表,如果预计三年后数据量根本达不到这个级别,请不要在创建表时 ...
解决Mysql数据量大的时候分页优化(使用limit)的问题
解决Mysql数据量大的时候分页优化(使用limit)的问题参考文章: (1)解决Mysql数据量大的时候分页优化(使用limit)的问题 (2)https://www.cnblogs.com/ ...
Java List数据量大，需要分片批次操作
很久前,写过关于list数据量大,分批处理的相关介绍文章(自定义的java代码实现): SSM Mybatis 批量插入采用分批处理一次500条_默默不代表沉默-CSDN博客_mybatis分批插入 ...
form 提交无法显示该网页数据量大提交Post too large错误
如果form表单提交数据量大的时候会出现无法显示该网页. 解决办法1: 在 $TOMCAT_HOME$/conf/server.xml中找到 <Connector port="8080 ...
Vue渲染数据量过大，页面渲染卡
方案: 减少数据,减少demo节点,虚拟列表我在处理的使用使用了两个方案,一个是减少demo节点(组件化)拆分:虚拟列表我在进行排查问题的时候发现问题的所在是因为页面html有1800多行而且数据 ...

JavaScript --- 渲染数据量大的数组

JavaScript --- 渲染数据量大的数组相关推荐

最新文章

热门文章