2026 前端面试八股文【超全完整版】

2026 前端面试八股文【超全完整版】

覆盖：JS 核心 / ES6+ / 浏览器原理 / 网络HTTP / CSS / Vue2+Vue3 / Webpack/Vite / 工程化 / 手写代码 / 性能优化 / 安全 / 面试常问场景题
全程干货，无废话，直接背就能面试，初中高级全覆盖。

一、JavaScript 核心八股

1. 变量类型 & 区别

基本数据类型（7种）：
String、Number、Boolean、Null、Undefined、Symbol、BigInt
引用类型：
Object、Array、Function、RegExp、Date

区别：

  • 基本类型：值传递，存在栈内存
  • 引用类型：地址引用，栈存地址，堆存数据

2. null 和 undefined 区别

  • undefined：变量声明未赋值、函数无返回、对象不存在属性
  • null：手动置空，代表空对象
  • 共同点：都表示“无”，==相等，===不等

3. 变量提升、var / let / const 区别

  1. var：函数作用域、变量提升、可重复声明、可修改、挂载window
  2. let：块级作用域、无变量提升、暂时性死区、不可重复声明
  3. const：同let，声明必须赋值、不可修改引用地址

暂时性死区TDZ：
块级作用域内，let/const 声明之前不能访问，否则报错。

4. 作用域、作用域链、闭包

  • 作用域：全局作用域、函数作用域、块级作用域{}
  • 作用域链：当前作用域 → 逐层向上查找变量，直到全局
  • 闭包：内层函数引用外层函数变量，外层执行后变量不销毁
  • 闭包用途：私有变量、缓存、防抖节流、模块化
  • 闭包缺点：容易内存泄漏

5. this 指向 5 种场景

  1. 普通函数调用：this → window（严格模式undefined）
  2. 对象方法调用：this → 调用者对象
  3. 构造函数new：this → 实例对象
  4. 箭头函数：无自身this，继承外层作用域this
  5. call / apply / bind：手动绑定this

6. call / apply / bind 区别

  • 作用：改变函数this指向
  • call：参数逐个传，立即执行
  • apply：参数数组传，立即执行
  • bind：返回新函数，不立即执行，可延迟调用

7. 原型 & 原型链

  • 构造函数：Person() 自带 prototype 原型对象
  • 实例：new Person() 自带 __proto__ 指向构造函数prototype
  • 原型链：实例.proto → 构造原型 → Object.prototype → null
  • instanceof 原理：沿着原型链查找是否为该构造函数实例

8. 箭头函数 vs 普通函数

  1. 无自己this，继承外层this
  2. 不能作为构造函数，不能new
  3. 无arguments，用剩余参数...args
  4. 无prototype原型
  5. 不支持call/apply/bind改变this

9. 数组常用方法

改变原数组：
push pop shift unshift splice sort reverse

不改变原数组：
map filter reduce forEach find findIndex every some slice concat join

10. 遍历方式区别

  • forEach：不能break、return无效
  • for...in：遍历可枚举属性，包括原型属性
  • for...of：遍历迭代器，支持break/continue，推荐遍历数组
  • map：返回新数组，适合映射加工

11. 深浅拷贝

浅拷贝：只拷贝第一层，引用类型共享地址
方式：Object.assign()、扩展运算符...、slice、concat

深拷贝：完全独立，互不影响

  1. 简易：JSON.parse(JSON.stringify())
    缺点：丢失函数、正则、Symbol、循环引用、undefined
  2. 手写深拷贝：递归遍历，判断类型处理数组、对象、正则、日期

12. 异步发展历程

回调函数 → Promise → Generator → async/await

13. Promise 详解

三种状态：
pending（进行中）、fulfilled（成功）、rejected（失败）
特点：状态一旦改变不可逆

常用API：
then、catch、finally、all、race、allSettled、resolve、reject

  • Promise.all：全部成功才成功，一个失败直接失败
  • Promise.race：谁先完成就返回谁
  • Promise.allSettled：全部执行完，不管成功失败

14. 宏任务 & 微任务 & 事件循环

微任务（优先级高）：
Promise.then/catch、async/await、queueMicrotask、MutationObserver

宏任务：
script整体代码、setTimeout、setInterval、AJAX、DOM事件、IO操作

执行顺序：
同步代码 → 清空所有微任务 → 执行一个宏任务 → 再清空微任务 循环往复

15. async / await 原理

  • async 函数默认返回 Promise
  • await 暂停执行，等待 Promise 完成
  • 本质：Generator + Promise 语法糖
  • 错误捕获：try/catch

16. 防抖 & 节流

防抖：频繁触发，停止触发后 n 秒才执行一次
适用：搜索框输入、窗口resize、输入框联想

节流：固定时间内只执行一次
适用：滚动监听、鼠标移动、高频点击、拖拽

17. 垃圾回收机制

浏览器GC方式：

  1. 引用计数：引用为0就回收，缺点：循环引用无法回收
  2. 标记清除：从根对象标记可达对象，不可达则回收（主流）

内存泄漏常见场景：
全局变量过多、闭包未释放、定时器未清除、事件监听未解绑、DOM引用未清空

二、ES6+ 高频必问

  1. 解构赋值：数组解构、对象解构、默认值、剩余解构
  2. 模板字符串：`` 支持换行、变量插值
  3. Set / Map
    • Set：数组去重，元素唯一
    • Map：键可以是引用类型，遍历更友好
  4. class 类：constructor、继承extends、super静态属性static
  5. 模块化：import / export default / export 命名导出
  6. 剩余参数 ...、默认参数
  7. 迭代器 Iterator、生成器 Generator
  8. 可选链 ?.、空值合并 ??
  9. Promise、async/await
  10. 数组扩展：flat 扁平化、flatMap

三、浏览器原理 必背八股

1. 输入URL到页面展示全过程

  1. DNS 域名解析（域名→IP）
  2. TCP 三次握手建立连接
  3. HTTPS TLS 安全握手
  4. 发送 HTTP 请求
  5. 服务器返回响应报文
  6. 浏览器解析HTML → 生成DOM树
  7. 解析CSS → 生成CSSOM树
  8. 合成渲染树 Render Tree
  9. 布局 Layout（回流）
  10. 绘制 Paint（重绘）
  11. 分层合成 Composite

2. 回流（重排）& 重绘

  • 回流：元素布局、宽高、位置、隐藏变化，重新计算布局，开销大
  • 重绘：仅颜色、背景、文字样式变化，不改变布局

触发回流场景：
修改宽高、margin、padding、display、获取offset/scroll/client系列属性

优化：

  1. 批量DOM操作，先离线修改再插入页面
  2. 用 transform / opacity 做动画，只走合成层，不回流不重绘
  3. 避免频繁读取布局属性，缓存值

3. 浏览器缓存机制

强缓存（不发请求，直接用本地）

  • Expires：绝对时间，受本地时间影响
  • Cache-Control: max-age=xxx 相对时间，优先级更高

协商缓存（发请求，服务端比对）

  1. Last-Modified / If-Modified-Since （文件修改时间）
  2. ETag / If-None-Match （文件唯一标识，优先级更高）
  3. 命中返回 304，使用本地缓存

4. 跨域原理 & 解决方案

同源策略：协议、域名、端口 有一个不同即为跨域

跨域方案：

  1. CORS 后端配置响应头（主流）
  2. JSONP 仅支持GET，兼容性好
  3. Nginx 反向代理
  4. 本地开发 devServer 代理
  5. postMessage 跨页面通信
  6. WebSocket 天然不受跨域限制
  7. 后端接口中转

5. 本地存储区别

特性 localStorage sessionStorage cookie indexedDB
容量 约5M 约5M 4K 超大
有效期 永久 标签关闭失效 可设置过期 永久
自动带请求 否 否 是 否
操作端 前端 前端 前后端 前端
适用 普通本地存储 临时会话 登录态、token 大量离线数据

6. 浏览器渲染机制

浏览器渲染流水线：构建DOM → 构建CSSOM → 渲染树 → 布局 → 绘制 → 合成

7. 页面加载白屏、首屏优化关键点

后面性能优化板块详细讲

四、HTTP / 网络八股

1. HTTP1.0 / 1.1 / 2.0 / 3.0 区别

  • HTTP1.0：短连接，每次请求新建TCP
  • HTTP1.1：长连接、管道化、缓存、虚拟主机
  • HTTP2.0：二进制帧、多路复用、头部压缩、服务器推送
  • HTTP3.0：基于QUIC、UDP、握手更快、弱网更稳

2. HTTP 请求方法

常用：GET POST PUT DELETE HEAD OPTIONS

  • GET：查询，参数放URL，不安全，有缓存
  • POST：提交，参数放请求体，无默认缓存
  • PUT：全量更新
  • DELETE：删除
  • OPTIONS：跨域预检请求

3. HTTP 状态码

1xx 信息、2xx成功、3xx重定向、4xx客户端错误、5xx服务端错误

  • 200 成功
  • 204 无内容
  • 301 永久重定向
  • 302 临时重定向
  • 304 协商缓存命中
  • 400 参数错误
  • 401 未授权
  • 403 禁止访问
  • 404 资源不存在
  • 500 服务器内部错误
  • 502 网关错误
  • 503 服务不可用

4. HTTPS 原理

HTTP + TLS/SSL 加密
流程：
对称加密 + 非对称加密 + 数字证书

  1. 握手协商加密算法
  2. 服务端下发证书
  3. 客户端验证证书
  4. 协商会话密钥
  5. 后续通信对称加密传输

5. 常见请求头 / 响应头

请求头：
Host、User-Agent、Referer、Origin、Cookie、Content-Type、Authorization

响应头：
Cache-Control、Set-Cookie、Access-Control-*、ETag、Last-Modified

6. 预检请求 OPTIONS

跨域复杂请求（带cookie、自定义请求头、非简单content-type）
浏览器先发OPTIONS预检，确认允许跨域再发真实请求。

五、CSS 面试八股

  1. 盒子模型

    • 标准盒：content + padding + border + margin
    • IE怪异盒：宽高包含 padding+border
    • 控制：box-sizing: content-box / border-box

  2. BFC 块级格式化上下文
    触发条件：
    浮动、绝对定位、overflow非visible、display:inline-block/table等
    作用：
    清除浮动、解决margin塌陷、阻止元素被浮动覆盖

  3. 垂直居中多种方式
    flex、grid、绝对定位+transform、table-cell、line-height

  4. 三栏布局
    圣杯布局、双飞翼布局、Flex布局、Grid布局

  5. 浮动优缺点 & 清除浮动
    清除浮动：
    clear:both、伪元素清除、父级BFC

  6. Flex 常用属性
    主轴：justify-content
    侧轴：align-items
    换行：flex-wrap
    弹性占比：flex:1

  7. 移动端适配方案
    rem、vw/vh、媒体查询、flex布局、viewport适配

  8. 动画
    transition 过渡、animation 关键帧动画、transform 变形（平移/缩放/旋转/倾斜）

  9. CSS 权重
    !important > 行内样式 > id > 类/伪类 > 标签 > 通配符

六、Vue2 高频面试八股

1. Vue2 双向绑定原理

核心：Object.defineProperty 数据劫持 + 发布订阅模式
流程：

  1. 递归遍历data所有属性，设置getter/setter
  2. 模板编译收集依赖Watcher
  3. 数据变化触发setter，通知Watcher更新视图

缺点：

  • 无法监听对象新增/删除属性
  • 无法监听数组下标修改、length修改

2. Vue 数组监听方案

重写数组7个变异方法：
push pop shift unshift splice sort reverse
通过包裹方法，触发视图更新

3. Vue 生命周期

8个：
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed

常用钩子：

  • created：可请求接口、拿不到DOM
  • mounted：可操作DOM、初始化插件、请求接口
  • beforeDestroy：清除定时器、解绑事件、销毁定时器

4. 组件通信 8 种方式

  1. 父子：props / $emit
  2. 父获子实例：$refs / $children
  3. 子获父实例：$parent
  4. 祖孙跨级：provide / inject
  5. 全局事件总线：EventBus
  6. 全局状态：Vuex
  7. 属性透传：$attrs / $listeners
  8. 插槽：默认插槽、具名插槽、作用域插槽

5. v-if 和 v-for 优先级

Vue2 中 v-for 优先级 > v-if
问题：先循环再判断，浪费性能
优化：外层套 <template> 写v-if，减少循环次数

6. key 的作用 & 为什么不能用索引

  • key 是虚拟DOM Diff 算法唯一标识
  • 无key会就地复用，渲染错乱
  • 用索引做key：列表增删、排序时索引变化，导致DOM复用错误、表单错乱
  • 最优：用后端返回唯一id

7. 虚拟DOM & Diff 算法

虚拟DOM：用JS对象描述真实DOM结构，减少频繁DOM操作

Diff 策略：

  • 同层比较，不跨层级对比
  • 双端头尾对比
  • key标识节点
  • 最长递增子序列优化移动逻辑

8. computed 和 watch 区别

computed：

  • 有缓存，依赖不变不重新计算
  • 适合派生数据、简单计算
  • 同步执行

watch：

  • 无缓存，数据变就执行
  • 适合异步请求、复杂业务逻辑、多数据监听
  • 可深度监听 deep、立即执行 immediate

9. nextTick 原理

Vue 更新视图是异步批量更新
修改数据后 DOM 还没更新，立即拿不到最新DOM

$nextTick：在下一次DOM更新完毕后执行回调
原理：优先微任务(Promise)，降级宏任务(setTimeout)

10. Vuex 五大核心

State、Getters、Mutations、Actions、Modules

  • State：全局状态
  • Getters：计算属性，派生状态
  • Mutations：同步修改状态，唯一修改入口
  • Actions：处理异步逻辑，提交mutation
  • Modules：模块化拆分，避免命名冲突

11. Vue 路由

  • 路由模式：hash（#）、history（需后端配置）
  • 路由守卫：全局前置/后置、路由独享、组件内守卫
  • 懒加载：()=>import('@/views/xxx') 减小首屏体积
  • 嵌套路由、路由传参 params / query

12. Vue 性能优化点

后面统一整理大板块

七、Vue3 高频面试八股

  1. 双向绑定改用 Proxy
    优势：监听对象新增/删除、数组下标、length，支持Map/Set

  2. OptionsAPI vs CompositionAPI

    • 选项式：选项分散，大型组件难维护
    • 组合式：按业务逻辑聚合、可抽离复用、TS友好

  3. setup 语法糖、ref / reactive

    • ref：基本类型、简单对象
    • reactive：复杂对象、数组
    • toRefs 解构保持响应式

  4. 生命周期组合式
    onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted

  5. Pinia 替代 Vuex

  • 无Mutations，直接修改
  • 极简API、模块化、TS友好、无需嵌套
  1. 常用新特性
    Teleport teleport 传送组件
    Suspense 异步组件兜底
    Fragment 多根节点无需根标签
    自定义hooks 逻辑复用

八、前端工程化 Webpack / Vite

Webpack

  1. 五大核心：入口entry、出口output、loader、plugin、mode
  2. loader：处理非JS文件（css、less、图片、字体）
  3. plugin：打包全过程增强（html、压缩、拷贝、gzip）
  4. 热更新 HMR 原理：局部刷新，不整页重载
  5. 打包优化：
    代码分割、路由懒加载、第三方库CDN、tree-shaking、gzip压缩、缓存分包

Vite

  1. 比Webpack快原因：
    • 开发环境基于原生ES Module，按需加载
    • 依赖预构建，避免重复请求
  2. 生产环境用Rollup打包
  3. 适合Vue3/React新项目，启动快、热更新快

工程化其他

  • ESLint 代码校验、Prettier 格式化
  • Git Flow 工作流、commit规范
  • 脚手架：VueCLI、Vite、CreateReactApp
  • 跨端：UniApp、Taro、ReactNative、Flutter

九、前端性能优化【面试必问大题】

1. 首屏优化

  1. 路由懒加载、组件懒加载
  2. 图片懒加载、webp格式、雪碧图
  3. 静态资源CDN
  4. 开启Gzip压缩
  5. 减少首屏请求数量
  6. 骨架屏、loading 优化体验

2. 代码层面优化

  1. 避免全局变量滥用
  2. 合理使用防抖节流
  3. 虚拟列表解决大数据表格卡顿
  4. 销毁定时器、事件监听、清除闭包引用
  5. 减少不必要DOM操作，批量更新

3. 打包优化

  1. 第三方库拆分chunk
  2. 移除无用代码 tree-shaking
  3. 压缩JS/CSS/HTML
  4. 依赖缓存，长效缓存策略

4. 渲染优化

  1. 避免频繁回流重绘
  2. 动画用 transform/opacity
  3. 大数据列表用虚拟滚动
  4. 图片合理尺寸，避免大图缩放

十、前端安全面试题

  1. XSS 跨站脚本攻击
    分类：存储型、反射型、DOM型
    防御：转义输入输出、CSP策略、禁用unsafe-inline

  2. CSRF 跨站请求伪造
    防御：Token校验、Referer校验、SameSite Cookie

  3. 接口防刷、参数签名、敏感数据加密

十一、面试手写代码必考题（必背）

  1. 手写防抖函数
  2. 手写节流函数
  3. 手写深拷贝
  4. 手写简易Promise，promisAll
  5. 手写call / apply / bind
  6. 手写数组去重、数组扁平化
  7. 手写继承（原型继承、寄生组合继承）
  8. 手写虚拟DOM render函数
  9. 手写EventBus事件总线
  10. 手写Vue双向绑定简易版

十二、高频场景面试题

  1. el-table 几千条数据滚动卡顿怎么优化？
  2. 首屏白屏时间过长怎么排查优化？
  3. 项目打包后体积过大如何瘦身？
  4. 移动端适配怎么做？
  5. 怎么解决跨域？
  6. Vue 页面刷新后vuex数据丢失怎么办？
  7. 怎么防止按钮重复点击？
  8. 图片加载失败如何处理？
posted @ 2026-05-08 09:51  雅痞_yuppie  阅读(3684)  评论(0)    收藏  举报