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 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 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使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
详解python3中tkinter知识点
2018/06/21 Python
学python安装的软件总结
2019/10/12 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
学校联谊活动方案
2014/02/15 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
迎元旦广播稿
2014/02/22 职场文书
材料员岗位职责
2014/03/13 职场文书
学风建设演讲稿
2014/09/12 职场文书
体育运动会广播稿
2014/10/05 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
社区节水倡议书
2015/04/29 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技