面试题

作者: Wxq_59f9 | 来源:发表于2019-12-09 08:23 被阅读0次

    函数防抖和函数节流

    函数防抖(debounce)

    当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间

    函数节流(throttle)

    预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新
    周期

    函数节流(throttle)与函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。

    函数防抖的应用场景

    连续的事件,只需触发一次回调的场景有:
               1:搜索框搜索输入。只需用户最后一次输入完,再发送请求
               2:手机号、邮箱验证输入检测
               3:窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
    
    函数节流的应用场景
      间隔一段时间执行一次回调的场景有:
               1: 滚动加载,加载更多或滚到底部监听
               2:谷歌搜索框,搜索联想功能
               3:高频点击提交,表单重复提交
    

    相同点:

              都可以通过使用 setTimeout 实现。
              目的都是,降低回调执行频率。节省计算资源。
    

    不同点:

    函数防抖,在一段连续操作结束后,处理回调,利用 clearTimeout 和 setTimeout 实现。函数节流,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高性能。
    函数防抖关注一定时间连续触发,只在最后执行一次,而函数节流侧重于一段时间内只执行一次。

    2: 什么是事件委托?为什么要用事件委托?

    什么是事件委托

    事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件。

    为什么要用事件委托

    因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率越大,100个li就要占用100个内存空间。如果要用事件委托,就会将所有的操作放到js程序里面,只对它的父级(如果只有一个父级)这一个对象进行操作,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能;

    原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){})

    window.onload 是在 dom 文档树加载完和所有文件加载完之后执行一个函数 document.ready 原生中

    没有这个方法,jquery 中有 ().ready(function),在 dom 文档树加载完之后执行一个函数(注意,这里面 的文档树加载完不代表全部文件加载完)。(document).ready 要比 window.onload 先执行
    window.onload 只能出来一次,$(document).ready 可以出现多次

    相关文章

      网友评论

          本文标题:面试题

          本文链接:https://www.haomeiwen.com/subject/muavgctx.html