Web性能优化(一)之防抖和节流

节流

概念:可以举个应用场景来理解,就是在搜索引擎执行过程中,我们每输入一个汉字后,搜索引擎自动执行ajax请求,但是键盘事件是通过字母触发而不是汉字,所以我们就可以固定频率来节约资源。

Web性能优化(一)之防抖和节流_第1张图片

实现节流使用时间戳

 

Web性能优化(一)之防抖和节流_第2张图片

防抖

通过SetTimeout设置毫秒时间,在触发事件后,n秒内没有再次触发事件,处理函数才会执行,如果在这一段时间来到之前,又一次触发了事件,那就重新计时,举个例子:就是电梯5秒关门,有人进来后,重新计时5秒再关门。实际作用也是可以在搜索引擎里面用到,也就是只要你在输入内容的时候,都不会发型ajax请求。

实现代码

  

Web性能优化(一)之防抖和节流_第3张图片

 

总结:保证一段时间技结束后,才触发函数。如果中途又有事件,那么重新计时。

 

实际运用

节流:滚动变色,避免函数过多执行

防抖:搜索引擎

主要用于性能优化

你可能感兴趣的:(JavaScript专题)