二面

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 10 道题。答案默认折叠，便于先自行作答。 1. 介绍一下你觉的最有成就感的项目 题目要点 略 参考答案 略 2. 项目为什么选择Lerna+Yarn Workspaces构建Monorepo 题目要点 Monorepo 实现多包统一管理，提升代码复用和维护效率 Lerna 管理版本发布、变更检测、脚本执行 Yarn Workspaces 优化依赖安装，支持本地包软链接 两者结合，实现高效、便捷的 Monorepo 构建和维护 适合大型复杂项目及多包同步开发场景 参考答案 一、考察点 理解 Monorepo 的概念及优势 多个相关包/模块统一管理、版本控制、发布流程等 掌握 Lerna 与 Yarn Workspaces 的功能和配合方式 包管理、依赖安装优化、版本发布、脚本执行等 能够分析技术选型的利弊和实际应用场景 团队协作、构建效率、依赖一致性等 展示架构设计思路和实践经验 二、参考答案 1.1 原理说明 Monorepo 概念 将多个相关的项目包（packages）放在同一代码仓库中统一管理 便于代码复用、版本统一、跨包协调 Lerna 功能 管理 Monorepo 中多个包的版本发布和依赖关系 支持基于 Git 的变更检测，自动决定哪些包需要发布 脚本集中执行，提升跨包开发效率 Yarn Workspaces 功能 优化依赖安装，自动将多个包的依赖扁平化安装，避免重复依赖 支持包之间的本地软链接，方便跨包开发调试 减少 node_modules 大小，提升安装速度 Lerna + Yarn Workspaces 配合优势 Lerna 专注版本和发布管理 Yarn Workspaces 专注依赖管理和安装优化 组合使用，实现 Monorepo 的高效管理和性能提升 1.2 核心用法 + 选择理由 选择 Lerna + Yarn Workspaces 的具体理由 依赖管理高效：Yarn Workspaces 扁平化依赖树，减少冗余，提高安装速度，节省磁盘空间 版本发布便捷：Lerna 支持自动检测改动包，实现增量发布，减少发布成本 跨包开发友好：Workspaces 实现包间软链接，调试时无需发布即可实时联动 统一管理多个包：代码结构清晰，版本一致性好，避免包版本冲突 社区成熟稳定：Lerna 和 Yarn 是成熟开源项目，生态完善，文档丰富 使用场景举例 大型前端项目拆分为多个业务组件包 同时管理多个相关 npm 包，需同步发布和升级 需要提升 CI/CD 流程效率和开发体验 1.3 常见误区或面试陷阱 ❌ 误区一：认为 Lerna 可以独立完成所有 Monorepo 管理工作 实际 Lerna 本身不管理依赖安装，需配合 Workspaces 或 npm/yarn 其他特性 ❌ 误区二：忽视依赖扁平化带来的版本冲突风险 需要合理规划依赖版本，避免冲突和不兼容 ❌ 误区三：Monorepo 不适合所有项目，盲目迁移可能增加复杂度 适用项目规模和团队协作需求需评估清楚 3. 如何解决子包间的循环依赖问题 题目要点 循环依赖会导致加载异常和维护困难 抽取公共模块拆分依赖，消除环路 使用接口抽象和依赖注入解耦 动态导入延迟加载，规避同步循环 设计单向依赖，保持依赖关系 DAG 配合工具检测和团队规范防范 参考答案 一、考察点 理解循环依赖的概念及危害 ...

← 第 1 轮 · 返回本次面经 · 第 1 轮 → 本轮要点： react hooks、列表和key、高阶组件、性能优化、react 渲染机制、React函数组件更新、react 组件设计模式、全方位解读this、类型判断 本轮共 14 道题。答案默认折叠，便于先自行作答。 1. 项目中遇到的最大技术挑战是什么 题目要点 略 参考答案 略 2. 项目整体架构是什么样的 题目要点 略 参考答案 略 3. 在项目中，你们是如何进行前端代码的模块化和组件化的 题目要点 模块化：代码拆分成独立功能模块，使用 ES Module 标准 组件化：UI拆分成可复用组件，封装结构、样式和逻辑 结合构建工具支持模块管理和代码分割 组件通信通过 props、事件、状态管理实现 合理设计文件结构和规范，提升维护性和扩展性 注意职责单一、样式隔离和性能优化 防止模块和组件划分不合理导致管理混乱 参考答案 考察点 理解模块化和组件化的概念及其在前端开发中的重要性 熟悉常见的模块化规范（如 CommonJS、ES Module）及其区别 掌握组件化设计思想和实现方式，尤其是在主流框架中的实践 能结合项目需求合理组织代码结构，提高复用性和维护性 参考答案 一、原理说明 模块化 指将代码拆分成独立的、功能明确的模块，每个模块有自己的作用域和接口，避免全局污染，提高代码可维护性。 常见规范包括： CommonJS（Node.js环境，使用 require 和 module.exports） AMD（异步模块定义，适用于浏览器异步加载） ES Module（ESM）（现代标准，使用 import 和 export，支持静态分析） 组件化 是模块化的进一步细化，专注于 UI 层面，将界面拆分成独立且可复用的组件，封装逻辑、样式和结构。 组件通常包含状态管理、事件处理、生命周期管理等，方便组合和维护。 主流框架如 Vue、React、Angular 都鼓励基于组件开发。 二、项目中模块化和组件化的实践 1. 模块化管理 项目采用 ES Module 作为标准模块规范，利用 import 和 export 进行模块间依赖管理。 通过合理拆分功能模块（如工具库、接口服务、状态管理、业务逻辑）形成清晰的依赖关系，便于维护和测试。 使用构建工具（Webpack、Vite）支持模块打包和代码分割，提高加载效率。 配合 alias 和路径管理，保持模块引用简洁，提升开发体验。 2. 组件化设计 界面层面，拆分成粒度合适的可复用组件，满足单一职责原则。 采用状态提升、属性传递和事件回调机制实现组件间通信。 使用组件库（如 Element UI、Ant Design）或自研组件库提升开发效率。 结合样式模块化（CSS Modules、Scoped CSS、CSS-in-JS）实现样式隔离，防止样式冲突。 组件支持配置化和插槽机制，提高灵活性和扩展性。 3. 代码组织结构 按业务域或功能划分文件夹，模块和组件分层清晰，便于定位和扩展。 统一入口导出，方便模块聚合和复用。 编写完善的文档和规范，确保团队成员对模块和组件使用方式达成共识。 4. 优势与价值 提高代码复用率，减少重复开发和维护成本。 降低耦合度，提升系统可扩展性。 加快开发节奏，方便多人协作。 利用现代构建工具实现性能优化。 三、常见误区与注意点 模块划分过细或过粗 导致管理困难或代码臃肿，需根据项目复杂度合理拆分。 组件职责不明确，混合业务逻辑和表现层，影响复用和测试。 忽视样式隔离，导致样式污染和冲突。 组件间通信设计不合理，导致状态管理混乱。 忽略模块和组件的性能优化，如避免无意义的重新渲染和重复加载。 4. 项目中做过哪些性能优化方面的工作 题目要点 资源按需加载与代码拆分减少首屏加载时间 静态资源压缩、合并和 CDN 加速 图片优化与懒加载 减少 DOM 操作，合理使用虚拟 DOM JS 任务拆分，使用防抖节流和 Web Worker 接口合并、缓存和 HTTP/2 多路复用 持续性能监控与数据驱动优化 避免过度拆分和缓存策略失误 注重整体性能和用户设备多样性 参考答案 考察点 理解前端性能优化的核心目标与常见瓶颈 掌握多种性能优化手段及其适用场景 能结合具体项目场景，分析问题并提出有效优化策略 熟悉常用性能监控和评估工具，验证优化效果 参考答案 一、原理说明 前端性能优化的核心目标是提升页面加载速度、响应速度和交互流畅度，从而改善用户体验，降低用户流失。 性能瓶颈通常来源于资源加载慢、渲染阻塞、JavaScript 执行耗时、内存泄漏和网络请求频繁等。 现代性能优化涉及多个层面，包括网络层、资源层、渲染层和代码执行层。 性能优化不仅是技术问题，更涉及合理架构设计和业务合理拆分。 二、项目中的具体优化实践 1. 资源加载优化 采用代码拆分（Code Splitting）和按需加载，避免一次性加载大量无关代码，缩短首屏加载时间。 使用 CDN 分发静态资源，提升资源下载速度。 资源压缩和合并（如压缩 JS/CSS，合并小文件减少请求数量）。 图片优化（WebP 格式替代、图片懒加载、合理尺寸裁剪）。 利用浏览器缓存策略（Cache-Control、Service Worker）减少重复请求。 2. 渲染性能优化 减少 DOM 操作次数，合并多次修改，避免触发频繁回流和重绘。 使用虚拟 DOM 和虚拟列表技术优化大量数据渲染。 CSS 动画尽量使用 GPU 加速属性（如 transform、opacity）。 避免长任务阻塞主线程，合理拆分 JS 任务，防止界面卡顿。 3. JavaScript 执行优化 减少不必要的计算和事件绑定，防抖节流常用来优化频繁触发的事件。 使用 Web Worker 将计算密集型任务移至后台线程，避免主线程阻塞。 利用 Tree Shaking 去除未使用代码，减小包体积。 预编译和缓存机制提升运行效率。 4. 网络请求优化 接口合并，减少请求次数。 接口缓存，避免重复请求同一数据。 接口压缩与批量请求。 使用 HTTP/2 多路复用，提升请求并发性能。 5. 性能监控与持续优化 集成性能监控工具（如 Lighthouse、Chrome DevTools Performance、RUM 埋点等）。 通过埋点监控首屏时间、接口响应时间、动画帧率等关键指标。 根据监控数据持续跟踪性能瓶颈，迭代优化。 三、常见误区与注意点 只注重单一优化手段，忽视整体性能提升策略。 盲目过度拆分导致请求过多，反而影响性能。 缓存设置不合理，导致用户看到过期内容。 不关注性能监控数据，缺乏闭环改进。 忽视用户设备差异，优化方案不够适配低端设备。 5. 在移动端开发中，你们是如何处理不同设备的适配问题的 题目要点 了解并使用 viewport 设置布局基础 灵活组合 rem/vw/flex/media query 等单位和布局方案 使用 postcss 工具链统一适配流程 考虑高DPR设备图像清晰度适配 针对横屏、Pad 等极端设备考虑额外样式方案 注重兼容性测试，处理浏览器差异 参考答案 考察点 是否了解常见的移动端适配方案及原理 是否能结合业务场景选择合理的适配策略 是否关注兼容性、用户体验和性能平衡 是否能系统性总结适配技术手段的优缺点 参考答案 一、适配问题的来源 移动端设备种类繁多，存在如下适配挑战： ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： WebWorker、Canvas 和 SVG 本轮共 10 道题。答案默认折叠，便于先自行作答。 1. 自我介绍，项目介绍 题目要点 略 参考答案 略 2. 为什么选择Vue3+TS而非React 题目要点 略 参考答案 略 3. 你们用的是什么脚手架，脚手架的基本原理了解么 题目要点 脚手架是提升工程效率、统一规范的工具 底层通过 Node.js 实现文件复制、模板注入、命令执行 常用工具：Vue CLI、CRA、Vite、自研 CLI（基于 Plop、Yeoman） 企业通常自研脚手架实现快速初始化、统一配置和组件生成 掌握核心原理（模板渲染、交互、文件操作）有助于二次开发 参考答案 考察点 面试官希望了解你是否具备工程化思维 是否熟悉当前项目所用的脚手架工具及其底层实现原理 是否理解脚手架在项目初始化、规范约定、自动化等方面的作用 是否具备定制或维护脚手架的能力 参考答案 一、常用脚手架工具及我们团队的选择 我们项目主要使用的是： Vue 项目：使用 @vue/cli、vite 或公司自研的内部模板系统 React 项目：早期使用 create-react-app，后续迁移为 Vite + 自定义模板 自研脚手架：基于 Plop.js、Yeoman、Commander 或 create-* 实现，通过 Node.js 实现项目初始化、目录结构生成、依赖安装、git 初始化等功能 二、脚手架的核心功能 初始化项目结构（生成项目目录和基础文件） 注入标准化配置（eslint、prettier、commitlint、husky、tsconfig等） 自动安装依赖（npm/yarn/pnpm install） 选择模板和功能模块（用户选择功能特性，动态生成对应模块） 自定义交互式命令行（CLI）（使用 inquirer 等库实现配置选择） 生成代码片段/组件（如 plop generate component） 三、脚手架的实现原理 脚手架本质上是基于 Node.js 脚本，通过命令行交互完成初始化和代码生成，主要原理包括： ...

← 第 1 轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 浏览器渲染过程 本轮共 11 道题。答案默认折叠，便于先自行作答。 1. 简单介绍一下你上一段实习中觉得做的比较好的项目 题目要点 略 参考答案 略 2. 想知道你们的项目大概是什么样的结构，你在开发的时候会从什么地方下手 题目要点 理解项目结构和流程是高效开发的基础 先从入口和路由入手，理清全局数据和功能模块 注重调试和测试，减少开发盲点 合理利用团队协作工具提升开发效率 持续学习和总结，快速适应项目迭代 参考答案 考察点 理解典型前端项目的整体结构及模块划分 掌握从项目启动到开发流程的系统思路 能清晰描述如何快速定位入口及关键代码区域 展示合理的开发习惯与代码管理思路 体现对团队协作和版本控制的认知 参考答案 一、典型前端项目结构说明 目录结构 src/：项目源码，包含页面（Page）、组件（Component）、样式（Styles）、工具函数（Utils）、状态管理（Store）等 public/ 或 static/：静态资源，如图片、字体、favicon 等 build/ 或 scripts/：构建相关脚本和配置 config/：环境配置文件，如开发、测试、生产环境参数 tests/：单元测试和集成测试代码 配置文件如 package.json, .babelrc, webpack.config.js 或 vite.config.js 关键文件 入口文件（如 src/main.js、src/index.js）负责挂载应用 路由配置文件定义页面导航 状态管理文件（如 Vuex、Redux）管理全局状态 公共组件库及工具函数模块 API 接口封装层，统一管理后端请求 二、开发时的切入点及流程 理解业务和需求 先明确当前任务目标和业务逻辑 查阅需求文档、设计稿和接口文档 定位项目入口 从入口文件入手，理清项目启动流程 理解路由配置，确定目标页面 代码结构梳理 理解页面层与组件层的关系 查找关键组件和功能模块的实现 查看状态管理和数据流 ...

← 第 1 轮 · 返回本次面经 · 第 1 轮 → 本轮共 9 道题。答案默认折叠，便于先自行作答。 1. 讲一下D2C（Design to Code）这个项目 题目要点 阐述 D2C 的概念和目标 说明设计稿到代码的转换流程和关键技术 分析项目架构及技术栈组成 指出面临的挑战与解决方案 强调项目对团队效率和产品质量的提升价值 参考答案 考察点 ● 理解 D2C 项目的定位及价值 ● 掌握设计稿自动转化为代码的核心技术与流程 ● 了解项目中遇到的技术挑战及解决方案 ● 能阐述项目架构、自动化程度及实际应用场景 参考答案 一、项目背景与定义 D2C（Design to Code） 是一个致力于将设计稿（如 Figma、Sketch、Adobe XD）自动或半自动转换为前端代码（如 React、Vue、Flutter 等） 的技术项目。 目的是大幅提升设计与开发的协作效率，缩短从设计到上线的周期，减少手工编码错误和重复劳动。 二、核心原理与技术流程 1. 设计稿解析 利用设计工具开放的 API 或导出格式（如 JSON、SVG、图层数据）提取设计元素信息。 包括图层结构、样式属性（颜色、字体、布局）、交互定义等。 2. 结构映射与组件识别 将设计图层结构映射为前端组件树，分析布局关系（如 Flexbox/Grid），抽象为对应的代码组件。 识别常用设计元素（按钮、输入框、列表等），映射成对应 UI 组件库元素，便于复用。 3. 代码生成 根据映射关系自动生成对应框架的代码（JSX、Vue SFC、Flutter Widget 等）。 自动写入样式代码（CSS-in-JS、Less、Sass），保证样式还原度。 支持动态交互事件和路由跳转逻辑的基本嵌入。 4. 优化与可维护性保障 生成代码结构清晰、易于阅读和二次开发。 支持设计稿变更自动更新代码，保障设计-开发同步。 三、项目架构与技术栈 前端：基于 React/Vue 实现可视化设计解析和代码展示。 后端：负责设计稿文件解析、复杂转换逻辑和代码模板管理。 辅助工具：利用 AST 解析和模板引擎生成高质量代码。 集成：支持与设计工具插件无缝对接，实现一键转码。 四、技术挑战及解决方案 1. 设计与代码结构差异 设计稿与前端布局模型（盒模型、Flex/Grid）存在差异，需智能转换布局方案。 通过规则引擎和机器学习辅助识别设计意图，提升转换准确率。 2. 样式还原与响应式支持 设计稿静态像素为主，需转换成动态响应式样式。 采用抽象布局单元、断点处理等方法，实现多端适配。 3. 动态交互与状态管理自动化 静态设计向动态代码过渡，自动注入事件处理和状态逻辑，增强可用性。 4. 性能与可维护性平衡 生成代码需避免臃肿冗余，保证性能和后续维护成本。 通过代码模板优化和分层设计解决。 五、项目应用场景与价值体现 提高开发效率：设计师和开发者快速交付，高效协作。 降低人力成本：减少重复手工编码，避免低级错误。 提升设计一致性：保持设计与实现的高度一致，减少偏差。 支持多平台快速迭代：针对 Web、移动端统一输出，便于多端覆盖。 六、常见误区及面试陷阱 ❌ 认为 D2C 能完全替代人工编码，实际还需开发者做细节调整。 ❌ 忽视设计工具多样性和格式兼容性带来的技术复杂度。 ❌ 忽略代码生成后的维护和二次开发难度。 ❌ 过度依赖自动化，导致生成代码性能或质量下降。 七、总结观点 D2C 项目是设计与开发深度融合的技术创新，通过自动解析设计稿并生成高质量前端代码，极大提升开发效率和设计一致性。该项目涉及设计解析、智能映射、代码生成和性能优化多个技术环节，虽存在一定技术挑战，但未来有广阔应用前景。 ...

← 第 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 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 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 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 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; } 编写媒体查询： ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 二面，以实际场景、设计架构出发，考察候选人的综合知识和深度 本轮共 11 道题。答案默认折叠，便于先自行作答。 1. 描述一个你解决的复杂性能优化案例（指标提升与具体手段） 题目要点 按照START法则来讲解 参考答案 结合自身项目经历来说 2. React/Vue框架设计思想对比（如数据绑定、虚拟DOM） 题目要点 React/Vue/设计思想/双向绑定/单向数据流/虚拟DOM/Fiber/Proxy/模板编译 参考答案 一、考察点 是否理解 React 和 Vue 的设计理念与核心架构区别 是否能准确比较两者在数据绑定、组件化、更新机制上的异同 是否理解虚拟 DOM 的实现方式及两者的优化策略 是否能结合实际项目场景，选择合适的框架思路 二、参考答案 1.1 核心设计思想对比 ✅ 一、框架理念对比 维度 Vue React 核心理念 渐进式框架，关注视图层 函数式 + 声明式 UI，构建 UI 的库 学习曲线 简洁、直观、HTML+JS 分离 更偏工程化，需要理解 JSX、Hooks 模板机制 模板语法（HTML-like） + 指令（v-xxx） 使用 JSX 全部由 JS 描述 UI ✅ 二、数据绑定机制 🔹 Vue 使用响应式系统（Vue2 的 Object.defineProperty，Vue3 的 Proxy）； 支持 双向绑定（如 v-model）； 模板中变量变化会自动更新视图，开发体验友好。 🔹 React 数据是不可变状态（immutable state）； 单向数据流（父 → 子）； 利用 setState() 或 useState() 触发重新渲染； 更强调“以状态驱动视图”，需要手动绑定与更新。 ✅ 三、虚拟 DOM 实现与 Diff 策略 Vue 自主构建 Virtual DOM（与模板语法结合）； Vue2 使用双端比较 diff 算法； Vue3 引入 静态提升 + Block Tree + 最长递增子序列（LIS），减少不必要 patch； 编译优化层更强，template 更容易静态分析。 React 以函数式组件为主，使用 JSX 构建虚拟 DOM； 使用 Fiber 架构重构更新机制，实现异步可中断渲染； 更新优先级调度（如 startTransition）是核心优势之一； Diff 算法基于同层比较 + key 优化，机制稳定。 ✅ 四、组件设计与状态管理 对比项 Vue React 状态管理 Vuex（Vue2） / Pinia（Vue3） Redux / Context API / Zustand 等 生命周期 Options API（Vue2）/ Composition API（Vue3） 类组件生命周期 / 函数组件 Hooks 组件通信 props / emit / provide/inject props / context / props drilling 3. React Hooks闭包陷阱的产生原因？ 题目要点 React Hooks/闭包陷阱/useEffect/useRef/setInterval/函数式更新/stale closure ...

← 第 1 轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 二面重点考察前端框架理解与性能优化能力，同时关注工程化处理思维和大规模数据处理能力。 本轮共 10 道题。答案默认折叠，便于先自行作答。 1. 元素隐藏的三种方法（display:none、visibility:hidden、opacity:0）及其区别 题目要点 display: none：元素不在文档流中，不占位，无法响应事件。 参考答案 display: none：元素不在文档流中，不占位，无法响应事件。 visibility: hidden：占位但不可见，无法响应事件。 opacity: 0：占位且可响应事件（需用 pointer-events: none 避免）。 2. display:none是否影响DOM渲染性能？如何用CSS实现淡出动画？ 题目要点 display:none 会从渲染树中移除，提升性能，但不能用于动画过渡。 参考答案 display:none 会从渲染树中移除，提升性能，但不能用于动画过渡。 使用 opacity + transition 实现淡出，再用 JS 延迟设置 display:none。 3. Array.from({ length: 5 }, (v, i) => i * 2) 的输出是什么？ 题目要点 输出 [0, 2, 4, 6, 8]。构造一个长度为 5 的数组，并通过索引乘以 2 填充。 参考答案 输出 [0, 2, 4, 6, 8]。构造一个长度为 5 的数组，并通过索引乘以 2 填充。 ...