前端开发

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： react 渲染机制、react hooks、Webpack与Vite 本轮共 15 道题。答案默认折叠，便于先自行作答。 1. 请选择一个最有技术挑战的项目，说明你解决的核心问题、技术选型依据及后续优化空间 题目要点 STAR法则 参考答案 根据自己项目经历，提前挖掘亮点、准备项目 2. 作为前端负责人，在前端基础设施层做了哪些体系化建设 题目要点 从规范、工具链、组件库、监控和协作多维度展开 结合具体措施与实际效果进行阐述 展现管理、技术与团队文化的融合能力 体现对挑战的预判和解决方案 参考答案 考察点 ● 考察候选人对前端基础设施的整体认知和架构设计能力 ● 了解候选人在团队管理与技术规范制定上的实践经验 ● 关注候选人如何通过基础设施提升团队开发效率和产品质量 ● 体现对可维护性、可扩展性和技术创新的把控 参考答案 一、前端基础设施体系化建设的核心内容 1. 统一的技术规范与编码标准 制定并推广团队统一的代码规范（如 ESLint、Prettier 规则） 统一命名、目录结构、组件设计规范，确保代码可读性和维护性 定期组织代码评审，强化规范执行和技术交流 2. 构建和自动化工具链搭建 设计统一的构建流程，选用并维护基于 Webpack、Vite 等的构建工具 实现自动化构建、测试、打包、发布流程（CI/CD） 集成自动化测试框架（单元测试、集成测试、端到端测试） 3. 组件库与设计系统建设 搭建和维护通用组件库，提升复用率与一致性 结合设计系统规范，确保视觉与交互体验统一 推动组件库文档化、版本管理和持续迭代 4. 性能监控与质量保障体系 建立前端性能监控（如首屏时间、资源加载、交互响应） 引入错误收集与上报系统，实现线上问题快速定位 建立质量门禁（代码覆盖率、性能阈值、代码扫描） 5. 多端统一与跨团队协作支持 设计跨平台技术方案（Web、移动端、小程序） 制定接口规范和Mock数据方案，保障前后端高效协作 推动微前端或模块化方案，支持多团队并行开发 二、实施效果与价值体现 提升团队开发效率，减少重复工作和沟通成本 保证代码质量和产品稳定性，降低线上故障率 加速产品交付，缩短上线周期 促进团队技术能力成长，构建良好技术文化 支持业务快速扩展，适应多端多业务场景需求 三、可能遇到的挑战与应对策略 团队接受度和习惯调整：通过培训、逐步推行和示范项目降低阻力 工具链维护复杂性：设立专人负责基础设施维护和升级，保障稳定性 组件库与设计系统演进的平衡：定期收集反馈，兼顾灵活性与规范性 性能与稳定性监控数据的解读和应用：建立专门分析流程，结合业务需求制定优化方案 四、总结观点 作为前端负责人，基础设施层的体系化建设是提升团队整体效率和产品质量的关键。通过规范标准、自动化工具、组件库、监控体系及跨团队协作支持，构建稳定且高效的前端研发环境，为业务快速发展提供坚实技术保障。同时，注重团队文化和技术传承，推动持续改进和创新。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 10 道题。答案默认折叠，便于先自行作答。 1. 为什么选择前端，你是怎么学前端的，自学前端觉得比较困难的点 题目要点 真实表达学习动机和行业认知 清晰描述学习路径与方法，体现自驱力 主动总结自学难点及解决方案，展示解决问题能力 表现对未来成长的规划和期待 参考答案 考察点 ● 面试官希望了解候选人的学习动机和成长路径 ● 关注候选人对前端行业的认知及自学能力 ● 探索自学过程中的困难及解决方案，反映抗压和问题解决能力 参考答案 一、选择前端的原因 技术的即时反馈与可视化强：前端开发可以快速看到效果，工作成果直观，满足感强。 行业发展迅速，应用广泛：随着互联网和移动端普及，前端技术需求旺盛，职业前景广阔。 结合设计与开发的跨界魅力：前端融合设计、用户体验和工程实现，工作内容丰富多样。 学习曲线友好，入门门槛相对较低：相比后端复杂环境，前端技术栈更容易起步。 二、学习前端的路径与方法 基础知识打牢：从HTML、CSS、JavaScript开始，系统学习语言和浏览器原理。 项目驱动实践：通过小项目练习知识点，逐步积累实战经验。 系统化学习框架和工具：深入学习 Vue、React、Webpack 等主流框架和构建工具。 参与开源和社区：通过阅读源码、提问和答疑，加深理解和扩展视野。 持续跟进新技术：保持学习态度，关注生态变化和新兴技术趋势。 三、自学过程中的困难及应对 1. 知识点多且零散 前端涉及面广（浏览器机制、网络、安全、UI等），容易迷失方向。 解决方法：制定阶段性学习计划，系统化梳理知识体系。 2. 理论与实践脱节 单纯看文档和教程，缺少动手操作，难以消化。 解决方法：边学边做项目，遇到问题及时查阅和总结。 3. 框架与工具更新快 框架迭代频繁，工具链复杂，学习压力大。 解决方法：关注核心原理，不盲目追新，重点掌握主流稳定技术。 4. 调试与性能优化难度高 浏览器兼容、异步机制、性能调优等问题复杂。 解决方法：借助调试工具，多阅读源码和案例，积累经验。 四、总结观点 选择前端，是因为它能快速实现创意、应用广泛且持续发展。自学过程中遇到知识面广、实践难和技术更新快等挑战，但通过系统规划和项目实践克服。未来希望通过不断积累，深入理解前端底层原理和工程化实践，成为一名全栈且有深度的前端工程师。 2. 对工作的期望 题目要点 略 参考答案 略 3. 成就感的点 题目要点 略 参考答案 略 4. 一二三面面试官给你的感觉 题目要点 略 参考答案 略 5. 看到你面试比较曲折，转了三个部门，你有什么感受，事后有复盘吗 题目要点 略 ...

← 第 1 轮 · 返回本次面经 · 第 1 轮 → 本轮共 10 道题。答案默认折叠，便于先自行作答。 1. 自我介绍（注意与一、二面的差异化） 题目要点 略 参考答案 略 2. 请重点介绍一个你主导或深度参与的技术项目（非业务需求），如何从0到1推动落地 题目要点 明确项目是“自主发起”，解决了实际“工程难题” 描述了“目标-方案-过程-成果”四个完整阶段 有实际的“技术亮点”可以展开讲解（如 monorepo、适配抽象、构建工具链） 表达出清晰的“主人翁意识”与技术领导力 参考答案 考察点 ● 面试官希望了解候选人是否具备“技术主导力”或“技术项目 owner”思维 ● 重点考察项目选题是否合理、推进过程是否专业、技术方案是否有深度 ● 了解候选人在“从问题识别、调研方案、攻克难点、团队协作、成果评估”全过程中的角色与能力 参考答案 一、项目背景与问题识别 在我负责的公司前端平台中，随着业务的扩展，多个产品线逐渐发展出自己的前端应用，形成了大量重复代码、组件风格不一致、工程维护困难等问题。尤其是在多端部署（H5、微信小程序、企业微信等）场景下，重复建设、逻辑差异、样式割裂等问题尤为突出。 于是我提出建设一套前端基础能力平台化方案，目标是实现： 通用组件与工具库的沉淀与统一 多端适配与平台差异抽象 支持微前端/模块加载的架构演进 该项目在初期并非“业务需求”推动，而是从开发痛点中主动识别问题、提出技术方向并推动落地。 二、方案设计与关键落点 ✅ 技术目标拆解 组件与样式平台化 设计统一的 UI 规范（基于现有设计稿抽象） 使用 monorepo + lerna 管理组件库 使用 Storybook + VitePress 建立文档与调试系统 工具函数抽离 构建 @common/utils 包，提供统一的日期处理、加密、验证、网络库封装等工具 用 TypeScript + 单元测试保障稳定性 构建通用模板/脚手架 抽象常用项目模板：H5、小程序、纯组件库 提供一键初始化、CI/CD 脚本、lint规范、GitHook 校验等预设 模块注册系统设计 ...

← 第 1 轮 · 返回本次面经 · 第 1 轮 → 本轮要点： CSRF攻击、https、浏览器的同源策略、浏览器的缓存机制、盒子模型、全方位解读this、call、apply和bind 本轮共 23 道题。答案默认折叠，便于先自行作答。 1. 自我介绍与项目介绍 题目要点 略 参考答案 略 2. 你在项目中如何优化首屏加载时间 题目要点 清晰解释首屏加载构成和评估指标 梳理优化方向：资源优化、加载顺序、渲染提前 结合实际项目列举优化措施及效果 提醒常见误区，展示对细节的把控能力 参考答案 考察点 ● 首屏加载性能优化的全链路能力 考察对加载过程、资源调度、渲染流程等多维度的理解与掌握。 ● 实际优化手段的选型和落地能力 考察对首屏加载优化策略在项目中的实际应用和效果反馈。 参考答案 一、首屏加载时间的定义与构成 首屏加载时间指的是从用户发起访问请求到页面关键内容（尤其是首屏可视区域）可交互的时间。 它包括以下几个阶段： DNS 解析、TCP/TLS 连接 HTML 下载与解析 CSS/JS 加载、阻塞与执行 首屏组件渲染、资源加载与图片显示 浏览器首次 Paint 与可交互（First Contentful Paint / TTI） 二、常见优化策略与实战举例 1. 资源加载优化 Gzip / Brotli 压缩：减少资源体积 使用 HTTP/2 / QUIC：提升多资源并发加载能力 开启 CDN 加速：靠近用户，提高请求速度 精简依赖包：如 tree-shaking、移除未用依赖（如 moment → dayjs） 2. 首屏关键资源优先加载 Critical CSS 提取与内联：减少 CSS 阻塞渲染 示例：使用 webpack 的 critical-css 插件提取首屏样式并内联到 HTML 预加载首屏图片和组件 <link rel="preload" href="/assets/banner.jpg" as="image"> * **合理使用 `async` / `defer` 加载 JS**：避免阻塞 HTML 解析 #### 3. **首屏代码最小化（关键代码提取）** * **路由懒加载**：非首屏模块按需加载 ```js const About = React.lazy(() => import('./About')); ``` * **组件级拆分（如 webpack 的 SplitChunks）**：减少主包体积 * **SSR / SSG / 静态渲染**：预渲染首屏内容，降低白屏时间 #### 4. **骨架屏 + 占位图** * 使用骨架屏组件在主内容加载前展示占位 UI ```html <div class="skeleton-loader">...</div> ``` * 提高用户感知速度，避免白屏 #### 5. **缓存策略** * 使用强缓存（Cache-Control）与协商缓存（ETag） * 使用 Service Worker 做离线缓存，提升重复访问性能 #### 6. **图片优化** * 使用 WebP、AVIF 等新格式 * 小图 base64 内嵌、大图懒加载 * 多倍图压缩（如用 tinypng 等工具）控制首屏图体积 <200KB --- ### 三、项目实战效果举例（性能指标前后对比） | 优化项 | 优化前 | 优化后 | | ------------ | ----- | ----- | | 首屏加载时间（TTFB） | 1.8s | 0.9s | | JS包大小 | 1.2MB | 450KB | | 首屏渲染（FCP） | 3.5s | 1.2s | | 可交互时间（TTI） | 5.2s | 1.9s | --- ### 四、常见误区与陷阱 * **盲目使用懒加载**：过度懒加载会导致首屏核心内容延迟 * **未合理拆分 vendor 包**：导致主包过大 * **骨架屏布局不一致或闪烁**：影响用户体验 --- ### 五、总结 * 首屏优化是系统性工程，涵盖网络传输、资源管理、组件拆分、渲染路径等多环节。 * 应结合业务场景按阶段优化，配合 Lighthouse/Chrome DevTools 实时评估效果。 * 目标是压缩关键资源、减少阻塞、加快首屏渲染并保障体验一致性。 </details> ## 3. 如何识别首屏关键资源 {#question-subjective-9bbab0275c1b} ### 题目要点 * 明确首屏关键资源的定义与分类 * 能列出识别方法：Performance、Lighthouse、Network、Coverage * 能结合项目给出识别+优化的实际策略 * 有资源优先级调度、渲染阻塞等知识支撑 <details> <summary>参考答案</summary> ### 考察点 #### ● 识别影响首屏渲染的关键资源<br> 考察候选人对渲染链路和性能瓶颈的理解。 #### ● 熟悉浏览器加载机制与资源优先级调度<br> 考察对 Chrome DevTools、Performance 面板等性能工具的使用能力。 --- ### 参考答案 ### 一、首屏关键资源的定义 > **首屏关键资源**是指那些**必须在首屏渲染前加载完成**，否则会**阻塞页面首屏展示**的资源。常见类型包括： - **HTML 入口文件**：解析整个页面结构的根文档 - **CSS 样式表**：CSS 是阻塞渲染的，必须加载后才能绘制页面 - **首屏 JS 脚本**：用于首屏交互或组件逻辑初始化的 JS（例如 React/Vue 渲染逻辑） - **首屏图片**：Banner、大图等占据首屏核心位置的可见资源 - **字体文件（可选）**：若首屏需展示特殊字体（注意 FOUT 问题） --- ### 二、识别关键资源的方法 #### 1. 使用 Chrome DevTools → Performance 面板 1. 打开页面，F12 → Performance → 开始录制 2. 观察： - **Loading 阶段的资源瀑布图**（Network Timing） - **Longest Frame Before First Paint** - 标出首屏时间点前加载完成的资源，即为关键资源 #### 2. 使用 Chrome DevTools → Coverage 面板 - 识别“实际使用的 CSS/JS” - 可以看出哪些资源在首屏期间被真正用到，哪些是冗余代码 #### 3. 使用 Lighthouse 报告 - Lighthouse 中的“Diagnostics”项会指出： - 阻塞渲染的资源（Render Blocking Resources） - Critical Request Chains - Unused JS/CSS 提示，帮助精简非关键资源 #### 4. 查看 Chrome DevTools → Network 面板排序 - 按时间排序，查看首屏渲染前加载的资源 - 关注 `Initiator` 列，了解加载来源（HTML、JS 引入、CSS @import） --- ### 三、首屏关键资源识别的原则 | 资源类型 | 是否为关键资源 | 原因说明 | |--------------|----------------|-----------| | `index.html` | ✅ | HTML 是渲染入口 | | `main.css` | ✅ | 阻塞渲染，必须先加载 | | `main.js` | ✅ | 驱动页面逻辑，渲染主视图 | | 首页大图 | ✅ | 首屏可见，未加载即白屏 | | lazy.js | ❌ | 延迟加载，非首屏资源 | | 用户点击后加载的组件 | ❌ | 用户交互后才需要，不影响首屏 | --- ### 四、如何标记与优化首屏资源加载 #### ✅ 使用 `&lt;link rel="preload"&gt;` 预加载关键资源 ```html <link rel="preload" href="/styles/main.css" as="style"> <link rel="preload" href="/scripts/main.js" as="script"> ✅ 合理设置优先级（优先样式、关键 JS） 样式应优先加载，JS 使用 defer 避免阻塞渲染 图片使用 priority 或手动 preload，避免首屏懒加载 ✅ 拆分资源、按需加载，非关键资源延后 使用 webpack 拆包、code splitting 配合路由懒加载、图片懒加载，剥离非首屏资源 五、总结 首屏关键资源识别关键在于时机和影响：只看首屏时间前对渲染有影响的资源 工具使用（DevTools Performance / Coverage / Lighthouse）是识别的重要手段 识别后需通过优先加载、资源压缩、预加载、懒加载等手段进行优化 4. 具体通过哪些手段减少关键资源体积 题目要点 清晰分类 JS / CSS / 图片 / 字体 / HTML 各自的体积优化方式 能结合具体工具（Webpack、插件、工具链）给出实操方案 表达对“精简资源体积 = 提升性能体验”逻辑的理解 给出优化前后定量结果更有说服力 参考答案 考察点 ● 资源优化能力（代码压缩、依赖精简、图片优化等） 考察候选人对性能优化的掌握是否落到实处。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 事件循环、前端存储、React 生命周期、列表和key、react 事件机制、react 渲染机制、浏览器的同源策略、CSRF攻击、 XSS防御、跨域资源共享（CORS） 本轮共 23 道题。答案默认折叠，便于先自行作答。 1. 介绍一下你觉的比较有成就感的项目 题目要点 STAR法则 参考答案 老传统了，基于简历挖掘一个最有亮点的项目 2. 遇到的最有挑战的技术是什么 题目要点 略 参考答案 略 3. 项目技术选型是如何衡量的 题目要点 列举技术选型的核心衡量标准 说明评估流程和实操方法 强调综合权衡，避免片面判断 结合项目需求和团队实际展开 参考答案 考察点 ● 理解技术选型的核心因素及其权衡原则 考察对项目需求、团队能力与技术趋势的综合分析能力。 ● 掌握技术选型中性能、开发效率、维护性等多维度考虑 考察系统架构设计和项目管理思维。 参考答案 一、技术选型的衡量维度 1. 业务需求匹配度 技术是否满足项目的功能需求、性能要求和扩展性。 是否支持项目特有的场景或复杂逻辑。 2. 团队技术栈和能力 团队是否熟悉该技术，学习成本及培训投入。 技术社区活跃度，文档完善程度，易用性。 3. 性能表现 技术的响应速度、负载能力、资源消耗。 是否支持性能优化方案（如 SSR、缓存策略等）。 4. 生态和兼容性 技术生态是否丰富，有无成熟的第三方库和工具支持。 与现有系统和平台的兼容性。 5. 维护成本与长期可持续性 技术的稳定性和升级频率。 社区支持和企业采用情况，避免技术孤岛。 6. 开发效率 开发周期和上线速度。 工具链和开发体验是否高效。 7. 安全性和合规性 技术在安全防护、隐私保护方面的能力。 是否满足行业合规标准。 二、技术选型的评估流程 需求调研：明确项目功能和非功能需求。 方案调研：收集备选技术方案及案例。 技术预研和验证：通过小型原型测试技术可行性。 成本评估：综合考量开发、维护、培训等成本。 风险分析：识别潜在风险，如社区活跃度、技术稳定性。 决策和方案确定：结合以上评估，选择最优技术方案。 三、总结 技术选型是一个多维度权衡过程，既要满足业务需求，也需考虑团队与生态。 注重长期维护和性能表现，避免盲目追新或仅凭个人偏好。 通过科学的评估流程和数据支撑，做出理性选择。 4. 项目中的性能监控和错误上报讲一下 题目要点 列举关键性能指标及监控方法 说明错误类型、捕获机制和上报流程 强调数据分析与持续优化的重要性 结合实际项目实践进行阐述 参考答案 考察点 ● 理解前端性能监控的关键指标和监控手段 考察对用户体验优化和实时监控的认知。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： Web Storage、离线存储、浏览器解析 HTML 文件、浏览器渲染过程、浏览器的缓存机制、浏览器的存储机制 本轮共 22 道题。答案默认折叠，便于先自行作答。 1. 讲一下你的3D渲染的项目 题目要点 略 参考答案 略 2. 3D渲染顶点着色、剪裁你是怎么实现的 题目要点 略 参考答案 略 3. 顶点着色阶段中的坐标变换通常包括哪些步骤？为什么剪裁能提升性能 题目要点 略 参考答案 略 4. 在透视投影中，为什么需要视口变换（Viewport Transformation） 题目要点 略 参考答案 略 5. 像素着色阶段的任务是什么？它如何与光照模型（如Phong或Blinn-Phong）结合 题目要点 略 参考答案 略 6. 延迟渲染（Deferred Rendering）与前向渲染（Forward Rendering）在像素着色阶段的区别 题目要点 略 参考答案 略 7. 深度缓冲（Z-Buffer）的工作原理是什么 题目要点 略 参考答案 略 8. 浏览器绘制一帧的完整流程（从输入事件到像素合成） 题目要点 理清浏览器渲染从事件到显示的每个关键步骤。 解释每个阶段的作用和产生的结果。 强调布局、绘制和合成的性能开销及优化手段。 结合实际开发中的性能调优措施说明。 参考答案 考察点 ● 理解浏览器渲染的全流程 考察从用户输入到最终视觉呈现的各个环节。 ● 掌握事件处理、样式计算、布局、绘制和合成机制 考察对浏览器渲染流水线各阶段的深入理解。 ● 理解性能瓶颈和优化点 参考答案 一、浏览器绘制一帧的整体流程概览 从用户输入事件触发，到最终屏幕显示，浏览器大致执行以下步骤： 事件处理（Input Handling） JavaScript 执行（JS Execution） 样式计算（Style Recalculation） 布局计算（Layout / Reflow） 绘制（Painting） 合成（Compositing） 像素呈现（Rasterization & Display） 二、详细流程解析 1. 用户输入事件处理 浏览器捕获用户的输入事件（如点击、滚动、键盘等），将事件放入事件队列。 主线程从事件队列中取出事件，执行对应的事件处理程序（如回调函数）。 2. JavaScript 执行 事件处理回调可能修改 DOM 或样式。 JavaScript 运行在浏览器主线程，操作 DOM 会影响后续渲染。 3. 样式计算（Style Recalculation） 浏览器根据最新的 DOM 结构和 CSS 规则，计算每个元素的最终样式。 可能触发样式树（style tree）的重建或更新。 4. 布局计算（Layout / Reflow） 计算元素的几何信息（大小、位置等），生成布局树（layout tree）。 重新计算会影响元素相对或绝对位置。 这是性能较昂贵的过程，尤其是节点多或频繁触发。 5. 绘制（Painting） 将布局树转换为绘制指令（绘制图层的内容），如颜色、文字、边框等。 生成绘制层（paint layers），具体绘制到图层画布（layer canvas）。 6. 合成（Compositing） 多个绘制层按照层级关系组合（合成）成最终页面。 使用 GPU 加速合成，将图层合并为一张完整的图像。 合成阶段可以通过硬件加速提升性能，避免全部重绘。 7. 像素呈现（Rasterization & Display） 将合成后的图像转换成屏幕像素。 GPU 或显示设备将最终像素渲染到屏幕，完成一帧的视觉呈现。 三、流程图示意 用户输入 → 事件处理 → JS 执行 → 样式计算 → 布局 → 绘制 → 合成 → 屏幕显示 四、优化与注意点 避免频繁触发布局和绘制，减少重排和重绘次数。 使用 CSS3 硬件加速属性（transform、opacity）优化合成性能。 将复杂动画放入合成层，减少主线程压力。 合理分层减少合成开销，避免过度分层。 减少 JavaScript 执行时间，避免阻塞主线程。 9. 追问：requestAnimationFrame（RAF）在哪个阶段执行？为什么它比setTimeout更适合动画 题目要点 明确 RAF 在浏览器渲染流程中“绘制前”执行。 解释 RAF 与浏览器刷新同步，自动节流的机制。 对比 setTimeout，突出 RAF 动画性能和体验优势。 强调实际开发中推荐使用 RAF 实现动画更新。 参考答案 一、requestAnimationFrame 执行阶段 requestAnimationFrame 回调函数执行时机： RAF 的回调函数会在浏览器开始下一次渲染帧之前执行，即在 浏览器渲染管线中的“绘制（Painting）”之前或合成前的空隙期。 具体来说，RAF 的回调是在浏览器完成一帧的布局（Layout）和样式计算（Style Recalculation）之后，紧接着准备绘制和合成之前触发，保证动画逻辑与渲染同步。 二、为什么 RAF 比 setTimeout 更适合动画 1. 与浏览器刷新频率同步 RAF 会按照屏幕刷新频率（通常是 60fps，即约 16.7ms 一帧）自动调用回调，保证动画平滑且不卡顿。 setTimeout 不与渲染同步，回调可能在任意时刻执行，导致动画帧率不稳定甚至丢帧。 2. 自动节流和性能优化 浏览器在后台标签页会自动暂停 RAF 调用，节省资源；而 setTimeout 仍然会尝试执行，浪费性能。 RAF 允许浏览器合并多次绘制请求，提升性能。 3. 减少视觉撕裂 由于 RAF 在绘制之前触发，能保证动画状态在绘制前更新，减少视觉撕裂和跳帧现象。 setTimeout 可能导致更新与渲染不同步，画面不连贯。 三、总结 特点 requestAnimationFrame setTimeout 执行时机 渲染帧开始前（绘制前） 指定时间后，非渲染同步 帧率同步 与显示器刷新率同步，平滑动画 不保证同步，可能导致跳帧 性能优化 后台标签页自动暂停，节约资源 即使后台也运行，浪费性能 视觉效果 减少撕裂，动画更流畅 易出现撕裂和卡顿 10. 在布局（Layout）和绘制（Paint）阶段，浏览器如何避免不必要的重排（Reflow）和重绘（Repaint） 题目要点 明确重排与重绘的区别和性能影响 介绍浏览器批量更新、延迟计算和图层合成机制 结合实例说明如何避免强制同步布局 总结开发中避免不必要重排重绘的具体技巧和建议 参考答案 考察点 ● 理解重排和重绘的区别及性能影响 考察对浏览器渲染优化关键环节的掌握。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 全方位解读this、作用域链与闭包、事件循环、call、apply和bind、前端存储、react hooks、react 渲染机制、React函数组件更新 本轮共 25 道题。答案默认折叠，便于先自行作答。 1. 讲一下你平常使用的React Hooks 题目要点 熟练掌握常用 Hook（useState/useEffect/useRef/useMemo/useCallback/useContext） 能结合实际项目说明每个 Hook 的使用动机和实现效果 理解 Hook 的核心机制（闭包陷阱、依赖数组规则、执行时机等） 参考答案 考察点 ● 理解 React Hooks 的基本使用场景及原理 面试官关注候选人是否掌握了常用 Hook 的使用规范与时机。 ● 能否结合项目实际表达 Hooks 的应用能力 考察是否具备将 React 函数组件与 Hooks 结合的实际经验与思维能力。 参考答案 一、常用 React Hooks 介绍 1. useState —— 管理组件内部状态 功能：定义响应式的本地状态。 典型使用场景：表单输入值、按钮开关、局部 UI 状态等。 示例： const [count, setCount] = useState(0); 2. useEffect —— 副作用逻辑处理 功能：用于处理副作用逻辑，如数据请求、DOM 操作、订阅事件等。 依赖数组决定副作用执行时机。 常见场景： 页面初始化请求数据（空依赖数组） 监听某个状态变化触发逻辑（依赖项更新） 组件卸载时清理订阅（返回 cleanup 函数） useEffect(() => { const id = setInterval(() => { console.log('tick'); }, 1000); return () => clearInterval(id); }, []); 3. useRef —— 获取 DOM 或存储跨渲染变量 功能：可以持久保存可变值而不触发组件重新渲染；或获取 DOM 元素引用。 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 事件冒泡、事件捕获、事件委托、浏览器的缓存机制、组件通信、异步组件 本轮共 21 道题。答案默认折叠，便于先自行作答。 1. 实现数组里的拍平 数组本身的拍平 题目要点 递归遍历数组并合并结果。 判断元素类型是否为数组。 结合ES6 flat方法提升效率。 参考答案 考察点 ● 理解递归与数组操作 考察候选人对递归处理嵌套数据结构的能力。 ● 掌握ES6及新特性（如flat） 能结合不同方案解决扁平化问题。 参考答案 /** * 递归实现数组拍平 * @param {Array} arr - 待拍平数组，可能嵌套多层 * @returns {Array} - 扁平后的数组 */ function flatten(arr) { let result = []; for (const item of arr) { if (Array.isArray(item)) { result = result.concat(flatten(item)); } else { result.push(item); } } return result; } 或者使用ES6内置方法（只拍平一层）： const flatOnce = arr => arr.flat(); ES2019+ 支持深度拍平： ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮共 22 道题。答案默认折叠，便于先自行作答。 1. 编写一个函数解析URL，提取其中的协议、域名、路径和查询参数 题目要点 URL 结构 / URL API 使用 / 查询参数处理 / 错误处理 参考答案 考察点 ● 理解 URL 结构及其组成部分 面试官关注候选人是否熟悉 URL 的协议（scheme）、域名（host）、路径（path）、查询参数（query）等基本组成。 ● 掌握字符串处理和正则表达式技巧 是否能用合适的方法提取各部分信息。 ● 能写出健壮且兼容性好的解析函数 考虑边界条件和异常输入。 参考答案 原理说明 URL 由以下几部分构成（简化版）： 协议://域名\[:端口]/路径\[?查询参数]\[#锚点] 协议（scheme）：如 http、https、ftp 等； 域名（host）：主机名或 IP 地址； 路径（path）：服务器资源路径； 查询参数（query）：key=value 形式，多个参数用 & 分隔。 解析时重点提取协议、域名、路径和查询参数。 核心代码示例（JavaScript） function parseURL(url) { try { const urlObj = new URL(url); // 提取协议，去掉末尾冒号 const protocol = urlObj.protocol.replace(':', ''); // 域名（包含端口，如果有） const host = urlObj.host; // 路径 const path = urlObj.pathname; // 查询参数转成对象 const queryParams = {}; urlObj.searchParams.forEach((value, key) => { queryParams[key] = value; }); return { protocol, host, path, queryParams, }; } catch (error) { throw new Error('Invalid URL'); } } 使用示例 const url = 'https://www.example.com:8080/path/to/page?name=alice&age=25'; const result = parseURL(url); console.log(result); /* { protocol: "https", host: "www.example.com:8080", path: "/path/to/page", queryParams: { name: "alice", age: "25" } } */ 常见误区或面试陷阱 误区一：使用正则解析复杂 URL 正则难以覆盖各种边界情况，不建议复杂场景使用； 推荐使用浏览器内置的 URL 类。 误区二：忽略端口号 域名部分可能包含端口，直接取 hostname 会缺失端口。 误区三：查询参数未统一处理 查询参数可能重复，需根据需求选择保存方式（这里简单取最后一个值）。 总结回顾 解析 URL 推荐使用原生 URL API，简洁且兼容性好。重点提取协议、域名（含端口）、路径和查询参数，并把查询参数转换为对象方便后续使用。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 9 道题。答案默认折叠，便于先自行作答。 1. 讲一下“智慧医疗系统”项目背景、目标以及你主要负责的模块 题目要点 结合自己简历上的一个亮点项目准备 参考答案 结合自己简历上的一个亮点项目准备 2. 什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？ 题库原题：什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？ 题目要点 响应式设计（Responsive Design）是一种网页设计方法，旨在使网页在各种设备和屏幕尺寸上都能提供良好的用户体验。响应式设计通过使用流式布局、弹性网格和媒体查询，使得网页能够根据不同的设备特性（如屏幕大小、分辨率、方向等）自动调整其布局和内容。 响应式设计的基本原理 流式布局（Fluid Layouts）： 使用相对单位（如百分比、vw、vh）而不是绝对单位（如像素），使得网页布局能够根据容器的宽度自动调整。例如，使用百分比设置宽度，可以让列宽度随着屏幕尺寸的变化而变化。 弹性网格（Flexible Grid Systems）： 利用网格系统设计布局，将页面划分为多个灵活的区域。这些区域能够根据屏幕尺寸调整大小，从而实现不同设备上的适配。 媒体查询（Media Queries）： 使用 CSS 媒体查询，根据设备的特性（如宽度、高度、分辨率等）应用不同的样式规则。媒体查询可以针对不同的屏幕尺寸、方向（横向或纵向）等条件设置样式。 如何实现响应式设计 使用流式布局： 在 CSS 中使用相对单位（如 %, em, rem, vh, vw）设置宽度和高度。例如： .container { width: 80%; /* 宽度为容器的 80% */ } 利用弹性网格系统： 创建一个弹性网格布局，可以使用 CSS Grid 或 Flexbox。例如，使用 Flexbox： .container { display: flex; flex-wrap: wrap; /* 自动换行 */ } .item { flex: 1 1 300px; /* 自动调整宽度，最小宽度为 300px */ margin: 10px; } 编写媒体查询： ...