前端面试高频题

// Vue 3 响应式实现核心
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver)
      // 依赖收集
      track(target, key)
      // 深层响应式
      if (typeof result === 'object' && result !== null) {
        return reactive(result)
      }
      return result
    },
    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      // 触发更新
      if (oldValue !== value) {
        trigger(target, key)
      }
      return result
    },
    deleteProperty(target, key) {
      const hadKey = Object.prototype.hasOwnProperty.call(target, key)
      const result = Reflect.deleteProperty(target, key)
      if (hadKey && result) {
        trigger(target, key)
      }
      return result
    }
  })
}

// 依赖收集
let activeEffect = null
const targetMap = new WeakMap()

function track(target, key) {
  if (!activeEffect) return

  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }

  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }

  dep.add(activeEffect)
}

// 触发更新
function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return

  const dep = depsMap.get(key)
  if (dep) {
    dep.forEach(effect => effect())
  }
}

// 副作用函数
function effect(fn) {
  activeEffect = fn
  fn()
  activeEffect = null
}

// 可复用的组合函数
import { ref, onMounted, onUnmounted } from 'vue'

// 鼠标位置追踪
function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })

  return { x, y }
}

// 数据请求
function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)

  async function fetchData() {
    loading.value = true
    error.value = null

    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (e) {
      error.value = e
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    fetchData()
  })

  return { data, error, loading, refetch: fetchData }
}

// 组件中使用
export default {
  setup() {
    const { x, y } = useMouse()
    const { data, error, loading } = useFetch('/api/users')

    return {
      x,
      y,
      data,
      error,
      loading
    }
  }
}

function patchChildren(n1, n2, container) {
  const c1 = n1.children
  const c2 = n2.children

  // 快速路径：文本节点
  if (typeof c2 === 'string') {
    if (c1 !== c2) {
      container.textContent = c2
    }
    return
  }

  // 数组 Diff
  const oldLength = c1.length
  const newLength = c2.length
  const commonLength = Math.min(oldLength, newLength)

  // 1. 从头部开始对比
  let i = 0
  while (i < commonLength && c1[i].key === c2[i].key) {
    patch(c1[i], c2[i], container)
    i++
  }

  // 2. 从尾部开始对比
  let e1 = oldLength - 1
  let e2 = newLength - 1
  while (e1 >= i && e2 >= i && c1[e1].key === c2[e2].key) {
    patch(c1[e1], c2[e2], container)
    e1--
    e2--
  }

  // 3. 只有新增节点
  if (i > e1 && i <= e2) {
    while (i <= e2) {
      mount(c2[i], container)
      i++
    }
  }
  // 4. 只有删除节点
  else if (i > e2 && i <= e1) {
    while (i <= e1) {
      unmount(c1[i])
      i++
    }
  }
  // 5. 乱序情况：最长递增子序列
  else {
    const s1 = i
    const s2 = i

    // 构建新节点的 key -> index 映射
    const keyToNewIndexMap = new Map()
    for (i = s2; i <= e2; i++) {
      keyToNewIndexMap.set(c2[i].key, i)
    }

    // 用于存储新节点在旧节点中的位置
    const newIndexToOldIndexMap = new Array(e2 - s2 + 1).fill(-1)

    let patched = 0
    const toBePatched = e2 - s2 + 1
    let moved = false
    let maxNewIndexSoFar = 0

    // 遍历旧节点
    for (i = s1; i <= e1; i++) {
      const prevChild = c1[i]

      if (patched >= toBePatched) {
        // 所有新节点都已处理，删除剩余旧节点
        unmount(prevChild)
        continue
      }

      const newIndex = keyToNewIndexMap.get(prevChild.key)

      if (newIndex === undefined) {
        // 旧节点在新节点中不存在，删除
        unmount(prevChild)
      } else {
        // 记录位置关系
        newIndexToOldIndexMap[newIndex - s2] = i

        // 判断是否需要移动
        if (newIndex >= maxNewIndexSoFar) {
          maxNewIndexSoFar = newIndex
        } else {
          moved = true
        }

        // 更新节点
        patch(prevChild, c2[newIndex], container)
        patched++
      }
    }

    // 计算最长递增子序列
    const increasingNewIndexSequence = moved
      ? getSequence(newIndexToOldIndexMap)
      : []

    let j = increasingNewIndexSequence.length - 1

    // 倒序遍历，插入和移动节点
    for (i = toBePatched - 1; i >= 0; i--) {
      const nextIndex = s2 + i
      const nextChild = c2[nextIndex]
      const anchor = nextIndex + 1 < newLength ? c2[nextIndex + 1].el : null

      if (newIndexToOldIndexMap[i] === -1) {
        // 新增节点
        mount(nextChild, container, anchor)
      } else if (moved) {
        // 需要移动
        if (j < 0 || i !== increasingNewIndexSequence[j]) {
          move(nextChild, container, anchor)
        } else {
          j--
        }
      }
    }
  }
}

// 最长递增子序列算法
function getSequence(arr) {
  const len = arr.length
  const result = [0]
  const p = arr.slice()

  let i, j, u, v, c

  for (i = 0; i < len; i++) {
    const arrI = arr[i]
    if (arrI !== -1) {
      j = result[result.length - 1]
      if (arr[j] < arrI) {
        p[i] = j
        result.push(i)
        continue
      }

      u = 0
      v = result.length - 1

      while (u < v) {
        c = ((u + v) / 2) | 0
        if (arr[result[c]] < arrI) {
          u = c + 1
        } else {
          v = c
        }
      }

      if (arrI < arr[result[u]]) {
        if (u > 0) {
          p[i] = result[u - 1]
        }
        result[u] = i
      }
    }
  }

  u = result.length
  v = result[u - 1]

  while (u-- > 0) {
    result[u] = v
    v = p[v]
  }

  return result
}

// Scheduler 核心实现
const ImmediatePriority = 1
const UserBlockingPriority = 2
const NormalPriority = 3
const LowPriority = 4
const IdlePriority = 5

// 任务队列
let taskQueue = []
let timerQueue = []

// 当前任务
let currentTask = null
let isHostCallbackScheduled = false
let isPerformingWork = false

// 调度任务
function scheduleCallback(priorityLevel, callback, options) {
  const currentTime = getCurrentTime()

  let startTime
  if (options && typeof options.delay === 'number') {
    startTime = currentTime + options.delay
  } else {
    startTime = currentTime
  }

  let timeout
  switch (priorityLevel) {
    case ImmediatePriority:
      timeout = -1
      break
    case UserBlockingPriority:
      timeout = 250
      break
    case IdlePriority:
      timeout = 1073741823
      break
    case LowPriority:
      timeout = 10000
      break
    case NormalPriority:
    default:
      timeout = 5000
      break
  }

  const expirationTime = startTime + timeout

  const newTask = {
    id: taskIdCounter++,
    callback,
    priorityLevel,
    startTime,
    expirationTime,
    sortIndex: -1
  }

  if (startTime > currentTime) {
    // 延迟任务
    newTask.sortIndex = startTime
    push(timerQueue, newTask)

    if (!isHostCallbackScheduled && peek(taskQueue) === null) {
      requestHostTimeout(handleTimeout, startTime - currentTime)
    }
  } else {
    // 立即执行任务
    newTask.sortIndex = expirationTime
    push(taskQueue, newTask)

    if (!isHostCallbackScheduled && !isPerformingWork) {
      isHostCallbackScheduled = true
      requestHostCallback(flushWork)
    }
  }

  return newTask
}

// 执行任务
function flushWork(hasTimeRemaining, initialTime) {
  isHostCallbackScheduled = false
  isPerformingWork = true

  try {
    return workLoop(hasTimeRemaining, initialTime)
  } finally {
    currentTask = null
    isPerformingWork = false
  }
}

// 工作循环
function workLoop(hasTimeRemaining, initialTime) {
  let currentTime = initialTime

  // 检查延迟任务
  advanceTimers(currentTime)

  currentTask = peek(taskQueue)

  while (currentTask !== null) {
    if (
      currentTask.expirationTime > currentTime &&
      (!hasTimeRemaining || shouldYieldToHost())
    ) {
      // 时间片用完，让出控制权
      break
    }

    const callback = currentTask.callback
    if (typeof callback === 'function') {
      currentTask.callback = null
      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime

      const continuationCallback = callback(didUserCallbackTimeout)
      currentTime = getCurrentTime()

      if (typeof continuationCallback === 'function') {
        // 任务未完成，继续执行
        currentTask.callback = continuationCallback
      } else {
        // 任务完成，移除
        if (currentTask === peek(taskQueue)) {
          pop(taskQueue)
        }
      }

      advanceTimers(currentTime)
    } else {
      pop(taskQueue)
    }

    currentTask = peek(taskQueue)
  }

  // 判断是否还有任务
  if (currentTask !== null) {
    return true
  } else {
    const firstTimer = peek(timerQueue)
    if (firstTimer !== null) {
      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime)
    }
    return false
  }
}

// 使用 MessageChannel 实现调度
const channel = new MessageChannel()
const port = channel.port2

channel.port1.onmessage = () => {
  if (scheduledHostCallback !== null) {
    const currentTime = getCurrentTime()
    const hasTimeRemaining = frameDeadline > currentTime

    try {
      const hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime)

      if (!hasMoreWork) {
        scheduledHostCallback = null
      } else {
        // 还有工作，继续调度
        port.postMessage(null)
      }
    } catch (error) {
      // 发生错误，重新调度
      port.postMessage(null)
      throw error
    }
  }
}

function requestHostCallback(callback) {
  scheduledHostCallback = callback
  port.postMessage(null)
}

// 判断是否应该让出控制权
function shouldYieldToHost() {
  const currentTime = getCurrentTime()
  return currentTime >= frameDeadline
}

function FiberNode(tag, pendingProps, key, mode) {
  // 实例属性
  this.tag = tag
  this.key = key
  this.elementType = null
  this.type = null
  this.stateNode = null

  // Fiber 链表结构
  this.return = null      // 父节点
  this.child = null       // 第一个子节点
  this.sibling = null     // 下一个兄弟节点
  this.index = 0

  this.ref = null

  // 工作单元属性
  this.pendingProps = pendingProps
  this.memoizedProps = null
  this.updateQueue = null
  this.memoizedState = null
  this.dependencies = null

  this.mode = mode

  // Effects
  this.flags = NoFlags
  this.subtreeFlags = NoFlags
  this.deletions = null

  // 优先级
  this.lanes = NoLanes
  this.childLanes = NoLanes

  // 双缓存
  this.alternate = null
}

// 工作循环
function workLoopConcurrent() {
  // 当有工作且未超时时继续执行
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress)
  }
}

function performUnitOfWork(unitOfWork) {
  const current = unitOfWork.alternate

  // 开始工作
  let next = beginWork(current, unitOfWork, renderLanes)

  unitOfWork.memoizedProps = unitOfWork.pendingProps

  if (next === null) {
    // 没有子节点，完成工作
    completeUnitOfWork(unitOfWork)
  } else {
    // 继续处理子节点
    workInProgress = next
  }
}

// 开始阶段
function beginWork(current, workInProgress, renderLanes) {
  if (current !== null) {
    const oldProps = current.memoizedProps
    const newProps = workInProgress.pendingProps

    if (
      oldProps !== newProps ||
      hasLegacyContextChanged()
    ) {
      didReceiveUpdate = true
    } else {
      // 可以复用
      const hasScheduledUpdateOrContext = checkScheduledUpdateOrContext(
        current,
        renderLanes
      )

      if (!hasScheduledUpdateOrContext) {
        didReceiveUpdate = false
        return attemptEarlyBailout(current, workInProgress, renderLanes)
      }

      didReceiveUpdate = false
    }
  } else {
    didReceiveUpdate = false
  }

  // 清除优先级
  workInProgress.lanes = NoLanes

  // 根据不同类型处理
  switch (workInProgress.tag) {
    case FunctionComponent: {
      const Component = workInProgress.type
      const unresolvedProps = workInProgress.pendingProps
      return updateFunctionComponent(
        current,
        workInProgress,
        Component,
        unresolvedProps,
        renderLanes
      )
    }
    case ClassComponent: {
      const Component = workInProgress.type
      const unresolvedProps = workInProgress.pendingProps
      return updateClassComponent(
        current,
        workInProgress,
        Component,
        unresolvedProps,
        renderLanes
      )
    }
    case HostRoot:
      return updateHostRoot(current, workInProgress, renderLanes)
    case HostComponent:
      return updateHostComponent(current, workInProgress, renderLanes)
    // ... 其他类型
  }
}

// 完成阶段
function completeUnitOfWork(unitOfWork) {
  let completedWork = unitOfWork

  do {
    const current = completedWork.alternate
    const returnFiber = completedWork.return

    // 完成工作
    const next = completeWork(current, completedWork, renderLanes)

    if (next !== null) {
      // 发现新工作
      workInProgress = next
      return
    }

    // 收集副作用
    if (returnFiber !== null) {
      if (returnFiber.firstEffect === null) {
        returnFiber.firstEffect = completedWork.firstEffect
      }

      if (completedWork.lastEffect !== null) {
        if (returnFiber.lastEffect !== null) {
          returnFiber.lastEffect.nextEffect = completedWork.firstEffect
        }
        returnFiber.lastEffect = completedWork.lastEffect
      }

      const flags = completedWork.flags

      if (flags > PerformedWork) {
        if (returnFiber.lastEffect !== null) {
          returnFiber.lastEffect.nextEffect = completedWork
        } else {
          returnFiber.firstEffect = completedWork
        }
        returnFiber.lastEffect = completedWork
      }
    }

    const siblingFiber = completedWork.sibling

    if (siblingFiber !== null) {
      // 处理兄弟节点
      workInProgress = siblingFiber
      return
    }

    // 返回父节点
    completedWork = returnFiber
    workInProgress = completedWork
  } while (completedWork !== null)
}

// Hook 数据结构
const hook = {
  memoizedState: null,  // 当前状态
  baseState: null,      // 基础状态
  baseQueue: null,      // 基础更新队列
  queue: null,          // 更新队列
  next: null            // 下一个 Hook
}

// 当前正在渲染的 Fiber
let currentlyRenderingFiber = null
// 当前工作中的 Hook
let workInProgressHook = null
// 当前 Hook 对应的旧 Hook
let currentHook = null

// useState 实现
function useState(initialState) {
  return useReducer(
    basicStateReducer,
    initialState
  )
}

function basicStateReducer(state, action) {
  return typeof action === 'function' ? action(state) : action
}

function useReducer(reducer, initialArg, init) {
  const hook = mountWorkInProgressHook()

  let initialState
  if (init !== undefined) {
    initialState = init(initialArg)
  } else {
    initialState = initialArg
  }

  hook.memoizedState = hook.baseState = initialState

  const queue = {
    pending: null,
    dispatch: null,
    lastRenderedReducer: reducer,
    lastRenderedState: initialState
  }

  hook.queue = queue

  const dispatch = (queue.dispatch = dispatchAction.bind(
    null,
    currentlyRenderingFiber,
    queue
  ))

  return [hook.memoizedState, dispatch]
}

// 更新状态
function dispatchAction(fiber, queue, action) {
  const update = {
    action,
    next: null
  }

  // 构建环形链表
  const pending = queue.pending
  if (pending === null) {
    update.next = update
  } else {
    update.next = pending.next
    pending.next = update
  }
  queue.pending = update

  // 调度更新
  const alternate = fiber.alternate

  if (
    fiber === currentlyRenderingFiber ||
    (alternate !== null && alternate === currentlyRenderingFiber)
  ) {
    // 渲染期间的更新
    didScheduleRenderPhaseUpdateDuringThisPass = true
  } else {
    // 立即计算新状态（性能优化）
    if (
      fiber.lanes === NoLanes &&
      (alternate === null || alternate.lanes === NoLanes)
    ) {
      const lastRenderedReducer = queue.lastRenderedReducer
      if (lastRenderedReducer !== null) {
        try {
          const currentState = queue.lastRenderedState
          const eagerState = lastRenderedReducer(currentState, action)

          if (Object.is(eagerState, currentState)) {
            // 状态未变化，跳过更新
            return
          }
        } catch (error) {
          // 忽略错误
        }
      }
    }

    scheduleUpdateOnFiber(fiber, lane, eventTime)
  }
}

// useEffect 实现
function useEffect(create, deps) {
  return mountEffectImpl(
    PassiveEffect | PassiveStaticEffect,
    HookPassive,
    create,
    deps
  )
}

function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
  const hook = mountWorkInProgressHook()
  const nextDeps = deps === undefined ? null : deps

  currentlyRenderingFiber.flags |= fiberFlags

  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,
    create,
    undefined,
    nextDeps
  )
}

function pushEffect(tag, create, destroy, deps) {
  const effect = {
    tag,
    create,
    destroy,
    deps,
    next: null
  }

  let componentUpdateQueue = currentlyRenderingFiber.updateQueue

  if (componentUpdateQueue === null) {
    componentUpdateQueue = createFunctionComponentUpdateQueue()
    currentlyRenderingFiber.updateQueue = componentUpdateQueue
    componentUpdateQueue.lastEffect = effect.next = effect
  } else {
    const lastEffect = componentUpdateQueue.lastEffect
    if (lastEffect === null) {
      componentUpdateQueue.lastEffect = effect.next = effect
    } else {
      const firstEffect = lastEffect.next
      lastEffect.next = effect
      effect.next = firstEffect
      componentUpdateQueue.lastEffect = effect
    }
  }

  return effect
}

// 更新时的 useEffect
function updateEffect(create, deps) {
  return updateEffectImpl(
    PassiveEffect,
    HookPassive,
    create,
    deps
  )
}

function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
  const hook = updateWorkInProgressHook()
  const nextDeps = deps === undefined ? null : deps
  let destroy = undefined

  if (currentHook !== null) {
    const prevEffect = currentHook.memoizedState
    destroy = prevEffect.destroy

    if (nextDeps !== null) {
      const prevDeps = prevEffect.deps
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        // 依赖未变化，不执行
        pushEffect(hookFlags, create, destroy, nextDeps)
        return
      }
    }
  }

  currentlyRenderingFiber.flags |= fiberFlags

  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,
    create,
    destroy,
    nextDeps
  )
}

// 执行 Effects
function commitHookEffectListMount(tag, finishedWork) {
  const updateQueue = finishedWork.updateQueue
  const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null

  if (lastEffect !== null) {
    const firstEffect = lastEffect.next
    let effect = firstEffect

    do {
      if ((effect.tag & tag) === tag) {
        const create = effect.create
        effect.destroy = create()
      }
      effect = effect.next
    } while (effect !== firstEffect)
  }
}

function commitHookEffectListUnmount(tag, finishedWork) {
  const updateQueue = finishedWork.updateQueue
  const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null

  if (lastEffect !== null) {
    const firstEffect = lastEffect.next
    let effect = firstEffect

    do {
      if ((effect.tag & tag) === tag) {
        const destroy = effect.destroy
        effect.destroy = undefined

        if (destroy !== undefined) {
          destroy()
        }
      }
      effect = effect.next
    } while (effect !== firstEffect)
  }
}

// 1. 减少重排（Reflow）
// 不好的做法
const el = document.getElementById('element')
el.style.width = '100px'
el.style.height = '100px'
el.style.margin = '10px'
// 触发 3 次重排

// 好的做法
el.style.cssText = 'width: 100px; height: 100px; margin: 10px;'
// 只触发 1 次重排

// 使用 class
el.className = 'new-class'

// 2. 批量 DOM 操作
// 不好的做法
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li')
  li.textContent = i
  document.getElementById('list').appendChild(li)
}
// 触发 1000 次重排

// 好的做法：使用 DocumentFragment
const fragment = document.createDocumentFragment()
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li')
  li.textContent = i
  fragment.appendChild(li)
}
document.getElementById('list').appendChild(fragment)
// 只触发 1 次重排

// 3. 读写分离
// 不好的做法
const width1 = div1.clientWidth  // 读
div1.style.width = width1 + 10 + 'px'  // 写
const width2 = div2.clientWidth  // 读（触发强制重排）
div2.style.width = width2 + 10 + 'px'  // 写

// 好的做法：先读后写
const width1 = div1.clientWidth
const width2 = div2.clientWidth
div1.style.width = width1 + 10 + 'px'
div2.style.width = width2 + 10 + 'px'

// 4. 使用 transform 代替 top/left
// 不好的做法（触发重排）
element.style.left = element.offsetLeft + 10 + 'px'

// 好的做法（只触发合成）
element.style.transform = 'translateX(10px)'

// 5. 使用 will-change 提示浏览器
.moving-element {
  will-change: transform;
}

// 6. 使用 requestAnimationFrame
function animate() {
  element.style.transform = `translateX(${x}px)`
  x += 1

  if (x < 100) {
    requestAnimationFrame(animate)
  }
}
requestAnimationFrame(animate)

// 事件循环执行顺序
// 1. 执行同步代码
// 2. 执行微任务队列
// 3. 执行一个宏任务
// 4. 执行微任务队列
// 5. 渲染（如果需要）
// 6. 回到步骤 3

console.log('1')

setTimeout(() => {
  console.log('2')
  Promise.resolve().then(() => {
    console.log('3')
  })
}, 0)

new Promise((resolve) => {
  console.log('4')
  resolve()
}).then(() => {
  console.log('5')
}).then(() => {
  console.log('6')
})

console.log('7')

// 输出顺序：1, 4, 7, 5, 6, 2, 3

// 微任务：
// - Promise.then/catch/finally
// - MutationObserver
// - queueMicrotask
// - process.nextTick (Node.js)

// 宏任务：
// - setTimeout
// - setInterval
// - setImmediate (Node.js)
// - I/O
// - UI rendering
// - requestAnimationFrame

// 复杂示例
async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}

async function async2() {
  console.log('async2')
}

console.log('script start')

setTimeout(() => {
  console.log('setTimeout')
}, 0)

async1()

new Promise((resolve) => {
  console.log('promise1')
  resolve()
}).then(() => {
  console.log('promise2')
})

console.log('script end')

// 输出顺序：
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout

// Node.js 事件循环阶段
// 1. timers: setTimeout/setInterval
// 2. pending callbacks: 系统级回调
// 3. idle, prepare: 内部使用
// 4. poll: I/O 回调
// 5. check: setImmediate
// 6. close callbacks: 关闭回调

// process.nextTick 优先级高于微任务

console.log('start')

setTimeout(() => {
  console.log('setTimeout')
}, 0)

setImmediate(() => {
  console.log('setImmediate')
})

process.nextTick(() => {
  console.log('nextTick')
})

Promise.resolve().then(() => {
  console.log('promise')
})

console.log('end')

// 输出顺序：
// start
// end
// nextTick
// promise
// setTimeout
// setImmediate

// 注意：setTimeout 和 setImmediate 的顺序可能变化
// 在 I/O 回调中，setImmediate 总是先于 setTimeout

// 1. 强缓存
// Cache-Control (HTTP/1.1，优先级高)
Cache-Control: max-age=3600  // 缓存 1 小时
Cache-Control: no-cache      // 每次使用前验证
Cache-Control: no-store      // 不缓存
Cache-Control: public        // 可被任何缓存存储
Cache-Control: private       // 只能被浏览器缓存

// Expires (HTTP/1.0)
Expires: Wed, 21 Oct 2025 07:28:00 GMT

// 2. 协商缓存
// Last-Modified / If-Modified-Since
// 服务器响应
Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT
// 客户端请求
If-Modified-Since: Wed, 21 Oct 2024 07:28:00 GMT

// ETag / If-None-Match (优先级高)
// 服务器响应
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
// 客户端请求
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

// 3. 缓存决策树实现
class CacheStrategy {
  constructor() {
    this.cache = new Map()
  }

  // 设置缓存
  set(key, value, options = {}) {
    const {
      maxAge = 3600,        // 默认 1 小时
      staleWhileRevalidate = 0,
      mustRevalidate = false
    } = options

    const item = {
      value,
      timestamp: Date.now(),
      maxAge,
      staleWhileRevalidate,
      mustRevalidate,
      etag: this.generateETag(value)
    }

    this.cache.set(key, item)
  }

  // 获取缓存
  async get(key, fetchFn) {
    const item = this.cache.get(key)

    if (!item) {
      // 缓存不存在，获取新数据
      const value = await fetchFn()
      this.set(key, value)
      return { value, fromCache: false }
    }

    const age = Date.now() - item.timestamp

    // 强缓存未过期
    if (age < item.maxAge * 1000) {
      return { value: item.value, fromCache: true, fresh: true }
    }

    // 在 staleWhileRevalidate 期间
    if (age < (item.maxAge + item.staleWhileRevalidate) * 1000) {
      // 返回旧数据，后台刷新
      this.revalidateInBackground(key, fetchFn)
      return { value: item.value, fromCache: true, fresh: false }
    }

    // 缓存过期，需要重新验证
    if (item.mustRevalidate) {
      const isModified = await this.checkModified(key, item.etag)

      if (!isModified) {
        // 304 Not Modified
        item.timestamp = Date.now()
        return { value: item.value, fromCache: true, revalidated: true }
      }
    }

    // 获取新数据
    const value = await fetchFn()
    this.set(key, value)
    return { value, fromCache: false }
  }

  // 生成 ETag
  generateETag(value) {
    const str = JSON.stringify(value)
    let hash = 0
    for (let i = 0; i < str.length; i++) {
      const char = str.charCodeAt(i)
      hash = ((hash << 5) - hash) + char
      hash = hash & hash
    }
    return hash.toString(36)
  }

  // 后台重新验证
  async revalidateInBackground(key, fetchFn) {
    try {
      const value = await fetchFn()
      this.set(key, value)
    } catch (error) {
      console.error('Background revalidation failed:', error)
    }
  }

  // 检查是否修改
  async checkModified(key, etag) {
    // 实际应该向服务器发送请求
    // 这里简化处理
    return Math.random() > 0.5
  }
}

// 使用示例
const cache = new CacheStrategy()

async function fetchUserData(id) {
  return cache.get(`user:${id}`, async () => {
    const response = await fetch(`/api/users/${id}`)
    return response.json()
  })
}

// 4. Service Worker 缓存策略
// Cache First (缓存优先)
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request)
    })
  )
})

// Network First (网络优先)
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        const responseClone = response.clone()
        caches.open('v1').then(cache => {
          cache.put(event.request, responseClone)
        })
        return response
      })
      .catch(() => {
        return caches.match(event.request)
      })
  )
})

// Stale While Revalidate (返回缓存，后台更新)
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open('v1').then(cache => {
      return cache.match(event.request).then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          cache.put(event.request, networkResponse.clone())
          return networkResponse
        })

        return response || fetchPromise
      })
    })
  )
})