面试题

作者: 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 可以出现多次

相关文章

  • 面试材料

    面试经验 面试题1 面试题2 面试题3 面试题4 面试题5 面试题6――数据结构 面试题7――网络 面试题8――汇...

  • 高阶面试题

    webpack面试题 面试题:webpack插件 Git面试题 面试题:git常用命令 面试题:解决冲突 面试题:...

  • this的指向的面试题

    面试题1 面试题2 面试题3 面试题4

  • 面试所涉及的问题

    面试题参考1 : 面试题 面试题参考2 : 内存管理 面试题参考3 :面试题 ...

  • Android超实用最全面试大纲(三)

    文章目录: ANR面试题 OOM面试题 Bitmap面试题 UI卡顿面试题 内存泄漏面试题 内存管理面试题 一、A...

  • Android最全面试大纲(三)

    文章目录: ANR面试题 OOM面试题 Bitmap面试题 UI卡顿面试题 内存泄漏面试题 内存管理面试题 一、A...

  • 2022年web前端面试题

    web前端面试题分为:html/css面试题、javascript面试题、vue面试题、性能优化面试题、网络方面面...

  • ios面试题

    初级面试题 中级面试题 高级面试题 swift篇

  • Android超实用最全面试大纲(四)

    文章目录: 冷启动和热启动面试题 其他优化面试题 架构模式面试题 插件化面试题 热更新面试题 进程保活面试题 Li...

  • Android最全面试大纲(四)

    文章目录: 冷启动和热启动面试题 其他优化面试题 架构模式面试题 插件化面试题 热更新面试题 进程保活面试题 Li...

网友评论

      本文标题:面试题

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