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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 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的简易冒泡法代码分享
2012/08/28 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
python基于phantomjs实现导入图片
2016/05/13 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
python爬取内容存入Excel实例
2019/02/20 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python线程指南分享
2019/11/19 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
护理自我鉴定范文
2013/10/06 职场文书
优秀护士获奖感言
2014/02/20 职场文书
党员承诺践诺书
2014/05/20 职场文书
安全宣传标语口号
2014/06/06 职场文书
横店影视城导游词
2015/02/06 职场文书
走进科学观后感
2015/06/18 职场文书
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL