前端高频面试题 30 秒答法（2026 版）

_Eleven
5 阅读3分钟

只背考点，不背废话。每题给出「面试官想听的一句话」+「关键词」，助你 30 秒过关。

HTML / CSS

  1. DOCTYPE 作用？
    答：告诉浏览器以标准模式渲染，避免怪异盒模型。关键词：标准模式、quirks。

  2. BFC 是什么？
    答：块级格式化上下文，隔离内部布局，清除浮动、防止 margin 重叠。关键词：overflow:hidden、display:flow-root。

  3. flex:1 缩写？
    答：flex-grow:1 flex-shrink:1 flex-basis:0%，占满剩余空间。关键词：剩余空间。

  4. CSS 垂直居中 3 方案？

    • flex：align-items:center justify-content:center
    • grid：place-items:center
    • absolute：top:50% left:50% translate(-50%,-50%)

  5. rem vs em
    rem 相对于根节点；em 相对于父元素，层叠易失控。

JavaScript

  1. Event Loop 画一遍
    同步 → 微任务（Promise.then）→ 宏任务（setTimeout）→ 渲染。关键词：单线程、非阻塞。

  2. 闭包=函数+词法环境
    用途：私有变量、事件防抖。缺点：内存泄漏。

  3. 原型链终点？
    null。obj.__proto__ === Object.prototype; Object.prototype.__proto__ === null。

  4. Promise.all 与 allSettled 区别？
    all 一挂全挂；allSettled 无论成败都等全部返回。

  5. async/await 本质是？
    语法糖，生成器+Promise 自动执行器。

  6. 深拷贝最快方案？
    structuredClone(obj)，支持循环引用，原生无依赖。

  7. 0.1+0.2!==0.3 原因？
    IEEE 754 双精度浮点误差。解决：先变整数再除。

ES Module / 工程化

  1. CommonJS 与 ESModule 差异？
    CJS 运行时同步、值拷贝；ESM 编译时异步、值引用。Tree-Shaking 仅 ESM 支持。

  2. Webpack 优化 3 板斧？

    • 缓存：持久化 cache
    • 并行：thread-loader / swc
    • 拆包：SplitChunks + 动态 import

  3. Vite 为什么快？
    开发期原生 ESM + esbuild 预构建，无打包；生产用 Rollup。

React

  1. React18 并发特性？
    startTransition 标记非紧急更新；useDeferredValue 延迟渲染低优先级组件。

  2. useEffect vs useLayoutEffect？
    前者异步在渲染后；后者同步在 DOM 变更后、浏览器绘制前，防闪烁。

  3. setState 同步还是异步？
    批量更新（合成事件、生命周期）表现为异步；原生事件、setTimeout 中同步。

  4. React Fiber 双缓存？
    current 树与 workInProgress 树交替，可中断/恢复。

  5. React.memo 与 useMemo 区别？
    前者组件级浅比较；后者值级缓存计算结果。

Vue

  1. Vue3 响应式原理？
    Proxy 劫持整个对象+ Reflect 设置，数组无需重写 7 个方法。

  2. Composition API 优势？
    逻辑组合优于 mixin，无命名冲突、TypeScript 友好。

  3. v-if vs v-show？
    v-if 真移除 DOM；v-show display:none，频繁切换用 v-show。

性能 / 安全

  1. 首屏 3 大指标？
    FP（首次绘制）、FCP（首次内容）、LCP（最大内容）<2.5s 达标。

  2. 防抖 vs 节流？
    防抖：停手后才执行（搜索框）；节流：间隔执行（滚动加载）。

  3. XSS 防御？
    输入转义（<>&"）、CSP 白名单、React 默认转义。

  4. CSRF 防御？
    SameSite Cookie、Token 双重校验、Referer 白名单。

手写代码（高频）

  1. 手写 Promise.all

    function promiseAll(tasks){
  return new Promise((res,rej)=&gt;{
    const ans=[], cnt=0;
    tasks.forEach((p,i)=&gt;{
      Promise.resolve(p).then(v=&gt;{
        ans[i]=v;
        if(++cnt===tasks.length) res(ans);
      }).catch(rej);
    });
  });
}

  2. 手写防抖 debounce

    const debounce=(fn,delay)=&gt;{
  let t;
  return (...args)=&gt;{
    clearTimeout(t);
    t=setTimeout(()=&gt;fn.apply(this,args),delay);
  };
};

  3. 手写 instanceof

    function myInstance(left,right){
  let p=left.__proto__;
  while(p){
    if(p===right.prototype) return true;
    p=p.__proto__;
  }
  return false;
}

> 背完这 30 题，80% 一面稳过。
> 更多场景题（微前端、SSR、WebAssembly）留言告诉我，下篇续上！

#前端面试 #JavaScript #React #Vue #性能优化

avatar
文章
阅读
粉丝