javascript性能优化之分时函数的介绍


Posted in Javascript onMarch 28, 2018

分时函数和函数节流的问题不一样,函数节流针对的事件不是用户主动调用的,前面已经提过了。

函数节流的原理是:延迟当前函数的执行,如果该次延迟还没有完成,那么忽略接下来该函数的请求。也就是说会忽略掉很多函数请求。

在一些开发场景中,我们可能会一次性向文档中注入上千个节点,在短时间内向浏览器中大量添加DOM节点可能会让浏览器吃不消,结果往往会让浏览器卡顿或吃不消,解决方案之一便是使用分时函数(timeChunk)。

timeChunk分时函数让创建节点的工作分批进行,比如一秒钟创建1000个节点,改为每个200ms创建10个节点。具体timeChunk函数封装如下:

function timeChunk( arr, fn, count){//arr 数组 fn操作函数 count每次操作数量
  var obj,
    t;
  var start = function(){
    var len = Math.min(count||1,arr.length);
    for(var i=0; i < len; i++){
      obj = arr.shift();
      fn(obj)
    }
  };
  return function(interval){
    t = setInterval(function(){
      if(arr.length==0){
        return clearInterval(t)
      };
      start();
    },interval||200)
  }
}

应用:

加入我们要在文档中添加1000个节点,可以利用timeChunk分时函数每200ms连续添加20个节点。

var arr = [];
for(var i = 1; i <= 1000; i++){
  arr.push(i)
}
var renderLists = timeChunk(arr,function(i){
  var div = document.createElement('div');
  div.innerHTML = i;
  document.body.appendChild(div);
},20);
renderLists(200);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中方便增删改cookie的一个类
Oct 11 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
React.js入门学习第一篇
Mar 30 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
Vue数据监听方法watch的使用
Mar 28 #Javascript
Vue 自定义动态组件实例详解
Mar 28 #Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 #Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 #Javascript
js中el表达式的使用和非空判断方法
Mar 28 #Javascript
JS实现左边列表移到到右边列表功能
Mar 28 #Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 #Javascript
You might like
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python字典简介以及用法详解
2016/11/15 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
考试违纪检讨书
2014/02/02 职场文书
班长竞选演讲稿
2014/04/24 职场文书
疾病防治方案
2014/05/31 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
一起来学习Python的元组和列表
2022/03/13 Python