侧边栏壁纸
博主头像
DeQ

江流宛转绕芳甸,月照花林皆似霰

  • 累计撰写 23 篇文章
  • 累计创建 12 个标签
  • 累计收到 5 条评论

目 录CONTENT

文章目录

js性能优化,防抖与节流

DeQ
DeQ
2020-06-14 / 0 评论 / 0 点赞 / 418 阅读 / 1,484 字

频繁计算?

之前接到一个需求要把【导航/搜索过滤栏悬浮】改成用户上拉时不展示,下拉并达到一定距离时才展示出来,这类效果在各类APP中都有看到,其中需要计算用户下拉最终停下来时,共下拉了多少px,实现起来也不算太难,就不放代码了。

image

就是这频繁的打印(计算)引发了我的思考,这每秒都在算啊,对性能会不会...,一顿查资料后,发现js性能优化之防抖与节流。

普通情况

<div style="width: 100px;height: 2000px;background-color: skyblue;"></div>

window.onload = function(){
	// 获取滚动条距顶高度
	function getScrollTop() {
	    var scroll_top = 0;
	    if (document.documentElement && document.documentElement.scrollTop) {
	        scroll_top = document.documentElement.scrollTop;
	    }
	    else if (document.body) {
	        scroll_top = document.body.scrollTop;
	    }
	    return scroll_top;
	}
	
	/* 一、普通情况 */
	window.addEventListener('scroll', function(){ console.log(getScrollTop()); });
	/* end */
}

普通情况

RUNOOB 图标

js防抖

防抖是什么?防抖效果img

RUNOOB 图标

概念

当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。
即:连续触发事件,只执行一次。

例如上图所示,连续触发了滚动事件,但只有最后停下来了,且停下来的时间超过了1s,才执行打印。

/* 二、函数防抖 */
var timeout = null;
function debounce() {
    if(timeout !== null){
        clearTimeout(timeout);  //清除这个定时器
    }

    timeout = setTimeout(function(){
        console.log("防抖 ", getScrollTop());
    }, 1000);
}

window.addEventListener('scroll', function(){
    debounce();
});
/* 函数防抖 end */

所以,我文章开头的频繁计算问题,就可以通过防抖解决。

js节流

节流是什么?节流效果img

RUNOOB 图标

概念

当持续触发事件时,函数会以一定的频率触发。

例如上图所示,一直在触发滚动事件,但打印在以一定的时间间隔出现。

/* 三、函数节流 */
var timer = null;
var throttle = function() {
    if (!timer) {
		timer = setTimeout(function() {
			console.log("节流 ", getScrollTop());
			timer = null;
		}, 1000);
	}
    
}

window.addEventListener('scroll', function(){
	throttle();
});

/* 函数节流 end */

其它场景

当项目中遇到有【高频事件触发】需求的时候,都可以想到节流与防抖。
比如做【搜索联想】时,可以用防抖来节约请求资源,而不是用户输一个字符就请求一次api。
再比如我在做【元素跟随鼠标】时,可以用节流来避免一直计算并设置元素坐标。

正常情况

RUNOOB 图标

加入节流后(每200ms设置一次坐标)

RUNOOB 图标

0

评论区