15、什么是强缓存和协商缓存？

强缓存：直接从本地副本比对读取，不去请求服务器，返回的状态码是 200 。协商缓存：会去服务器比对，若没改变才直接读取本地缓存，返回的状态码是 304。强缓存主要包括 expires 和 cache-control 。 expires 是 HTTP1.0 中定义的缓存字段。当我们请求一个资源，服务器返回时，可以在 Response Headers 中增加 expires 字段表示资源的过期时间

16、说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？
Redux

redux只是一种架构模式，它可以应用到任意需要使用它的框架，react，vue等等。它是为了解决相对复杂的应用中不同组件之间共享状态而产生的，比如react中两个组件要访问同一个状态，可以把它提到最近的父组件，然后向下传递，但应用一旦复杂了，这样就会变得繁琐。redux这种模式就解决了类似这样的问题。

redux就是提供了一个叫store的容器里面的state存放了全局的数据状态，对外提供了三个方法getState(), dispatch(), subscribe()

getState(): 用来获取state的值，dispatch(action)用来发起一个action告诉一个叫reducer的函数怎么去更新state,同时把上一次的state作为参数也传给reducer, reducer拿到参数后，返回更新后的state, 得到新的state后就需要渲染组件，可以手动去调用render方法，但这样恒麻烦，通过subscribe接受一个调用render的函数放在一个数组中，每次dispatch的时候除了会通过reducer改变state,还会遍历还数组中的函数去调用，这样每次数据发生变化就可以重新去渲染组件。

react-redux

react-redux跟redux不同的是，它是专门为react服务的，它将redux中store的概念和React中context的概念结合起来，解决了相对复杂的react应用中不同组件共享状态传值的问题，它提供一个Provider的容器组件，该组件接收外界通过props将store传给它，并将store放在context中，子组件可以在connect的时候取到store，Connect接收mapStateToProps(该诉高阶组件需要什么样的数据，是一个接收state值作为参数返回所需state对象的函数), mapDispatchToProps（该诉高阶组件怎么样去触发dispatch，是一个函数，接收dispatch作为参数返回包含触发dispatch的函数的对象）作为参数返回一个以当前业务组件作为参数的高阶组件，明白了redux的实现原理，熟悉React，react-redux中间件的原理也就明白了。

17、如何通过原生js实现一个节流函数和防抖函数？

js防抖

特点：

当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间(非常短的时间)；
当事件密集触发时，函数的触发会被频繁的推迟；
只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

应用场景：

Ø输入框中频繁的输入内容，搜索或者提交信息；

Ø频繁的点击按钮，触发某个事件；

Ø监听浏览器滚动事件，完成某些特定操作；

Ø用户缩放浏览器的resize事件；

实现方式

第三方库实现

<input type="text"> <!--html标签-->
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
<script>
const inputEl = document.querySelector("input")
let counter = 0
const inputChange = function(event) {
      console.log(`发送了第${++counter}次网络请求`, this, event)
}
// 防抖处理
inputEl.oninput = _.debounce(inputChange, 2000)//当用户停止输入的时候延时2秒后执行
</script>

手动实现（原理）

基本实现：

function debounce(fn, delay) {
  // 1.定义一个定时器, 保存上一次的定时器
  let timer = null
  // 2.真正执行的函数
  const _debounce = function() {
    // 取消上一次的定时器
    if (timer) clearTimeout(timer)
    // 延迟执行
    timer = setTimeout(() => {
      // 外部传入的真正要执行的函数
      fn()
    }, delay)
  }
  return _debounce
}

this绑定/事件对象

function debounce(fn, delay) {
  // 1.定义一个定时器, 保存上一次的定时器
  let timer = null
  // 2.真正执行的函数
  const _debounce = function(...args) {
    // 取消上一次的定时器
    if (timer) clearTimeout(timer)
    // 延迟执行
    timer = setTimeout(() => {
      // 外部传入的真正要执行的函数
      fn.apply(this, args)
    }, delay)
  }
  return _debounce
}

第一次立即执行

function debounce(fn, delay, immediate = false) {
  // 1.定义一个定时器, 保存上一次的定时器
  let timer = null
  let isInvoke = false
  // 2.真正执行的函数
  const _debounce = function(...args) {
    // 取消上一次的定时器
    if (timer) clearTimeout(timer)
    // 判断是否需要立即执行
    if (immediate && !isInvoke) {
      fn.apply(this, args)
      isInvoke = true
    } else {
      // 延迟执行
      timer = setTimeout(() => {
        // 外部传入的真正要执行的函数
        fn.apply(this, args)
        isInvoke = false
      }, delay)
    }
  }
  return _debounce
}

取消功能

function debounce(fn, delay, immediate = false) {
  // 1.定义一个定时器, 保存上一次的定时器
  let timer = null
  let isInvoke = false
  // 2.真正执行的函数
  const _debounce = function(...args) {
    // 取消上一次的定时器
    if (timer) clearTimeout(timer)
    // 判断是否需要立即执行
    if (immediate && !isInvoke) {
      fn.apply(this, args)
      isInvoke = true
    } else {
      // 延迟执行
      timer = setTimeout(() => {
        // 外部传入的真正要执行的函数
        fn.apply(this, args)
        isInvoke = false
        timer = null
      }, delay)
    }
  }
  // 封装取消功能
  _debounce.cancel = function() {
    if (timer) clearTimeout(timer)
    timer = null
    isInvoke = false
  }
  return _debounce
}

函数返回值

<body>
  <input type="text">
  <script src="./05_debounce-v5-函数返回值.js"></script>
  <script>
    const inputEl = document.querySelector("input")
    let counter = 0
    const inputChange = function(event) {
      console.log(`发送了第${++counter}次网络请求`, this, event)
      // 返回值
      return "aaaaaaaaaaaa"
    }
    // 防抖处理--拿到包装好的事件处理回调函数--回调函数的返回值是Promise
    const debounceChange = debounce(inputChange, 3000, false, (res) => {
      console.log("拿到真正执行函数的返回值:", res)
    })
    const tempCallback = () => {
      debounceChange().then(res => {
        console.log("Promise的返回值结果:", res)
      })
    }
    inputEl.oninput = tempCallback
  </script>
</body>
</html>

js节流

特点：

1.当事件触发时，会执行这个事件的响应函数；

2.如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；

3.不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-95oO1uXD-1672398315332)(D:/专高/专高4/ls/js节流与防抖/images/image-20221106190337808.png)]

应用场景：

Ø 游戏中的一些设计–王者荣耀英雄的普攻；

Ø监听页面的滚动事件；

Ø 鼠标移动事件；

Ø 用户频繁点击按钮操作；

实现方式：

第三方库实现

<input type="text"> <!--html标签-->
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
<script>
const inputEl = document.querySelector("input")
let counter = 0
const inputChange = function(event) {
      console.log(`发送了第${++counter}次网络请求`, this, event)
}
// 节流处理
inputEl.oninput =_.throttle(inputChange, 2000)//当用户不断触发事件按照2秒的频率执行
</script>

手动实现（原理）
基本实现：

function throttle(fn, interval, options) { // 1.记录上一次的开始时间 let lastTime = 0 // 2.事件触发时, 真正执行的函数 const _throttle = function() { // 2.1.获取当前事件触发时的时间 const nowTime = new Date().getTime() // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数 const remainTime = interval - (nowTime - lastTime) if (remainTime <= 0) { // 2.3.真正触发函数 fn() // 2.4.保留上次触发的时间 lastTime = nowTime } } return _throttle }

控制开始执行一次（默认开启，后续可以通过参数来关闭）

function throttle(fn, interval, options = { leading: true, trailing: false }) {
  // 1.记录上一次的开始时间
  const { leading, trailing } = options
  let lastTime = 0
  // 2.事件触发时, 真正执行的函数
  const _throttle = function() {
    // 2.1.获取当前事件触发时的时间
    const nowTime = new Date().getTime()
    if (!lastTime && !leading) lastTime = nowTime
    // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      // 2.3.真正触发函数
      fn()
      // 2.4.保留上次触发的时间
      lastTime = nowTime
    }
  }
  return _throttle
}

最后执行一次

function throttle(fn, interval, options = { leading: true, trailing: false }) {
  // 1.记录上一次的开始时间
  const { leading, trailing } = options
  let lastTime = 0
  let timer = null
  // 2.事件触发时, 真正执行的函数
  const _throttle = function() {
    // 2.1.获取当前事件触发时的时间
    const nowTime = new Date().getTime()
    if (!lastTime && !leading) lastTime = nowTime
    // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }
      // 2.3.真正触发函数
      fn()
      // 2.4.保留上次触发的时间
      lastTime = nowTime
      return
    }
    if (trailing && !timer) {
      timer = setTimeout(() => {
        timer = null
        lastTime = !leading ? 0: new Date().getTime()
        fn()
      }, remainTime)
    }
  }
  return _throttle
}

前端面试题总结（react版）4

15、什么是强缓存和协商缓存？

16、说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

17、如何通过原生js实现一个节流函数和防抖函数？

js防抖

特点：

应用场景：

实现方式

第三方库实现

手动实现（原理）

基本实现：

this绑定/事件对象

第一次立即执行

取消功能

函数返回值

js节流

特点：

应用场景：

实现方式：

第三方库实现

手动实现（原理）

基本实现：

控制开始执行一次（默认开启，后续可以通过参数来关闭）

最后执行一次

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

前端面试题总结（react版）4

15、什么是强缓存和协商缓存？

16、 说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

17、 如何通过原生js实现一个节流函数和防抖函数？

js防抖

特点：

应用场景：

实现方式

第三方库实现

手动实现（原理）

基本实现：

this绑定/事件对象

第一次立即执行

取消功能

函数返回值

js节流

特点：

应用场景：

实现方式：

第三方库实现

手动实现（原理）

基本实现：

控制开始执行一次（默认开启，后续可以通过参数来关闭）

最后执行一次

热门文章

最新文章

相关课程

相关电子书

相关实验场景

16、说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

17、如何通过原生js实现一个节流函数和防抖函数？