前端开发面试题及代码实例解析.docxVIP

第PAGE页共NUMPAGES页

2026年前端开发面试题及代码实例解析

一、基础概念与原理（共5题，每题6分，总分30分）

1.题1（6分）：解释什么是CSS盒模型，并说明`box-sizing:border-box`与`content-box`的区别及其应用场景。

答案与解析：

CSS盒模型由内容(content)、边框(border)、外边距(margin)组成。默认情况下，盒模型的宽度/高度仅指内容区域的宽高，边框和外边距会额外增加元素的总尺寸。

-`content-box`（默认）：宽度/高度仅包含内容区域，边框和外边距会额外扩展元素尺寸。

-`border-box`：宽度/高度包含内容、边框和内边距，外边距独立扩展。

应用场景：

-`border-box`：电商产品卡片、布局容器，方便快速控制元素总尺寸。

-`content-box`：需要精确控制内容区域尺寸的场景，如文本长度限制。

2.题2（6分）：简述HTTP缓存机制（强缓存、协商缓存）的工作原理及`Cache-Control`、`ETag`、`Expires`的作用。

答案与解析：

HTTP缓存分为强缓存和协商缓存：

-强缓存：直接从缓存返回资源，无需请求服务器。

-`Cache-Control`：控制缓存策略（如`max-age=3600`表示缓存1小时）。

-`Expires`：过期时间字段（HTTP1.0已不推荐）。

-协商缓存：先向服务器发送请求，服务器根据`ETag`或`Last-Modified`判断是否返回新资源。

-`ETag`：资源唯一标识，若未变化则返回304。

-`Last-Modified`：资源最后修改时间。

3.题3（6分）：说明JavaScript中的事件冒泡与事件委托的优缺点及适用场景。

答案与解析：

-事件冒泡：子元素事件向上传递至父元素，性能开销大（大量事件绑定）。

-优点：减少全局绑定。

-缺点：需在冒泡阶段截断（`stopPropagation`）。

-事件委托：在父元素上绑定事件，利用事件冒泡处理子元素。

-优点：减少DOM操作，动态绑定。

-缺点：子元素需先存在。

适用场景：

-事件委托：动态列表、长滚动页面（如`scroll`事件）。

-事件冒泡：简单静态布局。

4.题4（6分）：解释什么是同源策略及其限制，如何突破（CORS、JSONP、WebSocket）。

答案与解析：

同源策略禁止跨域请求，限制`document.domain`、`window.location`等属性访问。突破方法：

-CORS：通过`Access-Control-Allow-Origin`响应头实现。

-JSONP：动态`script`标签绕过同源，仅支持GET请求。

-WebSocket：协议本身不限制跨域。

5.题5（6分）：简述WebWorkers的作用及适用场景。

答案与解析：

WebWorkers允许在后台线程运行脚本，不阻塞主线程。

-优点：提升复杂计算性能（如视频转码）。

-缺点：无法访问DOM。

适用场景：数据处理、复杂计算。

二、前端框架与库（共5题，每题6分，总分30分）

1.题6（6分）：比较React和Vue的核心差异（虚拟DOM实现、生命周期、状态管理）。

答案与解析：

-虚拟DOM：React全量更新，Vue按需渲染（`VirtualDOM`vs`HMR`）。

-生命周期：React使用`useEffect`，Vue分`beforeMount`/`mounted`。

-状态管理：React（`Redux`/`Context`），Vue（`Vuex`/`Pinia`）。

2.题7（6分）：简述Vue3的`CompositionAPI`与`OptionsAPI`的区别及优势。

答案与解析：

-`OptionsAPI`：分散在`data`/`methods`中，适合简单组件。

-`CompositionAPI`：逻辑聚合（如`setup`函数），增强可读性。

优势：按需引入，代码组织更灵活。

3.题8（6分）：解释React中的`React.memo`、`useMemo`、`useCallback`的作用及区别。

答案与解析：

-`React.memo`：组件级别浅比较（防重渲染）。

-`useMemo`：缓存计算结果（避免重复计算）。

-`useCallback`：缓存函数引用（避免子组件不必要的重渲染）。

4.题9（6分）：简述Angular的生命周期钩子（`ngOnInit`、`ngDoCheck`）与React的`useEffect`对应关系。

答案与解析：

-Angular：`ngOnI