1. 为什么想要应聘前端岗位？做了哪些准备？
参考答案： “我对前端的兴趣源于它‘所见即所得’的特性。我非常享受通过代码构建精美的用户界面、优化交互逻辑并最终提升用户体验的过程，这让我很有成就感。 为了胜任这个岗位，我做了以下三个阶段的准备：
- 夯实基础：系统学习了 HTML、CSS、JavaScript 核心语法，并深入学习了 React 框架，理解了组件化和虚拟 DOM 的思想。
- 实战输出：自己在 B 站和 GitHub 上寻找优质项目进行练手，并搭建了个人技术博客来沉淀学习笔记，培养了查阅官方文档和解决实际 Bug 的能力。
- 真实业务历练：在上一段实习中，我真正参与了企业级前端项目的开发，熟悉了前后端联调、Git 协作流程，并在项目中主导过长列表的性能优化，这让我对前端工程化有了更深刻的认知。”
2. 解释浏览器的事件循环机制（Event Loop）及宏/微任务区别
参考答案： “因为 JavaScript 是单线程的，为了防止耗时任务（如网络请求、定时器）阻塞主线程，浏览器引入了事件循环机制。 基本流程如下：代码执行时，同步任务会直接推入调用栈（Call Stack）执行；遇到异步任务时，会交给浏览器的 Web API 处理，完成后将其回调函数推入任务队列。 任务队列分为两类：
- 微任务（Microtask）：由 JS 引擎自身发起，优先级高。典型代表是
Promise.then/catch、MutationObserver。 - 宏任务（Macrotask）：由宿主环境（浏览器/Node）发起。典型代表是
setTimeout、setInterval、I/O 操作、UI 渲染。 执行顺序是：执行一个宏任务（初始为整个 script 脚本） -> 执行完毕后，清空当前所有的微任务队列 -> 浏览器进行 UI 渲染（视情况而定） -> 取出下一个宏任务执行。如此反复，形成循环。”
3. HTTP 和 WebSocket 的区别及应用场景
参考答案： “它们的主要区别在于通信模式和状态：
- 通信模式：HTTP 是基于请求-响应模型的单向通信（半双工），必须由客户端发起，服务端才能回应；而 WebSocket 是全双工通信，建立连接后，客户端和服务端都可以主动向对方推送数据。
- 连接状态：HTTP 是无状态的短连接（虽然 HTTP/1.1 有 Keep-Alive，但本质仍是请求应答）；WebSocket 是一旦建立（通过 HTTP 握手升级），就会保持持久的长连接，开销更小。 应用场景：
- HTTP：适合绝大多数低频交互、需要拉取数据的常规 Web 页面和接口请求。
- WebSocket：适合需要高频、低延迟、实时数据推送的场景，比如在线聊天室、股票实时行情盘口、多人协同编辑文档等。”
4. TypeScript 中的联合类型和交叉类型
参考答案： “在 TypeScript 中，这两种类型用于组合和派生新的类型：
- 联合类型（Union Types,
|）：表示一个值可以是多种类型中的任意一种，相当于逻辑上的‘或’。常用于处理多种可能的输入。- 举例：
type Status = 'success' | 'error' | 'loading';（变量只能是这三个字符串之一）。
- 举例：
- 交叉类型（Intersection Types,
&）：将多个类型合并为一个新的类型，新类型将拥有所有被交叉类型的成员，相当于逻辑上的‘与’。常用于对象的合并与属性扩展。- 举例：
type User = { name: string }; type Employee = User & { empId: number };（Employee类型必须同时包含name和empId属性）。”
- 举例：
5. React Hooks 的基本概念与常用举例
参考答案： “React Hooks 是 React 16.8 引入的特性，它的核心作用是让函数组件也能拥有状态管理和生命周期特性，从而替代臃肿的类组件（Class Component），实现逻辑复用。 我常用的三个 Hooks 是：
useState：用于在函数组件中声明和管理响应式状态。useEffect：用于处理副作用（如数据请求、DOM 操作、订阅事件）。它可以模拟componentDidMount、componentDidUpdate和componentWillUnmount这几个生命周期。useRef：主要有两个作用：一是获取真实的 DOM 节点以便直接操作；二是可以用来保存一个跨渲染周期且改变时不会触发视图重新渲染的可变变量。”
6. 如何通过优化 HTML 结构提高页面渲染速度？
参考答案： “优化 HTML 结构主要是为了加速浏览器的关键渲染路径（Critical Rendering Path）。我会从以下几个方面着手：
- 资源加载顺序：将
<link>CSS 样式表放在<head>中，确保尽早构建 CSSOM 树；将<script>标签放在<body>底部，或者使用defer/async属性，防止 JavaScript 的下载和执行阻塞 DOM 解析。 - 精简 DOM 树：减少不必要的
<div>嵌套，降低 DOM 树的层级深度。因为较深的层级会成倍增加浏览器 Layout（重排）和 Paint（重绘）的计算耗时。 - 语义化标签：使用 HTML5 语义化标签（如
<header>,<main>,<article>），这不仅有利于 SEO，还能帮助浏览器更高效地解析文档结构。 - 资源预加载：对首屏关键的大图或字体使用
<link rel="preload">进行预加载，对非首屏图片使用loading="lazy"进行懒加载。”
7. 项目经验：大文件列表渲染（虚拟滚动与时间切片）及边界处理
参考答案： “在处理百度网盘接口返回的海量数据时，如果直接渲染 DOM 会导致浏览器主线程卡死。我采用了两种策略：
- 虚拟滚动（Virtual Scroll）：我通过计算可视区域的高度和单个列表项的高度，只渲染用户当前屏幕可见的 DOM 节点（上下预留几个 Buffer 节点）。当用户滚动时，动态替换数据并使用
transform: translateY调整位置。这让 DOM 数量始终保持在常数级。 - 针对异常边界情况：如果后端返回的文件类型丢失或不规范，我在渲染时做了一层拦截映射。匹配不到合法类型的，统一渲染为‘未知文件’的兜底占位图（Fallback UI）；同时利用 Tooltip 在用户 Hover 时提示‘文件信息不完整’。如果关键字段缺失，代码层面使用可选链操作符（
?.）和空值合并运算符（??）防止运行时报错，保证系统的健壮性。”
8. 场景题：实现大文件断点续传的关键步骤
参考答案： “大文件断点续传的核心思想是‘分片’和‘标识’。主要步骤如下：
- 文件切片（Chunking）：在前端利用 HTML5 File API 的
slice方法，将大文件切割成固定大小（如 5MB）的多个分片。 - 计算唯一标识：利用 Web Worker 结合
spark-md5库读取文件内容计算出唯一的 Hash 值，作为这个文件的身份证。 - 续传校验（秒传）：上传前发接口询问后端该 Hash 值的文件是否已上传过。如果完全存在则提示‘秒传成功’；如果只上传了部分，后端会返回已存在的分片索引列表。
- 并发控制上传：前端过滤掉已上传的分片，对其余分片使用
Promise.all进行并发上传，并控制最大并发数（通常 4-6 个，防止浏览器请求阻塞）。 - 合并请求：所有分片上传完成后，前端发送一个‘合并分片’的请求，后端据此将碎片重组成完整的文件。”
9. 软素质：技术方案选型的量化评估
参考答案： “在面对多种技术方案时，我不会凭主观感觉，而是会从业务需求、开发成本和性能指标这三个维度进行量化分析：
- 性能指标量化（基准测试）：我会写小型 Demo，使用 Chrome DevTools 和 Lighthouse 对比不同方案的渲染帧率（FPS）、内存占用峰值、首屏加载时间（FCP）以及打包后的 Bundle Size。
- 开发与维护成本量化：除了评估组内同学对各项技术的熟悉度，我还会查看开源方案的 GitHub 数据量化指标，比如 Stars 数量、Issues 解决速度（代表社区活跃度）、最近一次 Commit 时间（代表是否还在维护）。
- 业务匹配度：如果项目是 TO-B 的后台系统，我会优先选择文档最全、生态最稳的方案（如 Ant Design）；如果是对 C 端性能要求极致的移动端页面，我才会考虑体积更小、更前沿但可能有坑的方案。综合这些客观数据，最后在团队内部进行 Review 决定。”