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

JavaScript 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([promise1, promise2]).then(results => {
results.forEach(result => {
if(result.status === 'fulfilled') {
console.log('成功:', result.value);
} else {
console.log('失败:', result.reason);
}
});
});

C React

1. React Hooks

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

答案 :

| | useEffect | useLayoutEffect | | ---

| 执行时机 | DOM 更新后异步执行 | DOM 更新前同步执行 | | 使用场景 | API 请求、订阅等 | DOM 测量、同步 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 :
  用于计算结果记忆化，避免重复计算

const MyComponent = React.memo(function MyComponent(props) {

});

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. 逻辑组织更好 :
2. Options API将逻辑分散(data, methods, computed等)
3. Composition API可将相关逻辑组织在一起
4. 更好的类型推断 :
   Composition API对TypeScript支持更好
5. 代码复用性高 :
   可使用自定义组合式函数轻松复用逻辑
6. 更小的生产包体积 :
   基于函数的API对tree-shaking更友好

export function useCounter() {
const count = ref(0);

function increment() {
count.value++;
}

return { count, increment };
}

setup() { const { count, increment } = useCounter(); return { count, increment }; }

TypeScript TypeScript

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

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

A：

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

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

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

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

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

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

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

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

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

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

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

A：

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

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



interface Todo {
readonly title: string;
readonly description: string;
}

type MutableTodo = Mutable<Todo>;

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

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

A：

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

type NullableProperties<T> = {
[K in keyof T]: T[K] extends Function ? T[K] : T[K] | null;
};



interface User {
name: string;
age: number;
sayHi(): void;
}

type NullableUser = NullableProperties<User>;

Web性能优化

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

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

A：

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

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

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

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

3 协议优化 o HTTP/2或 HTTP/3提升传输效率 o 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 验证机制 关键操作要求二次认证

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

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

A：

分层优化方案 ：

基础工具升级

"webpack": "^4.x"

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

并行化处理

module.exports = {
parallelism: os.cpus().length -1,
plugins: [new ThreadsPlugin()]
};

精细化缓存策略

cache: {
type: 'filesystem',
cacheDirectory: path.resolve('.cache'),
buildDependencies: { config: [__filename] }
},

externalsTypeModule({
lodash:'_',
vue:'Vue'
})

构建分析辅助

npx webpack-bundle-analyzer stats.json