2026 前端面试题

2026/05/29 fe

CSS 基础

问题考察范围等级参考答案
如何使用 Flexbox 实现一个 Header、Body、Footer 的经典三层布局，且 Body 自动填满剩余空间？Flexbox 弹性盒子模型、flex-grow 属性。基础将外层容器设置为 display: flex; flex-direction: column; min-height: 100vh;。然后对 Header 和 Footer 设置固定的高度或由内容撑开，对中间的 Body 设置 flex: 1（即 flex-grow: 1），这样 Body 就会自动占据剩余的垂直空间。
简述 padding 和 margin 的区别。CSS 盒子模型。基础padding（内边距）是内容（content）与边框（border）之间的距离，它属于元素内部，会受到元素的背景色影响。margin（外边距）是元素边框之外的距离，用于控制元素与其他元素之间的间距，它属于元素外部，始终是透明的。此外，垂直方向相邻元素的 margin 可能会发生折叠（Margin Collapse），而 padding 不会。
如何让一个元素居中对齐，有哪些方法？CSS 布局、居中对齐。基础常见的居中方法有： 1. Flexbox：父元素设置 display: flex; justify-content: center; align-items: center; 2. Grid：父元素设置 display: grid; place-items: center; 3. 绝对定位 + Transform：子元素设置 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 4. 绝对定位 + Margin（需定宽高）：子元素设置 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; 5. 基础水平居中：行内元素父级设 text-align: center;，块级元素设 margin: 0 auto; 6. 单行文本垂直居中：设置 line-height 等于容器高度。
介绍一下 position: absoluteCSS 定位（Positioning）。基础position: absolute（绝对定位）会使元素完全脱离正常的文档流，不再占据页面空间。它的位置是相对于其最近的非 static 定位的祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的元素）来确定的。如果找不到这样的祖先元素，则相对于初始包含块（通常是 <html> 元素或视口）进行定位。绝对定位的元素可以通过 top、right、bottom、left 属性来精确控制位置，并可通过 z-index 调整层叠顺序。

JavaScript 基础

问题考察范围等级参考答案
请解释 JavaScript 中 let、const 和 var 的区别。JS 变量声明、作用域（Scope）、变量提升（Hoisting）。基础var 存在变量提升，可以在声明前使用（值为 undefined），具有函数作用域，允许重复声明。let 和 const 具有块级作用域（由 {} 包裹），不存在变量提升（存在暂时性死区，声明前使用会报错），不允许在同一作用域内重复声明。const 声明时必须初始化，且声明后绑定的内存地址不能修改（对于基本类型值不可变，对于引用类型如对象/数组，其内部属性可以修改）。
下面这段代码的输出是什么，为什么 console.log("1"); setTimeout(() => console.log("2"), 0); Promise.resolve().then(() => console.log("3")); console.log("4");JavaScript 异步编程、事件循环（Event Loop）基础。进阶输出顺序为 1, 4, 3, 2。原因：JavaScript 是单线程的，执行顺序由事件循环（Event Loop）控制。首先执行同步代码，输出 1 和 4。遇到 setTimeout 时，将其回调放入宏任务（MacroTask）队列；遇到 Promise.resolve().then 时，将其回调放入微任务（MicroTask）队列。同步代码执行完毕后，事件循环会优先清空当前所有的微任务，因此输出 3。微任务清空后，再执行下一个宏任务，输出 2。

网络与浏览器

问题考察范围等级参考答案
当浏览器里面输入网址，发生了哪些事情网络协议、浏览器渲染原理、DNS 解析、TCP/IP。进阶1. URL 解析：浏览器解析输入的 URL，确定协议、域名、路径等。 2. DNS 解析：浏览器查找本地缓存、系统缓存等，若无则向 DNS 服务器查询，将域名解析为 IP 地址。 3. 建立 TCP 连接：浏览器与服务器通过“三次握手”建立 TCP 连接（若是 HTTPS 则还需进行 TLS 握手）。 4. 发送 HTTP 请求：浏览器向服务器发送 HTTP 请求报文。 5. 服务器响应：服务器处理请求并返回 HTTP 响应报文（包含 HTML 数据等）。 6. 浏览器渲染页面： - 解析 HTML 构建 DOM 树。 - 解析 CSS 构建 CSSOM 树。 - 合并 DOM 树和 CSSOM 树生成渲染树（Render Tree）。 - 布局（Layout）：计算各节点在屏幕上的确切位置和大小。 - 绘制（Paint）：将页面像素绘制到屏幕上。 7. 断开连接：数据传输完毕后，通过“四次挥手”断开 TCP 连接（若开启 keep-alive 则保持连接）。
什么是跨域？在日常开发中，我们通常如何解决跨域问题？浏览器同源策略、网络请求、前端安全。基础跨域是指浏览器由于“同源策略”限制，阻止一个域下的脚本去请求另一个域下的资源。同源指的是“协议、域名、端口”三者完全一致。常见的解决方案包括：1. CORS（跨域资源共享），由后端设置响应头 Access-Control-Allow-Origin 允许特定或所有域名访问；2. 代理（Proxy），在开发环境下通过 webpack/vite 配置本地代理服务器转发请求，生产环境下通过 Nginx 配置反向代理。

React 基础

问题考察范围等级参考答案
简述 React 中组件内部 State 与 Redux 的区别及各自的使用场景。状态管理、Redux基础State 是组件内部管理的状态，通常用于控制 UI 的局部状态（如弹窗开关、表单输入值等），生命周期随组件销毁而结束。Redux 是全局状态管理库，用于跨组件共享状态，数据存储在单一的 Store 中。 使用场景：当状态只在单个组件或简单的父子组件间传递时，使用 State 即可；当遇到深层级组件通信、多个无关组件需要共享同一状态，或者需要时间旅行调试复杂状态逻辑时，推荐使用 Redux。
React 有哪些常见的 Hooks？React 生命周期、Hooks基础在函数组件中，主要通过 useEffect 替代：传入空数组 [] 模拟挂载；传入依赖项模拟更新；返回清理函数模拟卸载。
什么是虚拟 DOM（Virtual DOM）？React 的 Diff 算法原理是什么？核心原理、虚拟 DOM、Diff进阶虚拟 DOM 是用 JS 对象描述真实 DOM 结构的轻量级表示。状态更新时，React 会对比新旧虚拟 DOM 树，计算最小变更集并批量更新到真实 DOM。 Diff 原理基于三个策略：1. Tree Diff：只对比同层级节点，不跨层级比较；2. Component Diff：同类组件比较，不同类组件直接替换；3. Element Diff：同层级子节点通过唯一 key 属性区分，实现高效复用和重排。
简述 useCallback 和 useMemo 的作用及区别。性能优化、Hooks进阶两者都是用于性能优化的 Hooks，避免不必要的重复计算和重渲染。 useMemo 用于缓存计算结果（值），只有依赖项改变才重新计算，适用于耗时计算； useCallback 用于缓存函数引用，依赖项改变才返回新函数，常配合 React.memo 使用，避免父组件渲染导致传递给子组件的函数引用变化而触发子组件重渲染。简单来说：useMemo 缓存值，useCallback 缓存函数。

工程化与架构

问题考察范围等级参考答案
Vite 为什么在开发环境下比 Webpack 快？它的生产环境构建为何默认仍使用 Rollup？构建工具、Vite、Webpack高级开发环境快的原因：Webpack 需要抓取并编译整个应用的模块，生成 bundle 后才提供服务（全量打包）；而 Vite 基于浏览器原生 ES Modules (ESM)，将模块分为依赖和源码。依赖用 esbuild 预构建（极快），源码在浏览器请求时按需编译返回，省去了全量打包时间。
生产环境使用 Rollup 的原因：在生产环境中，如果完全依赖原生 ESM，会导致大量的并发网络请求（网络瀑布），严重拖慢页面加载。Rollup 提供了成熟的 Tree-shaking 和代码分割（Code Splitting）能力，能构建出体积更小、加载更优的生产包。
为什么大型前端项目倾向于使用 Monorepo（如 pnpm workspaces + Turborepo）？它解决了什么痛点？Monorepo、pnpm、Turborepo高级解决的痛点：传统 Multi-repo 模式下跨项目共享代码困难（需频繁发包或 npm link）、依赖版本易冲突、跨项目重构和联调成本高。
优势：1. 代码复用与可见性：所有代码在同一仓库，修改公共库后其他子项目立即生效，原子化提交；2. 统一依赖管理：通过 pnpm workspaces 统一管理依赖，利用硬链接节省空间并提升安装速度，保证版本一致性；3. 构建协同与缓存：结合 Turborepo 的任务编排和构建缓存（本地/远程），跳过未修改包的构建，极大提升 CI/CD 和本地构建效率。

加分问题（后端与部署）

问题考察范围等级参考答案
在构建 Docker 镜像时，为什么建议将 COPY package.json 和 npm install 放在 COPY . . 之前？Docker 构建优化、镜像分层缓存加分这是为了充分利用 Docker 的分层缓存机制。Docker 构建时每条指令生成一层，若文件无变化则复用缓存。业务代码（COPY . .）变动频繁，而依赖（package.json）变动较少。如果先拷贝所有代码，任何修改都会导致后续的 npm install 缓存失效，每次都要重新下载依赖。先拷贝 package.json 并安装依赖，只要依赖没变就能直接复用 node_modules 缓存，极大提升构建速度。
Session、Cookie、JWT 分别是什么？它们的关系与区别？身份认证、网络安全加分Cookie 是浏览器存储在本地的文本数据，请求时会自动携带。Session 是服务端认证机制，服务端保存用户状态，将 Session ID 存入客户端 Cookie 中，缺点是占用服务端内存，不利于分布式。JWT 是无状态的 Token 认证方案，服务端不存状态，只负责签发和校验 Token（通常存放在 LocalStorage 或请求头中），适合分布式架构，但缺点是 Token 签发后在过期前难以主动撤销。
SQL 中的 LEFT JOIN 和 INNER JOIN 的区别是什么？数据库、SQL加分INNER JOIN（内连接）：取交集，只返回两个表中匹配成功的行。如果左表的数据在右表中无匹配，则直接丢弃。
LEFT JOIN（左连接）：以左表为基准，返回左表的所有行。即使右表中没有匹配的记录，左表的数据也会被保留，此时右表对应的字段会用 NULL 填充。
什么是 OAuth 2.0？简述其最常用的授权码模式（Authorization Code）流程。身份认证、第三方授权加分OAuth 2.0 是一个行业标准的授权协议，允许用户授权第三方应用访问其资源，而无需暴露账号密码（如“微信/GitHub 登录”）。
授权码模式流程：1. 第三方应用引导用户跳转到授权服务器；2. 用户同意授权后，服务器重定向回第三方应用并附带一个授权码（Code）；3. 第三方应用在后端使用该 Code 向授权服务器换取 Access Token；4. 第三方应用携带 Token 访问资源服务器获取用户数据。