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 相关文章推荐
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 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
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
python基于socket函数实现端口扫描
2020/05/28 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
记者岗位职责
2014/01/06 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
八达岭长城导游词
2015/01/30 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python