前端最新面试题及答案 (2025)

JavaScript 核心

1. ES6+ 新特性

问题: 请解释 ES6 中 let/const 与 var 的区别，以及箭头函数的特点。

答案:

• let/const vs var:
• 作用域: let/const 是块级作用域，var 是函数作用域
• 变量提升: var会提升变量，let/const不会(有暂时性死区)
• 重复声明: var允许重复声明，let/const不允许
• const声明必须初始化且不能重新赋值(对象属性可修改)
• 箭头函数:
• 语法更简洁
• 没有自己的this，继承外层this值
• 不能作为构造函数使用(new)
• 没有arguments对象，可用rest参数替代

2. Promise与异步编程

问题: Promise.all、Promise.race、Promise.allSettled有什么区别？

答案:

• Promise.all:
  所有promise都成功时返回结果数组；任何一个失败立即reject
• Promise.race:
  第一个settled的promise决定结果(无论成功失败)
• Promise.allSettled:
  等待所有promise完成(无论成功失败)，返回每个的结果状态数组

// Promise.allSettled示例 Promise.allSettled([promise1, promise2]).then(results => { results.forEach(result => { if(result.status === 'fulfilled') { console.log('成功:', result.value); } else { console.log('失败:', result.reason); } }); });

React

1. React Hooks

问题: useEffect和useLayoutEffect有什么区别？请给出使用场景示例。

答案:

// useLayoutEffect示例：测量DOM元素尺寸 function MeasureExample() { const [size, setSize] = useState({}); const ref = useRef(); useLayoutEffect(() => { setSize({ width: ref.current.offsetWidth, height: ref.current.offsetHeight }); }, []); return <div ref={ref}>Size: {JSON.stringify(size)}</div>; }

2. React性能优化

问题: React.memo和useMemo有什么区别？如何正确使用它们？

答案:

• React.memo:
  用于组件记忆化，避免不必要的重新渲染(浅比较props)
• useMemo:
  用于计算结果记忆化，避免重复计算

// React.memo示例 const MyComponent = React.memo(function MyComponent(props) { /* render using props */ }); // useMemo示例 function App({ list }) { const sortedList = useMemo(() => ( [...list].sort((a, b) => a.value - b.value) ), [list]); return <List items={sortedList} />; }

Vue

Vue3 Composition API

问题: Vue3的setup函数与Vue2的Options API相比有哪些优势？

答案:

1. 逻辑组织更好:

• Options API将逻辑分散(data, methods, computed等)
• Composition API可将相关逻辑组织在一起

1. 更好的类型推断:
   Composition API对TypeScript支持更好
2. 代码复用性高:
   可使用自定义组合式函数轻松复用逻辑
3. 更小的生产包体积:
   基于函数的API对tree-shaking更友好

// Composition API示例：计数器逻辑复用 export function useCounter() { const count = ref(0); function increment() { count.value++; } return { count, increment }; } // Component中使用： setup() { const { count, increment } = useCounter(); return { count, increment }; }

TypeScript

TS高级类型应用场景分析题 （以下为题目）

Q：请说明Partial<T>、Required<T>和Readonly<T>这些工具类型的用途及其实现原理

A：

这三种都是TypeScript内置的工具类型：

1️⃣ Partial<T>
• 用途：将类型T的所有属性变为可选属性
• 实现：

type Partial<T> = { [P in keyof T]?: T[P] };

• 应用场景：适用于需要部分更新对象的场景（如表单编辑）

2️⃣ Required<T>
• 用途：将类型T的所有属性变为必选属性（与Partial相反）
• 实现：

type Required<T> = { [P in keyof T]-?: T[P] };

• 应用场景：确保API返回完整数据时使用

3️⃣ Readonly<T>
• 用途：将类型T的所有属性变为只读属性
• 实现：

type Readonly<T> = { readonly [P in keyof T]: T[P] };

• 应用场景：防止配置对象被意外修改

Q：（进阶）如何实现一个Mutable<T>工具类型，能够移除T中所有属性的readonly修饰符？

A：

可以通过映射类型中的The Remapping via as特性实现：

type Mutable<T> = { -readonly [P in keyof T]: T[P]; }; /* ------ Test Case ------ */ interface Todo { readonly title: string; readonly description: string; } type MutableTodo = Mutable<Todo>; /* 等效于： { title: string; description: string; } */

关键点说明：
1️⃣ -readonly语法用于移除修饰符（同理可用-?移除可选修饰符）

Q：（实战）结合条件类型和工具类型实现一个NullableProperties<T>，使T中所有非函数属性变为可为null的类型

A：

需要结合条件类型判断属性值是否为函数：

type NullableProperties<T> = { [K in keyof T]: T[K] extends Function ? T[K] : T[K] | null; }; /* ------ Test Case ------ */ interface User { name: string; age: number; sayHi(): void; // ⚠️保持原样不变成null } type NullableUser = NullableProperties<User>; /* 等效于： { name: string | null; age: number | null; sayHi(): void; // 保持Function不变 } */

Web性能优化

CDN优化策略分析题 （以下为题目）

Q：CDN如何通过边缘节点提升网站性能？请描述其工作原理和至少三个优化技巧

A：

CDN（内容分发网络）通过地理分布的边缘节点缓存静态资源来加速访问：

工作原理：
1️⃣ DNS解析会将用户请求路由到最近的边缘节点
2️⃣ HIT则直接返回缓存的资源（减少源站压力）
3️⃣ MISS时从源站拉取并缓存新内容

优化技巧：
1️⃣ 多级缓存策略
• Edge节点缓存热数据
• Mid层缓存更大范围数据
• Origin shielding保护源站

2️⃣ 智能内容刷新
• Cache-Control设置合适的max-age
• Surrogate Key实现精准清除特定内容

3️⃣ 协议优化
• HTTP/2或HTTP/3提升传输效率
• TLS会话票证减少SSL握手开销

Web安全防护策略分析题 （以下为题目）

Q：现代Web应用面临的主要安全威胁有哪些？针对XSS和CSRF分别说明防御方案

A：

主要安全威胁矩阵：
│───────│───────────────────────────│
│ OWASP │ Threat Example │
│───────│───────────────────────────│
│ #1 │ Injection (SQLi等) │
│ #5 │ Broken Access Control │
│ #7 │ XSS │
│ #8 │ CSRF │
│───────│───────────────────────────│

️ XSS防御方案：
▸输入输出编码（DOMPurify库）
▸CSP策略限制脚本来源（Content-Security-Policy头）
▸HttpOnly标记保护Cookie

⚔️ CSRF防御方案：
▸SameSite Cookie属性（Lax/Strict模式）
▸CSRF Token验证机制
▸关键操作要求二次认证

Webpack构建优化实践分析题 （以下为题目）

Q：针对大型项目如何进行Webpack构建速度优化？请提供具体实施方案

A：

分层优化方案：

基础工具升级

# Before: "webpack": "^4.x" # After: "webpack": "^5.75.0", "swc-loader": "^0.2.x" // 替换babel-loader

⚡️ 并行化处理

module.exports = { parallelism: os.cpus().length -1, // CPU核数减一 plugins: [new ThreadsPlugin()] // HappyPack替代方案 };

精细化缓存策略

cache: { type: 'filesystem', cacheDirectory: path.resolve('.cache'), buildDependencies: { config: [__filename] } }, externalsTypeModule({ // CDN externals lodash:'_', vue:'Vue' })

构建分析辅助

npx webpack-bundle-analyzer stats.json # 识别大模块后进行针对性优化