闭包实现分时函数优化批量渲染DOM的过程
来源:互联网 发布:韩顺平mysql笔记 编辑:程序博客网 时间:2024/05/22 09:48
渲染列表类的数据时,往往会做批量渲染DOM的操作,类似通讯录好友列表商品列表之类的数据有可能会很多,几十几百上千条,如果一下子全部渲染出来会导致浏览器卡顿假死或者崩溃,我们可以用分时函数来优化这个过程,一次性渲染一千条数据改为每100毫秒渲染10条数据:
var showDom = function (data,fn,num) { var obj, t, len = data.length, start = function () { if(Object.prototype.toString.call(data) == '[object Array]'){ //这里要判断传进来的参数是否是数组,以及需要渲染数据的条数是否超过数据总数 for(var i=0;i<Math.min(num || 1,data.length);i++){ var obj = data.shift(); fn(obj); } } }; return !function(){ t = setInterval(function(){ if(data.length == 0){ return clearInterval(t); }; start(); },100) }();};var fn = function(obj){ var div = document.createElement('p'); div.innerHTML = obj; document.body.appendChild(div);};var myArr = [];for(var a=0;a<1000;a++){ myArr.push(a);};showDom(myArr,fn,10);
阅读全文
0 0
- 闭包实现分时函数优化批量渲染DOM的过程
- 页面渲染优化的过程
- 如何优化批量修改DOM的操作
- js性能优化之分时函数
- DOM节点渲染详解--盒子的生成到布局过程
- 深入浏览器渲染原理(一)—浏览器渲染DOM过程
- DOM结点的渲染(attach)
- DOM 树的解析渲染
- memcpy函数的优化过程
- JavaScript分时函数
- postgresql函数存储过程实现数据批量插入
- 渲染的基本过程
- HTML的渲染过程
- 浏览器的渲染过程
- 浏览器渲染的过程
- mysql优化存储过程中批量插入的速度
- 软件定时器和分时复用的实现
- 通过浏览器渲染过程进行前端优化
- spring cloud之断路器hystrix(五)
- PostgreSQL 只读模式 , hot standby recovery 模式
- 完美解决编译缺少文件,apt-file search 命令去查找依赖。
- thinkphp 页面静态化
- Linux Shell的信号trap功能你必须知道的细节
- 闭包实现分时函数优化批量渲染DOM的过程
- 工控机CF卡槽无法使用的解决方案
- ssm框架的整合
- Netty学习笔记
- HDFS原理篇
- RabbitMQ的几种典型使用场景
- 移植libjpeg-turbo库到mips32架构跑openwrt系统的开发板上
- EditText 光标颜色
- [leetcode]#169. Majority Element