二面 on Last Stand

腾讯-3年社招-前端面试 · 第 1 轮 · 二面

Sun, 07 Sep 2025 02:45:19 +0000

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 讲一下你的低代码平台架构设计

题目要点

分层架构、组件引擎、JSON Schema、热更新机制

参考答案

低代码平台采用分层架构设计：底层是组件引擎，负责组件的注册、渲染和生命周期管理；中间层是可视化编辑器，提供拖拽、属性配置和预览功能；上层是业务逻辑层，处理数据绑定、事件处理和页面路由。技术栈选择 Vue 3 + TypeScript，通过 JSON Schema 描述组件结构，使用虚拟 DOM 进行高效渲染。同时建立了组件市场和模板库，支持组件的版本管理和热更新机制。

2. 动态加载第三方组件时，如何解决样式冲突与DOM管理问题？

题目要点

样式隔离、容器化渲染、事件总线、冲突检测

参考答案

样式隔离通过 CSS Modules 或 Shadow DOM 实现，为每个组件创建独立的样式作用域。建立样式优先级管理机制，通过 CSS 变量和主题系统统一管理全局样式。DOM管理采用容器化策略，每个第三方组件在独立的容器中渲染，通过事件总线进行通信。同时实现样式冲突检测工具，在组件加载时自动检测并解决潜在冲突。

3. 当业务需求超出平台预设组件能力时，你们是怎么扩展的

题目要点

插槽扩展、开发工具链、能力评估、贡献机制

参考答案

建立组件扩展机制，支持通过插槽（slot）和高阶组件进行功能扩展。提供自定义组件开发工具链，包括脚手架、调试工具和发布流程。实现组件能力评估系统，当检测到需求超出现有能力时，自动推荐相似组件或提供扩展建议。同时建立组件贡献机制，允许开发者提交自定义组件到组件库，经过审核后供全平台使用。

4. 组件的热更新策略是怎么处理的，在不影响用户的使用情况下

题目要点

渐进式更新、状态保持、回滚机制、用户确认

参考答案

采用渐进式热更新策略，通过版本控制和灰度发布确保更新的安全性。实现组件状态保持机制，在更新过程中保存组件的当前状态，更新完成后恢复状态。建立回滚机制，当检测到更新异常时自动回滚到稳定版本。同时提供更新通知和用户确认机制，让用户选择合适的时机进行更新，避免在关键操作时中断用户体验。

5. 组件通信机制如何设计

题目要点

多层次通信、消息路由、协议标准化、调试工具

参考答案

设计多层次的通信机制：父子组件通过 props 和 events 通信，兄弟组件通过事件总线或状态管理，跨层级组件使用 provide/inject 或全局状态。建立消息路由系统，支持组件间的异步通信和消息队列。实现通信协议标准化，定义统一的消息格式和处理流程。同时提供通信调试工具，帮助开发者追踪消息流向和排查通信问题。

6. 移动端适配是什么做的

题目要点

响应式设计、弹性布局、手势支持、性能优化

参考答案

采用响应式设计和移动优先策略，使用 rem/vw 单位实现弹性布局。建立设备适配规则库，根据屏幕尺寸和设备类型自动调整组件样式。实现触摸手势支持，优化移动端的交互体验。同时建立性能优化机制，针对移动设备的性能特点进行资源加载和渲染优化，确保在低性能设备上也能流畅运行。

腾讯-2年社招-前端面试 · 第 1 轮 · 二面

Sun, 07 Sep 2025 02:17:29 +0000

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. 讲一下你觉得比较有亮点的项目

题目要点

技术选型合理性、渐进式迁移策略、自动化工具、性能保障

参考答案

在负责的一个大型电商平台重构项目中，面临着从传统 jQuery 架构向现代化 Vue 3 + TypeScript 架构迁移的挑战。项目的亮点在于采用了渐进式迁移策略，通过微前端架构实现新老系统的平滑过渡。设计了一套自动化的代码转换工具，将重复性的迁移工作自动化，提升了整体迁移效率 60%。同时建立了完善的性能监控体系，确保迁移过程中用户体验不受影响。

2. 项目的难点，你是怎么推动的

题目要点

风险控制、分阶段实施、灰度发布、跨团队协作

参考答案

最大的难点是在不影响线上业务的前提下完成大规模重构。通过制定详细的迁移计划，将整个项目拆分为多个独立的里程碑，每个阶段都有明确的交付物和验收标准。建立了灰度发布机制，新功能先在小范围用户中验证，逐步扩大覆盖范围。同时与产品、测试、运维团队建立了紧密的协作机制，确保各个环节的顺畅衔接。

3. 页面性能优化你做了哪些工作

题目要点

多维度优化、量化效果、监控体系、持续改进

参考答案

从多个维度进行了系统性优化：资源层面实施了代码分割和懒加载，将首屏加载时间减少 40%；网络层面启用了 HTTP/2 和资源预加载，优化了关键渲染路径；渲染层面使用了虚拟滚动和组件缓存，提升了长列表的交互性能；同时建立了性能监控体系，通过 Performance API 和用户行为分析持续跟踪优化效果。

4. 相关的指标有哪些，怎么去衡量的，标准是什么

题目要点

Core Web Vitals、RUM监控、分类基准、持续监测

参考答案

建立了完整的性能指标体系：Core Web Vitals 作为核心指标，包括 LCP（2.5s 以内）、FID（100ms 以内）、CLS（0.1 以内）；业务指标包括首屏加载时间、页面完全加载时间、接口响应时间等。通过 RUM（真实用户监控）收集线上数据，结合 Lighthouse 进行定期检测。制定了不同页面类型的性能基准，如首页 LCP 控制在 2s 内，列表页控制在 2.5s 内。

5. WebSocket 协议原理

腾讯-1年社招-前端面试 · 第 1 轮 · 二面

Thu, 04 Sep 2025 14:50:28 +0000

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 讲一下你的第一个项目

题目要点

突出难点与解决方案，亮点强调可扩展性与价值。

参考答案

第一个项目是一个内部管理系统，主要功能是数据可视化和表单管理。难点在于表单项类型复杂、交互逻辑多。解决方案是抽象出一套动态表单引擎，通过 JSON 配置生成组件，既降低了开发成本，也提升了可扩展性。项目的亮点在于统一了交互和样式规范，同时通过可配置化提高了可维护性。

2. 为什么选择 Vue3 + Vite 而非 React/Webpack

题目要点

Vue3 → 响应式系统和语法优势；Vite → 构建性能显著提升。

参考答案

Vue3 在响应式系统上引入了 Proxy，更适合处理复杂响应式数据，语法上对团队更友好。Vite 基于 ESBuild 和原生 ESM，构建速度远快于 Webpack，特别是在开发阶段的冷启动和热更新体验明显更优。而 Webpack 尽管生态成熟，但在开发构建效率上落后。

3. Vite 的构建速度比 Webpack 快多少

题目要点

冷启动快一个数量级，HMR 延迟极低，原因是按需编译 vs 整包构建。

参考答案

在实际项目中，冷启动通常能快 10 倍以上。例如一个中大型项目，Webpack 启动需要 20-30 秒，Vite 一般在 1-3 秒即可完成；热更新延迟也从秒级缩短到 100ms 以内。这是因为 Vite 基于原生 ESM 做按需编译，而 Webpack 是整包构建。

4. FCP 从 3.2s 降到 1.1s，具体做了哪些优化？

题目要点

构建优化 + 资源优化 + 网络优化 + SSR 骨架屏。

百度-APP产品研发-秋招 · 第 1 轮 · 二面

Wed, 20 Aug 2025 14:54:45 +0000

面试时间： 60分钟

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 讲一下你在官网开发中的主要职责，开发的模块以及你觉的比较亮点的地方

题目要点

如果是面试官问到“官网开发中的主要职责、开发的模块以及比较亮点的地方”，一般可以从以下几个角度来回答，既展示你的全局把控能力，又体现你在某些点上有深度。

参考答案

下面是一个参考思路：

1. 主要职责

官网整体架构搭建：根据业务和设计稿，使用 React/Vue + Vite/Next.js/Nuxt.js 等技术栈完成整体框架搭建，包括路由、状态管理、多语言支持等。
公共模块封装：抽象公共组件（如导航栏、页脚、轮播、富文本渲染、内容卡片等），提高复用率，减少重复开发。
性能优化：处理首屏加载速度、资源拆分、图片懒加载、SSR/SSG、SEO 优化。
协作沟通：与产品、UI、后端保持沟通，保证页面上线节奏和质量。

2. 负责的模块（可根据实际情况举例）

首页：承担品牌形象展示，涉及 banner 动效、动态数据展示、视频播放等。
产品/解决方案页：结合后端接口，展示不同产品模块，支持筛选、搜索、动态路由。
活动/新闻动态页：接入 CMS（如 Strapi、Sanity、WordPress 等），支持运营人员通过后台直接发布。
多语言切换模块：基于 i18n 实现官网多语言，支持自动识别浏览器语言，静态资源跟随切换。
SEO 优化模块：处理 meta 信息、OG 标签、站点地图、robots.txt，提升搜索引擎收录效果。

3. 亮点/难点突破

性能优化亮点
- 利用 SSR/SSG（Next.js/Nuxt.js）提升首屏渲染速度，Lighthouse 分数提升到 90+。
- 使用图片 CDN + WebP 格式，首页加载时间缩短 30%。
- 按需加载组件、拆分 bundle，减少首次请求体积。
可配置化思路
- 引入 CMS 系统，实现官网内容可配置，避免频繁改代码上线，运营可直接维护。
- 封装通用“模块化组件”，如 Banner、富文本、图文组合，做到拖拽/配置式渲染。
前端体验优化
- 首页/产品页引入动效（基于 Lottie 或 GSAP），提升视觉冲击力。
- 交互细节（滚动吸附、视差动画、过渡效果）增强用户沉浸感。
工程化实践

阿里巴巴-社招-5年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 13:12:16 +0000

本轮要点： 浏览器的缓存机制、react hooks

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 魔方组件的整体架构设计，包括其模块划分和核心功能

题目要点

略

参考答案

略

2. 你们是如何选择技术栈的？有哪些关键因素影响了决策

题目要点

略

参考答案

略

3. 魔方组件如何实现动态加载，以提升初始加载性能

题目要点

略

参考答案

略

4. 魔方组件如何管理组件的配置信息？组件之间的通信是如何处理的

题目要点

略

参考答案

略

5. 三维模型的加载性能，将加载时间从10秒缩短至3秒都做了哪些操作

题目要点

略

参考答案

略

6. 这个项目中在移动端，你们是如何处理不同设备的适配问题的

题目要点

略

参考答案

略

7. 有没有用服务端渲染（SSR）？如果有，你们是如何实现的

题目要点

SSR 是服务器预先渲染页面，提高首屏性能和 SEO
常用框架有 Next.js、Nuxt.js，也可自研实现
实现时结合服务器渲染和客户端 Hydration 完成完整页面交互
需处理代码共享、数据预取、样式加载及性能优化
了解 SSR 的局限性和优化难点，合理权衡使用场景

参考答案

一、考察点

理解 SSR 的基本概念和优势
掌握常见 SSR 实现方案及其原理
理解 SSR 与客户端渲染（CSR）的区别和协同方式
了解 SSR 在项目中的具体落地方法和技术选型

二、参考答案

2.1 SSR 的基本概念

SSR（Server-Side Rendering）是指在服务器端完成页面的 HTML 渲染，再将完整的 HTML 返回给客户端
相比纯客户端渲染，SSR 提升了首屏渲染速度和 SEO 友好性
用户拿到的是已渲染好的页面，浏览器可以更快显示内容

2.2 SSR 的优势和适用场景

首屏速度快：浏览器无需等待大量 JS 执行即可显示页面
SEO 优化：搜索引擎能抓取到完整的内容，提升排名
社交分享友好：分享链接时可显示完整预览
适合内容型或公共站点，电商、新闻、博客等场景

2.3 常见 SSR 实现方案

Next.js（React）：提供开箱即用的 SSR 支持和静态生成
Nuxt.js（Vue）：Vue 生态的 SSR 框架，支持服务端渲染和静态导出
自研 SSR：使用 Node.js 搭配 ReactDOMServer 或 Vue SSR API 手动实现
传统模板引擎：如 EJS、Handlebars 等，服务器渲染 HTML

2.4 我们项目中 SSR 的实现方式

使用了 [Next.js / Nuxt.js / 自研 SSR] 作为 SSR 框架
服务器通过 Node.js 环境调用 ReactDOMServer.renderToString 或 Vue SSR 的 renderToString，生成完整 HTML
结合路由系统，实现根据请求 URL 渲染对应页面
页面返回时携带初始数据（通过服务端数据预取），客户端接管 Hydration，实现页面交互
结合缓存策略，优化性能和响应速度
配合 Webpack 和 Babel，保证服务端代码和客户端代码一致性

2.5 实现过程中需注意的问题

服务端和客户端代码共享及差异处理（避免浏览器 API 直接调用）
初始数据的获取与注入，保证页面完整性和交互
处理样式加载，避免闪烁（FOUC）
性能优化，如页面缓存、资源压缩和异步加载
服务器负载和扩展性考虑

三、常见误区或面试陷阱

❌ 认为 SSR 只是在服务器渲染静态 HTML，忽略客户端 Hydration
❌ 忽视服务端渲染的性能开销和状态同步难题
❌ 直接复用客户端代码，未处理服务端无 DOM 的环境差异
❌ 忽略 SEO 以外的性能和用户体验提升点

8. 项目中使用了哪些状态管理工具？为什么选择这些工具

题目要点

状态管理工具选择基于项目规模、团队经验和性能需求
Redux 适合大型复杂应用，MobX 适合响应式需求
Context 适合轻量局部状态管理
结合工具生态和中间件支持，提升开发效率和维护性
合理划分全局与局部状态，避免状态管理复杂化

参考答案

一、考察点

理解不同状态管理工具的特点及适用场景
掌握项目中选择状态管理工具的决策逻辑
能清晰阐述所选工具带来的优势和解决的问题
了解状态管理的基本概念和复杂度控制方法

二、参考答案

2.1 项目中使用的状态管理工具

Redux
- 适用于大型复杂应用，状态集中管理
- 具备时间旅行调试、可预测状态变更、丰富中间件生态
MobX
- 响应式状态管理，自动追踪依赖，适合数据驱动视图更新
- 代码简洁，学习曲线较低
React Context + useReducer/useState
- 轻量级状态共享方案，适合中小型或局部状态管理
Recoil / Zustand / Valtio 等轻量方案
- 现代灵活的状态管理，适合部分场景需求
Vuex（Vue 项目）
- Vue 官方状态管理库，集中管理全局状态，支持插件扩展

2.2 选择这些工具的理由

项目规模与复杂度

阿里巴巴-社招-3年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 12:38:24 +0000

本轮要点： react hooks、高阶组件、列表和key、react 渲染机制、react 组件设计模式、前端模块化、Webpack与Vite

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 讲一下你对Hooks 了解

题目要点

Hooks 是函数组件状态和副作用管理的新方案
常用 Hooks 有 useState、useEffect、useMemo、useCallback 等
Hook 调用必须遵循规则，保证顺序稳定
自定义 Hooks 用于逻辑复用，提高代码可维护性
理解 Hook 设计原理，有助于写出高质量 React 代码

参考答案

一、考察点

理解 React Hooks 的设计初衷与核心概念
掌握常用 Hooks（如 useState、useEffect、useMemo、useCallback 等）的作用与使用场景
理解 Hooks 规则及其背后的原理机制
认识 Hooks 对函数组件状态管理和生命周期的改进
了解自定义 Hooks 的设计思路及复用价值

二、参考答案

2.1 Hooks 的定义与设计初衷

定义：Hooks 是 React 16.8 引入的函数组件状态和副作用管理的特性
设计目标：
- 解决类组件中状态逻辑难以复用和组件嵌套过深的问题
- 让函数组件拥有类似类组件的状态和生命周期能力
- 简化组件逻辑，提升代码可读性和复用性

2.2 常用 Hooks 及其作用

Hooks	功能描述	典型使用场景
`useState`	在函数组件中声明状态变量	组件内部状态管理
`useEffect`	处理副作用（订阅、异步请求、DOM操作等）	替代类组件的生命周期钩子
`useContext`	订阅 React Context，实现跨组件数据传递	共享全局状态、主题、语言等
`useMemo`	记忆计算结果，避免不必要的重复计算	性能优化，避免昂贵计算重复执行
`useCallback`	记忆函数实例，避免子组件重复渲染	优化子组件性能，防止无意义的 props 变化
`useRef`	保存可变值，不触发组件重新渲染	访问 DOM 节点或保存不变引用

2.3 Hooks 的规则与原理

规则：
- 只能在函数组件或自定义 Hooks 中调用
- 只能顶层调用，不能在循环、条件或嵌套函数中调用，保证 Hook 调用顺序稳定
原理：React 通过维护一个 Hook 链表和调用顺序，关联 Hook 状态与对应组件实例，实现状态的持久化和更新

2.4 自定义 Hooks

将组件中可复用的状态逻辑抽象成函数
函数内部调用其他 Hooks，实现逻辑复用与拆分
提高代码复用性和可维护性

三、常见误区或面试陷阱

误用 Hook 规则，导致调用顺序不稳定
过度使用 useEffect，产生复杂副作用链和性能问题
误解 useMemo 和 useCallback 的使用时机和作用
忽略依赖项数组，导致副作用不正确执行
不了解自定义 Hooks 是普通函数，不能在其中调用 Hook 规则外的逻辑

2. 对比 Class 组件的 Mixin 模式，Hooks 如何解决逻辑复用问题？Mixin 的主要缺陷是什么

题目要点

Mixin 依赖多继承，存在命名冲突、状态污染、难维护等问题
Hooks 通过函数组合和自定义 Hook 实现逻辑复用，避免冲突和复杂继承
Hooks 提升代码可读性、维护性、测试性和类型支持
React 官方推荐使用 Hooks 替代 Mixin 模式

参考答案

一、考察点

理解 Class 组件中 Mixin 的工作方式及缺陷
掌握 Hooks 解决组件逻辑复用的机制和优势
比较两种方案在代码组织、维护性和复用性上的差异
理解现代 React 设计理念和组件开发最佳实践

二、参考答案

2.1 Mixin 模式及其缺陷

Mixin 定义：通过多个类混入（mixin）共享方法和状态，Class 组件通过继承或组合多个 mixin 实现代码复用

阿里巴巴-社招-2年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 12:14:53 +0000

本轮要点： call、apply和bind、性能优化、浏览器渲染过程、浏览器的缓存机制

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 假设现在有一个老项目需从React 17升级至React 18，你会怎么做

题目要点

先升级 react/react-dom 版本，再更改根渲染方式为 createRoot
理解 React 18 并发特性，调整相关组件代码
确认并升级第三方依赖，保证兼容性
充分测试，监控性能，平滑迁移

参考答案

一、考察点

理解 React 18 的新特性及其对应用的影响
掌握 React 18 升级步骤及兼容性处理
了解新版本的渲染机制变化（如并发特性）
熟悉常见问题排查与升级风险规避

二、参考答案

2.1 升级前准备

阅读官方升级指南（React 官方文档提供详尽升级说明）
检查项目依赖版本，确保 React 相关依赖（如 ReactDOM、react-scripts 等）兼容 React 18
备份代码及建立测试环境，保证升级过程可回滚

2.2 主要升级步骤

1）升级 React 和 ReactDOM 版本

npm install react@18 react-dom@18

或

yarn add react@18 react-dom@18

2）更新根节点渲染方式

React 18 引入了新的根 API：createRoot，替代 React 17 的 ReactDOM.render。

阿里巴巴-社招-1年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 11:54:27 +0000

本轮要点： react hooks、性能优化

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 你们项目为什么选Redux而非MobX

题目要点

Redux 强调可预测性、单向数据流、纯函数 reducer，适合复杂项目
丰富的调试工具和社区中间件支持开发效率和可维护性
MobX 响应式自动追踪，适合快速开发，但隐式依赖增加调试难度
团队规模和项目复杂度是选择状态管理方案的关键因素
现代 Redux 已大幅简化，代码冗余感降低

参考答案

一、考察点

是否理解 Redux 和 MobX 两种状态管理库的设计理念与差异
是否能结合项目实际需求，论述选择某一方案的合理性
是否掌握 Redux 在复杂状态管理中的优势与局限
是否能表达对团队协作、维护性和性能的综合考虑

二、参考答案

1.1 原理说明

Redux

基于 Flux 架构思想，使用单一全局状态树（Store）
状态只读，通过派发（dispatch）纯函数（Reducer）更新状态
强调不可变数据和纯函数，方便调试和时间旅行（time-travel debugging）
侧重于可预测性和可维护性

MobX

采用响应式编程思想，通过可观察（observable）数据和自动追踪依赖实现状态同步
支持隐式状态更新，使用更接近传统面向对象编程
适合快速开发，较少样板代码

1.2 选择 Redux 的主要理由

1）明确的状态流向和可预测性

Redux 的单向数据流和纯函数 reducer 让状态变化过程清晰、易追踪
在多人协作中，可以方便定位状态更新的具体原因，减少调试成本

2）强大的开发者工具支持

Redux DevTools 提供时间旅行、快照对比、action 日志等，极大提升调试体验
有丰富的中间件生态（如 redux-thunk、redux-saga），便于处理复杂异步逻辑

3）适合大型复杂项目

状态结构复杂时，Redux 更便于组织和维护，模块化拆分 reducer 明确职责
明确的规范和社区共识，团队成员易于理解和统一编码风格

4）可测试性强

Reducer 是纯函数，易于单元测试，保证业务逻辑可靠

1.3 不选 MobX 的考虑

1）隐式依赖难以追踪

MobX 的自动依赖追踪机制带来状态变化的隐式性，可能导致调试困难
团队成员对响应式原理不熟悉时，维护成本升高

2）状态变化不够可预测

MobX 允许任意地方修改状态，可能出现难以预料的副作用
不利于实现严格的状态管理和权限控制

3）社区规范和中大型项目生态

Redux 生态成熟且社区规范丰富
MobX 在某些复杂场景下不够透明，团队风险较大

1.4 常见误区或面试陷阱

❌ 误区一：认为 MobX 性能一定优于 Redux

实际性能差异因项目而异，合理使用 Redux 也能实现优秀性能

❌ 误区二：Redux 代码一定繁琐难写

现代 Redux 工具（如 Redux Toolkit）极大简化开发体验，减少样板代码

❌ 误区三：认为 MobX 是“魔法”，不需要学习状态管理原理

响应式原理本身也需要深入理解，否则容易导致维护难题

2. 项目中提到“首屏加载优化1.5秒”，具体如何实现

题目要点

首屏加载优化核心在于减少首屏资源体积和请求数量
结合 SSR/SSG 预渲染，缩短白屏时间
动态拆分代码，懒加载非关键资源
充分利用浏览器缓存和 CDN
监控指标涵盖 FCP、TTI，持续迭代优化

参考答案

一、考察点

理解首屏加载的定义及关键性能指标（如 FCP、TTI）
掌握多种前端性能优化手段，涵盖资源、网络、渲染等层面
能结合具体技术和业务场景，说明优化实施细节
理解优化过程中的权衡与监控方法

二、参考答案

1.1 首屏加载的概念与性能指标

首屏加载：用户打开页面到看到页面主要内容（首屏内容）完整渲染的时间

滴滴-社招-5年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 06:07:53 +0000

本轮共 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
配合工具检测和团队规范防范

参考答案

一、考察点

理解循环依赖的概念及危害

滴滴-社招-3年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 03:27:35 +0000

本轮要点： 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 等极端设备考虑额外样式方案
注重兼容性测试，处理浏览器差异

参考答案

考察点

是否了解常见的移动端适配方案及原理
是否能结合业务场景选择合理的适配策略
是否关注兼容性、用户体验和性能平衡
是否能系统性总结适配技术手段的优缺点

参考答案

一、适配问题的来源

移动端设备种类繁多，存在如下适配挑战：

滴滴-社招-2年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 02:28:18 +0000

本轮要点： 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 轮 · 二面

Mon, 28 Jul 2025 01:53:33 +0000

本轮要点： 浏览器渲染过程

本轮共 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 接口封装层，统一管理后端请求

二、开发时的切入点及流程

理解业务和需求
- 先明确当前任务目标和业务逻辑
- 查阅需求文档、设计稿和接口文档
定位项目入口
- 从入口文件入手，理清项目启动流程
- 理解路由配置，确定目标页面
代码结构梳理
- 理解页面层与组件层的关系
- 查找关键组件和功能模块的实现
查看状态管理和数据流

字节-社招-6年（3-1） · 第 1 轮 · 二面

Sun, 27 Jul 2025 12:12:49 +0000

本轮共 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 项目是设计与开发深度融合的技术创新，通过自动解析设计稿并生成高质量前端代码，极大提升开发效率和设计一致性。该项目涉及设计解析、智能映射、代码生成和性能优化多个技术环节，虽存在一定技术挑战，但未来有广阔应用前景。

字节-抖音短视频-社招-5年 · 第 1 轮 · 二面

Sun, 27 Jul 2025 10:01:22 +0000

本轮要点： 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、插件、工具链）给出实操方案
表达对“精简资源体积 = 提升性能体验”逻辑的理解
给出优化前后定量结果更有说服力

参考答案

考察点

● 资源优化能力（代码压缩、依赖精简、图片优化等）

考察候选人对性能优化的掌握是否落到实处。

字节-商业化-社招-4年 · 第 1 轮 · 二面

Sun, 27 Jul 2025 09:29:18 +0000

本轮要点： 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 轮 · 二面

Fri, 25 Jul 2025 07:26:12 +0000

本轮共 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 轮 · 二面

Fri, 25 Jul 2025 05:48:41 +0000

本轮概述： 二面，以实际场景、设计架构出发，考察候选人的综合知识和深度

本轮共 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 轮 · 二面

Thu, 24 Jul 2025 15:06:51 +0000

本轮要点： 二面重点考察前端框架理解与性能优化能力，同时关注工程化处理思维和大规模数据处理能力。

本轮共 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 填充。

美团-优选-校招 · 第 1 轮 · 二面

Tue, 22 Jul 2025 09:24:00 +0000

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 为什么大二就开始实习呢？当时是怎么考虑的？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：首先说明实习的初衷和驱动力，然后结合个人成长和职业规划阐述实习带来的收获和影响，最后可以适当提及对未来发展的思考。

参考答案

其实，我选择在大二就开始实习，主要是出于对前端开发浓厚的热情和对实践经验的渴望。当时在学校学习理论知识时，我逐渐意识到，真正的项目开发与课堂学习存在很大差异。我非常希望能够尽早接触到真实的项目环境，了解企业级开发的流程、规范以及团队协作的方式。

我的考虑是多方面的。首先，我想通过实习来验证自己所学知识的实用性，并在实际工作中发现自身的不足，从而有针对性地提升技能。其次，我相信尽早融入职场能够帮助我更好地理解行业需求，明确未来的职业发展方向。例如，在第一个实习项目中，我参与了一个电商后台管理系统的开发，亲身体验了从需求分析到功能上线的全过程，这让我对前端开发的整体链路有了更深刻的理解，也意识到代码质量、模块化和组件化在大型项目中的重要性。这段经历不仅提升了我的编码能力，也让我学会了如何与产品、设计、后端团队高效沟通协作。可以说，大二的实习对我而言是一个非常重要的转折点，它让我更早地将理论与实践结合，为后续的学习和职业发展打下了坚实的基础。

2. 在实习过程中，有没有发现自己对前端的理解和之前在学校学习时有什么不同？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：从理论与实践、个人能力成长、团队协作与项目流程、以及对行业理解等几个方面进行对比和阐述。

参考答案

在实习过程中，我对前端的理解确实发生了很大的转变，与之前在学校学习时有了显著的不同。在学校，我们更多地关注理论知识、算法和数据结构，以及一些基础框架的用法，代码往往是为了实现某个功能点而存在，相对独立且注重单一技术点的掌握。比如，我们可能会花很多时间去学习React的生命周期、Redux的状态管理原理，但很少有机会将其应用到真实的、复杂的业务场景中。

然而，实习让我意识到，前端开发远不止写代码那么简单。首先，理论与实践的差异：在实际项目中，需要考虑的不仅仅是技术实现，更要关注业务需求、用户体验、性能优化、代码可维护性等多个维度。我学到，一个"好"的解决方案，不仅要能跑，还要易于维护、易于扩展。例如，在学校里写组件可能只关注功能实现，但在实习中我学会了如何设计可复用、可配置的通用组件，并考虑其在不同业务场景下的兼容性。其次，团队协作与项目流程的重要性远超我的预期。在学校，我们更多是独立完成作业，而在公司，一个项目是多人协作的成果，需要频繁地与产品经理沟通需求，与设计师确认交互，与后端工程师对接接口。我学会了如何通过Code Review、Git工作流来保证团队代码质量和开发效率。

最后，我对前端的广度和深度有了更全面的认知。之前可能觉得前端就是"写页面"，现在才发现它涉及性能优化、跨端开发、工程化、自动化测试、前端安全等诸多领域。实习让我从一个"代码实现者"逐渐向一个"问题解决者"转变，开始更系统地思考如何构建一个高质量、高效率、可持续迭代的前端应用。这让我更加明确了未来学习和发展的方向，也激发了我对前端技术更深层次探索的兴趣。

3. 为什么选择前端开发这个方向？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：可以从个人兴趣、行业前景、技术特性、以及早期学习或项目经历等方面切入，阐述选择前端的理由。

参考答案

我选择前端开发这个方向，主要是基于多方面的考虑和个人兴趣的驱动。最初接触编程时，我被前端所能实现的直观、可见的用户界面深深吸引。相对于后端更偏向逻辑和数据处理，前端能够将代码立即转化为用户可以直接交互和感知的视觉呈现，这种即时反馈的成就感对我来说非常重要。我喜欢通过自己的代码，让用户能够流畅、舒适地使用产品，并从中获得良好的体验。

其次，前端技术栈的快速发展和广阔的行业前景也是吸引我的重要因素。Web技术日新月异，不断有新的框架、工具和解决方案涌现，这让我觉得前端是一个充满活力和挑战的领域，能够持续学习和成长。从最早的jQuery到现在的React、Vue，再到小程序、跨端框架，前端的应用场景越来越丰富，这让我看到了前端工程师在未来技术发展中的巨大潜力。

此外，在校期间的一些项目经历也进一步坚定了我选择前端的决心。我曾参与开发过一个校园二手交易平台，从零开始搭建前端界面，设计用户交互流程，并解决了一系列兼容性、性能优化等问题。在这个过程中，我不仅提升了技术能力，更重要的是，我从中找到了解决问题的乐趣和创造的成就感。我喜欢与设计师、产品经理沟通，将抽象的需求转化为具体、友好的用户界面，这种跨领域的协作也让我觉得前端工作充满了挑战性和趣味性。综合这些因素，我坚信前端开发是一个既能发挥我兴趣特长，又能持续学习和成长的理想方向。

4. 学前端大概有多久了？之前是否有接触过其他编程语言？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：首先说明学习前端的时长，然后提及之前接触过的其他编程语言及其对前端学习的帮助，最后可以突出自己持续学习的能力。

参考答案

我接触前端开发大约有三年时间了。从大二开始，我就对前端产生了浓厚的兴趣，并系统地投入到学习中。这三年里，我从基础的HTML、CSS、JavaScript开始，逐步深入学习了React、Vue等主流前端框架，以及Webpack、Vite等构建工具，并参与了一些实际项目开发。

在学习前端之前，我在大学一年级接触过C++和Java等编程语言。C++的学习让我对底层逻辑、数据结构和算法有了初步的认识，培养了我的编程思维和解决问题的能力。而Java的学习则让我对面向对象编程、软件工程的思想有了更深的理解，尤其是在后端开发实践中，我了解了前后端分离、API接口设计等概念，这对于我理解前端与后端的数据交互和系统架构非常有帮助。这些早期的编程语言学习经历，为我后续学习JavaScript和前端框架打下了坚实的基础，让我能够更快地理解前端技术的原理和实现机制，例如，对数据结构和算法的理解，让我能够更好地优化前端应用的性能，提升用户体验。

总的来说，虽然前端是我主要深耕的方向，但其他编程语言的学习经历拓宽了我的技术视野，也让我能够从更全面的角度去思考和解决前端开发中的问题。我始终保持着对新技术的学习热情，并乐于将不同领域的知识融会贯通，应用到实际项目中。

5. 你提到的两个项目，分别是什么？简单介绍一下它们的背景和功能。

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：分别介绍项目的背景、你的角色、主要负责的功能、以及项目中使用到的关键技术栈。强调项目亮点和你的贡献。

参考答案

好的，我很乐意介绍我参与的两个主要项目。

第一个项目是一个在线教育平台的前端重构项目。背景是公司原有的教育平台技术栈老旧，用户体验不佳，且维护成本高昂。我作为前端开发实习生，主要负责其中"课程详情页"和"直播互动模块"的重构工作。课程详情页的核心功能是展示课程内容、教师信息、课程大纲和用户评论，并支持课程购买和加入学习。直播互动模块则需要实现实时弹幕、点赞、提问和答疑等功能，确保高并发下的数据同步和流畅交互。

在这个项目中，我主要负责：

课程详情页： 使用 React + Redux 技术栈，重构了页面组件，优化了数据请求和渲染逻辑，显著提升了页面加载速度和用户交互体验。特别是在图片懒加载和评论区无限滚动方面进行了性能优化，将首屏加载时间缩短了约30%。
直播互动模块： 参与了WebSocket通信的实现，确保弹幕消息的实时推送和展示。同时，为了保证在高并发场景下的性能，我们采用了虚拟列表技术来渲染大量弹幕，避免了DOM节点的过度渲染导致的页面卡顿。我还负责了前端的输入校验和敏感词过滤，确保互动内容的合规性。

第二个项目是一个企业内部的"项目管理系统"。这个系统的背景是公司内部各部门的项目信息分散，缺乏统一的管理和协作平台，导致沟通效率低下。我主要负责其"任务看板"和"数据可视化报表"模块的开发。任务看板旨在提供一个直观的Kanban视图，展示项目的任务状态（待办、进行中、已完成），并支持拖拽排序、任务分配、截止日期设置等功能。数据可视化报表则需要将项目进度、成员工作量、缺陷趋势等数据通过图表形式清晰地呈现。

在这个项目中，我主要负责：

任务看板： 采用了Vue 3 + Vuex + Element UIPlus 技术栈，实现了任务的增删改查和拖拽功能。为了提升用户体验，我利用Vue的响应式特性和虚拟DOM，确保了大量任务卡片操作时的流畅性。同时，设计并实现了自定义拖拽指令，提升了组件的通用性和可维护性。
数据可视化报表： 集成了ECharts图表库，根据后端提供的API数据，实现了项目概览、成员工作负荷、Bug趋势等多种报表的动态渲染。我负责了数据的前端处理和格式化，确保图表能够准确、清晰地展示数据，并通过组件化封装，使得报表可以灵活配置和复用。在实现过程中，也针对数据量较大时的图表渲染性能做了优化，例如按需加载图表组件和数据预处理。

通过这两个项目，我不仅巩固了前端基础和框架应用能力，更重要的是，学习了如何在实际复杂项目中进行需求分析、技术选型、性能优化以及团队协作。这些经验让我对前端工程化和项目管理有了更深入的理解。

百度-文库-校招 · 第 1 轮 · 二面

Sat, 19 Jul 2025 07:40:07 +0000

本轮要点： 二面深入考察了前端核心知识的应用和原理理解。重点包括CSS优先级、闭包与内存管理、JavaScript继承的多种实现方式、原型链的深层理解、虚拟DOM的性能优化原理以及Vue框架的高级特性。题目更侧重于“为什么”和“如何实现”，要求候选人不仅知其然，更要知其所以然。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 自我介绍，没有实习过。

题目要点

沟通表达能力：能否清晰、自信地介绍自己。
潜力与热情：在没有实习经历的情况下，如何通过个人项目、技术博客、开源贡献等来证明自己的技术热情和学习能力。
求职动机：为什么选择这个岗位和公司。

参考答案

此题为个人经验总结，请根据自身情况作答。核心是突出自己的优势、学习能力和对前端的热情，用项目经验或学习成果来弥补实习经历的不足。

2. 最终颜色是什么？为什么？

<div class="box" id="content" style="color:red"></div>

.box { color: blue }
#content { color: green }

题目要点

CSS优先级（Specificity）：这是CSS核心概念之一，考察对不同选择器权重的理解和计算能力。
CSS规则来源：是否了解行内样式、内部样式表、外部样式表的优先级关系。

参考答案

1.1 原理说明

CSS的优先级（Specificity），也常被称为特殊性或权重，是浏览器用来决定当多个规则应用到同一个元素上时，哪一条规则生效的计算方法。

优先级的计算规则可以总结为一个四元组 (a, b, c, d)：

a: 行内样式（Inline styles）：如 style="color: red;"。如果存在，a为1，否则为0。
b: ID选择器：如 #content。b为ID选择器的数量。
c: 类选择器、属性选择器、伪类选择器：如 .box, [type="text"], :hover。c为这些选择器的总数量。
d: 标签选择器、伪元素选择器：如 div, ::before。d为这些选择器的总数量。

比较规则：从a开始，逐位比较。a大的胜出；如果a相同，则比较b，b大的胜出；以此类推。只有在优先级完全相同时，才会根据样式在代码中出现的顺序来决定，“后来者居上”。

另外，!important声明拥有最高优先级，它会覆盖任何其他声明，但应避免滥用。

1.2 核心用法 + 示例代码

我们来分析题目中的三个样式规则：

行内样式：style="color:red"
- 优先级计算：a=1, b=0, c=0, d=0 -> (1, 0, 0, 0)
ID选择器：#content { color: green }
- 优先级计算：a=0, b=1, c=0, d=0 -> (0, 1, 0, 0)
类选择器：.box { color: blue }
- 优先级计算：a=0, b=0, c=1, d=0 -> (0, 0, 1, 0)

比较结果：

百度-地图-秋招 · 第 1 轮 · 二面

Sat, 19 Jul 2025 06:27:27 +0000

本轮要点： 本轮面试考察了前端基础能力、网络协议、Vue响应式原理、构建工具底层实现，以及手写能力与业务建模能力，重点在于深入理解底层原理和综合解决问题的能力。

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 讲一下你的前端模块化的理解

题目要点

模块化发展历程、ES Module 和 CommonJS 区别、模块加载机制、Tree-shaking原理。

参考答案

原理说明

模块化的目的：为了提高代码的可维护性、复用性和依赖管理能力，将代码组织为独立模块。
发展历程：
- 无模块化（全局变量）
- IIFE 模式（立即执行函数）
- CommonJS（Node.js 标准，同步加载）
- AMD / CMD（异步模块定义）
- ES Module（ES6 标准模块系统，浏览器原生支持）
CommonJS vs ES Module：
- CommonJS 是同步加载，适用于服务端；ES Module 是静态分析+异步加载，适用于浏览器。
- ES Module 支持 Tree-shaking，CommonJS 不支持。

核心用法 + 示例代码

// ES Module
export const add = (a, b) => a + b;
import { add } from './utils.js';

常见误区

将 ES Module 和 CommonJS 混用，导致打包失败。
忽视 ES Module 是静态结构，不能在运行时动态导入变量名模块（需使用 import()）。

2. HTTP/2 解决 HTTP/1.1什么问题？

题目要点

HTTP/2 优化点、HTTP/1.1 的瓶颈、性能原理

字节-今日头条-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 08:02:46 +0000

本轮要点： 本次面试主要考察前端基础知识、项目经验和算法能力。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 简单介绍一下你上一段实习中觉得做的比较好的项目

题目要点

● 主观型问题，无唯一标准答案。 ● 面试官主要考察你的项目理解深度、技术选型能力、问题解决能力、以及对项目成果的复盘与表达能力。 ● 建议的答题结构：首先简要介绍项目背景和你的角色；接着详细阐述你在项目中负责的具体工作、遇到的挑战及如何解决；最后总结项目成果和你的收获。

参考答案

我在XX公司实习期间，参与了一个内部运营效率工具的开发，其中我主导了"智能数据报表系统"的前端部分，这个项目我个人觉得做得比较好。项目背景是，之前的运营数据统计完全依赖人工手动导出和整理，效率低下且易出错。我们团队的目标是构建一个自动化、可视化的报表系统，让运营人员能够实时查看核心数据指标。

我主要负责报表的可视化组件开发和数据交互逻辑。在技术选型上，我没有简单地套用现有图表库，而是深入调研了业务需求，最终选择了ECharts进行定制化开发，因为它的灵活性和丰富图表类型能很好地满足我们多样化的报表展示需求。开发过程中最大的挑战是如何处理海量数据在前端的渲染性能问题。初期我们尝试直接加载全部数据，导致页面卡顿严重。我查阅资料并与后端协商，最终采用了数据分批加载和前端数据虚拟化的方案，即只加载当前视图所需数据，并对表格和图表进行局部渲染。这不仅大幅提升了页面响应速度，也降低了后端的数据传输压力。

另一个亮点是，我设计并实现了一个可配置的报表生成器。运营人员可以通过拖拽组件、配置数据源和筛选条件，自定义生成各种报表，极大地提高了他们的工作效率，也减少了开发人员的维护成本。在项目上线后，我通过用户反馈持续迭代，例如增加了数据导出功能、优化了图表联动效果，使得系统更加完善。这个项目让我深刻体会到了前端工程化和性能优化的重要性，也锻炼了我从需求分析到方案设计、再到具体实现和持续优化的全链路项目能力。

2. 想知道你们的项目大概是什么样的结构，你在开发的时候会从什么地方下手？

题目要点

● 主观型问题，无唯一标准答案。 ● 面试官主要考察你对项目整体架构的理解、系统性思维、以及实际开发流程的把控能力。 ● 建议的答题结构：首先概述项目采用的架构模式（如微前端、Monorepo、单体应用等）；接着描述核心模块的划分和技术栈；然后详细说明当你接到一个开发任务时，会从哪些方面着手分析和实现；最后可以提及一些你在开发流程中的最佳实践或思考。

参考答案

我们团队负责的XX系统，其整体架构是一个典型的微前端应用。具体来说，我们采用了基于qiankun的微前端方案，将整个系统拆分为多个独立的子应用，例如用户管理、订单中心、数据分析等。每个子应用都可以独立开发、独立部署，但在主应用中进行集成和路由管理。这样的好处是，团队成员可以专注于各自的子应用开发，降低了耦合度，也便于技术栈的演进和模块的复用。

当我接到一个开发任务时，通常会遵循以下步骤：

首先是需求分析和理解。我会仔细阅读需求文档，明确用户故事和业务目标，如果存在不清晰的地方，会主动与产品经理或设计师沟通，确保我对需求的理解是准确和全面的。这一步至关重要，它决定了后续开发的方向。

其次是技术方案设计。我会根据需求，结合当前项目的架构和技术栈，思考实现方案。这包括：是否需要新增组件或模块？数据流如何设计？接口如何定义？是否涉及到性能优化或兼容性问题？例如，如果是一个新功能模块，我会考虑其在微前端架构下的集成方式，以及与主应用之间的通信机制。如果涉及复杂的数据处理，我会优先考虑数据在前端的缓存策略，以及如何减少不必要的渲染。

接着是代码实现。我会根据设计好的方案，开始编写代码。我会严格遵循团队的代码规范和组件化原则，确保代码的可读性和可维护性。在实现过程中，我会注重模块的拆分和函数的封装，避免出现冗余代码。

在开发过程中，我非常重视自测和调试。我会编写单元测试和集成测试，确保自己实现的功能符合预期。如果遇到问题，会利用浏览器开发工具进行调试，分析问题原因并及时解决。此外，我也会关注代码的性能，例如使用Chrome DevTools进行性能分析，寻找优化点。

最后是代码评审和部署。在完成开发和自测后，我会提交代码进行代码评审，听取团队成员的建议，并对代码进行优化。通过评审后，会按照CI/CD流程进行部署，并在部署后关注线上监控，确保功能稳定运行。

这种结构化的开发流程，使得我在面对复杂任务时能够有条不紊地进行，并能及时发现和解决问题，保障了项目的开发质量和效率。

3. IntersectionObserver的事件回调是宏任务还是微任务？如何判断呢？

题目要点

● JavaScript 事件循环机制：考察对宏任务和微任务的理解，以及它们在事件循环中的执行顺序。 ● 浏览器 API 原理：考察对 IntersectionObserver 这一 Web API 的底层工作原理的掌握，特别是其回调函数的执行时机。 ● 实际应用与判断：考察如何在实际开发中判断异步操作的类型，并理解其对程序性能和行为的影响。

参考答案

1.1 原理说明

IntersectionObserver 的事件回调是微任务。

宏任务 (MacroTask)：包括 script (整体代码)、setTimeout、setInterval、setImmediate (Node.js 独有)、I/O、UI 渲染等。每次事件循环只会执行一个宏任务，执行完后会检查微任务队列。
微任务 (MicroTask)：包括 Promise.then()/.catch()/.finally()、MutationObserver、process.nextTick (Node.js 独有)、queueMicrotask。微任务在当前宏任务执行完毕后，下一个宏任务开始之前执行，且会清空所有微任务。

IntersectionObserver 的回调函数被设计为微任务，是为了保证在当前帧的 DOM 更新完成之后、但浏览器渲染之前执行。这样可以确保在回调函数中进行的 DOM 操作能够及时反映在当前帧的渲染中，避免了不必要的布局抖动或视觉闪烁。

阿里-蚂蚁金服-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:05:39 +0000

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 自我介绍

题目要点

自我认知。

参考答案

您好！我是一名对前端开发充满热情的工程师，拥有[X]年的开发经验。我熟练掌握HTML、CSS和JavaScript等前端技术，并在多个项目中运用Vue、React等框架构建用户友好的应用。在大学期间，我主修计算机科学，这为我打下了坚实的编程基础。通过参与各类项目，我不仅提升了技术能力，还培养了良好的团队协作和问题解决能力。我热爱学习新技术，经常阅读技术博客并参与开源项目。在之前的实习和工作中，我积累了丰富的实战经验，能够独立完成项目开发并优化性能。我期待能在贵公司继续我的前端开发之旅，为团队贡献我的技能和热情。

2. 什么时候开始接触前端？

题目要点

学习经历。

参考答案

我是在大学二年级的时候开始接触前端开发的。当时，我选修了一门网页设计与开发的课程，这让我对前端开发产生了浓厚的兴趣。从那时起，我便开始系统地学习HTML、CSS和JavaScript等前端技术，并通过大量的实践项目不断提升自己的技能。毕业后，我继续深入学习前端框架和工具，如Vue、React等，并在实际工作中不断积累经验。

3. 复杂度比较高的项目有哪些

题目要点

项目经验。

参考答案

我参与过一个大型电商平台的前端开发，该项目的复杂度较高，主要体现在以下几个方面：

1. 技术栈丰富：项目中使用了Vue.js、Vuex、Vue Router、Vite、TypeScript等技术，结合了 Vuex 进行状态管理，Vue Router 实现了复杂的路由管理，Vite 作为构建工具提高了开发效率。
2. 性能要求高：由于平台需要支持大量的商品列表和用户并发访问，对性能的要求极高。我们通过代码分割、懒加载、图片优化等手段确保了页面的快速加载和流畅交互。
3. 功能模块复杂：涉及商品展示、购物车、订单管理、用户中心等多个功能模块，各模块之间需要紧密协作和数据共享。
4. 跨团队协作：前端团队与后端团队、设计团队紧密合作，确保项目的顺利交付。

4. 实习中的全栈部分做了什么

题目要点

全栈开发能力。

参考答案

在实习期间，我参与了多个全栈开发项目，主要负责以下工作：

1. 后端接口开发：使用Node.js和Express框架开发RESTful API接口，与前端进行数据交互。我设计并实现了用户认证、商品管理、订单处理等功能的API。
2. 数据库设计与操作：负责MySQL数据库的设计和优化，包括表结构设计、索引优化和查询性能提升。编写SQL语句进行数据的增删改查操作。
3. 前端与后端的联调：确保前后端数据格式的一致性和接口的稳定性，处理可能出现的跨域问题和数据验证问题。
4. 部署与运维：参与项目的部署工作，使用Docker容器化应用，并通过Nginx进行反向代理配置。监控应用的运行状态，及时处理线上问题。

5. Vue 和 React 都是什么时候开始接触的

题目要点

技术学习历程。

参考答案

我是在大学期间开始接触Vue和React的。具体来说：

1. Vue：在大三时，我通过一个个人项目开始学习Vue。当时，我被Vue简洁的语法和强大的组件化特性所吸引，于是深入研究了Vue的文档，并通过实践项目掌握了Vue的基本使用方法，包括组件的创建、数据绑定、事件处理等。
2. React：在大四时，我为了扩展自己的技术栈，开始学习React。我通过官方文档和在线教程了解了React的组件化思想、JSX语法以及Hooks的使用。通过一个小型的社交媒体项目，我实践了React的单向数据流和状态管理。

6. 对原生 JS 如何学习的，掌握程度怎么样

题目要点

JavaScript能力。

阿里-阿里妈妈-实习 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:04:12 +0000

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. Flex布局中flex-grow与flex-shrink的计算规则？

题目要点

CSS布局。

参考答案

在Flex布局中，flex-grow和flex-shrink属性用于控制子元素在可用空间内的扩展和收缩行为。它们的计算规则如下：

flex-grow：
1. 定义：定义项目的扩展比例，即项目在主轴方向上可占有的额外空间的比例。
2. 计算规则：剩余空间按项目flex-grow值的比例分配。如果所有项目的flex-grow值之和大于1，则按比例分配；如果小于1，则先分配剩余空间。
3. 示例：如果有两个子元素，flex-grow分别为1和2，总剩余空间为300px，则第一个子元素获得100px，第二个获得200px。
flex-shrink：
1. 定义：定义项目的收缩比例，即项目在主轴方向上需要收缩时的比例。
2. 计算规则：当总项目大小超过容器可用空间时，项目按flex-shrink值的比例收缩。收缩的最小尺寸受min-width或min-height限制。
3. 示例：如果有两个子元素，flex-shrink分别为1和2，总超出行空间为100px，则第一个子元素收缩约33.33px，第二个收缩约66.66px。
完整计算步骤：
1. 计算总可用空间：容器主轴长度减去所有项目初始尺寸（flex-basis或未设置时的内容尺寸）。
2. 判断剩余空间：
  1. 若剩余空间为正，按flex-grow分配扩展空间。
  2. 若剩余空间为负，按flex-shrink分配收缩空间。
3. 计算比例：每个项目的比例为flex-grow或flex-shrink值除以所有项目对应值之和。
4. 分配空间：按比例将剩余空间分配或从项目中扣除。
flex属性：flex是flex-grow、flex-shrink和flex-basis的简写形式。例如，flex: 1 1 0表示flex-grow: 1、flex-shrink: 1、flex-basis: 0。这在等比例分配剩余空间时非常有用。

2. 讲一下js闭包

题目要点

什么是闭包

简单理解就是函数中嵌套函数。我们都知道局部变量我们是无法访问的，但是通过闭包可以做到。

// 正常访问
var lan = 'zh';
function hello(){
 var name = '前端未来';
}
console.log(name)//很明显'undefined'

// 换成闭包
function hello(){
 var name = '前端未来';
 function demo(){
 console.log(name)//打印：前端未来
 }
}

闭包的应用场景

1. 数据封装和隐私

闭包可以用来封装数据和功能，创建具有私有变量和公共接口的模块。

应用

创建具有私有状态的模块或对象。

2. 函数工厂

闭包用于创建返回函数的函数，这些返回的函数可以维持状态。

阿里-国际电商-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:02:07 +0000

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. React/Vue/Angular框架熟悉哪个？对比一下

题目要点

前端框架。

参考答案

我对React和Vue较为熟悉，以下是对这三大框架的对比：

React：
1. 优点：
  1. 组件化：React采用组件化开发，将复杂的用户界面拆分为多个可复用的组件，提高代码的可维护性和复用性。
  2. 虚拟DOM：使用虚拟DOM优化DOM操作，减少页面重绘和回流，提升性能。
  3. 生态丰富：拥有庞大的生态系统，如Redux、React Router等，可满足各种复杂的开发需求。
  4. 社区活跃：社区庞大，更新迅速，遇到问题时容易找到解决方案。
2. 缺点：
  1. 学习曲线：对初学者来说，需要学习JSX语法和组件化的思想，有一定学习成本。
  2. 配置繁琐：项目搭建和配置相对复杂，需要手动配置Webpack等构建工具。
Vue：
1. 优点：
  1. 易上手：语法简洁，文档清晰，容易上手，适合初学者快速入门。
  2. 渐进式框架：可以逐步引入Vue，与现有项目或其他技术结合使用，灵活性高。
  3. 模板语法：使用HTML模板，对熟悉HTML和JavaScript的开发者更友好。
  4. 性能优化：也采用虚拟DOM，性能表现良好。
2. 缺点：
  1. 生态不够丰富：相较于React，生态和社区稍小，插件和库的选择相对有限。
  2. 大型项目支持：在处理大型复杂项目时，可能不如React和Angular成熟。
Angular：
1. 优点：
  1. 全栈解决方案：提供从前端到后端的一整套解决方案，包括路由、状态管理、表单处理等。
  2. 强类型系统：基于TypeScript开发，具有强类型检查，有助于大型项目的代码维护和团队协作。
  3. 依赖注入：内置依赖注入系统，方便管理组件和服务之间的依赖关系。
  4. 适合企业级应用：在开发大型企业级应用时，提供了一套完整的架构和规范。
2. 缺点：
  1. 学习曲线陡峭：对初学者来说，需要掌握TypeScript、依赖注入、模块化等概念，学习成本较高。
  2. 灵活性较低：框架较为庞大，定制化程度不如React和Vue高，不适合小型项目快速开发。
  3. 社区相对较小：相较于React，社区活跃度和更新速度稍逊一筹。

2. React Hooks闭包陷阱的产生原因？

题目要点

React Hook 的闭包陷阱是一个常见的问题,它发生在使用 Hook 时,特别是在处理事件处理函数或异步操作时。

闭包陷阱的本质是,在 Hook 内部定义的函数会捕获 Hook 函数执行时的状态,而不是最新的状态。这可能会导致一些意想不到的行为,比如事件处理函数无法访问最新的状态,或者异步操作使用了过期的数据。

造成这个问题的原因是,React Hook 的设计使得组件函数在每次渲染时都会重新定义内部的函数,而这些函数会关闭当时的状态。

解决这个问题的主要方案有以下几种:

使用 useCallback Hook:

阿里-灵犀互娱-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:00:30 +0000

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 你是什么时候开始学前端的

题目要点

学习经历。

参考答案

我接触前端开发是在大学二年级的时候。当时，我选修了一门网页设计与开发的课程，这让我对前端开发产生了浓厚的兴趣。从那时起，我便开始系统地学习HTML、CSS和JavaScript等前端技术。我通过阅读书籍、在线教程和官方文档，打下了坚实的基础。同时，我积极参与实践项目，不断提升自己的技能。毕业后，我继续深入学习前端框架和工具，如Vue、React等，并在实际工作中不断积累经验。这段学习经历不仅让我掌握了前端开发的技术，还培养了我对前端开发的热爱和持续学习的态度。

2. 为什么选择前端这个方向呢，是如何学习前端的

题目要点

学习动机与方法。

参考答案

我选择前端开发是因为它结合了技术和创意，能够直接看到自己的代码转化为用户界面，这种即时反馈让我感到非常满足。同时，前端领域技术更新快，充满挑战，能够不断学习新知识。我通过在线课程（如Coursera、Udemy）、官方文档（如MDN Web Docs）和实践项目学习前端。我积极参与开源社区（如GitHub），与其他开发者交流经验，并通过阅读技术博客（如CSS-Tricks、JavaScript.info）保持对新技术的敏感度。这种多渠道的学习方式让我能够全面掌握前端开发的技能，并在实践中不断提升。

3. 说一下你觉得前端和后端有什么区别

题目要点

前后端理解。

参考答案

前端和后端在技术栈、运行环境、关注点等方面有显著区别：

技术栈：
1. 前端：主要使用HTML、CSS、JavaScript及其框架（如Vue、React、Angular）进行开发。例如，使用Vue.js构建用户界面，处理用户交互逻辑。
2. 后端：使用服务器端语言（如Node.js、Java、Python、Ruby）和框架（如Express、Spring Boot、Django、Rails）开发API、处理业务逻辑和与数据库交互。例如，使用Node.js和Express框架搭建RESTful API服务器。
运行环境：
1. 前端：代码运行在客户端浏览器中，与用户直接交互。前端开发者需要考虑不同浏览器的兼容性和用户体验。
2. 后端：代码运行在服务器上，处理请求、管理数据和执行业务逻辑。后端开发者关注服务器性能、安全性和可扩展性。
关注点：
1. 前端：注重用户体验、界面设计、响应式布局和性能优化（如页面加载速度、交互流畅性）。前端开发者需要与设计师紧密合作，实现视觉效果和交互功能。
2. 后端：关注数据存储、业务逻辑实现、API设计和安全性。后端开发者需要与数据库交互，处理并发请求，并确保系统的稳定性和可靠性。
开发工具：
1. 前端：使用VS Code等编辑器，搭配浏览器开发者工具进行调试。依赖构建工具（如Vite、Webpack）进行代码打包和优化。
2. 后端：使用IntelliJ IDEA、PyCharm等IDE，搭配数据库管理工具（如pgAdmin、MySQL Workbench）进行开发。需要配置服务器环境（如Nginx、Apache）和部署工具（如Docker、Kubernetes）。
数据处理：
1. 前端：主要处理数据的展示和用户输入的收集。通过API从后端获取数据，并将其转换为用户界面。
2. 后端：负责数据的存储、查询和业务逻辑处理。与数据库（如MySQL、MongoDB）交互，执行复杂的数据操作和事务管理。
性能优化：
1. 前端：优化页面加载时间、减少重绘和回流、提升交互响应速度。例如，通过懒加载、代码分割、图片优化等技术提高性能。
2. 后端：优化服务器响应时间、数据库查询效率、减少内存泄漏和提升并发处理能力。例如，使用缓存机制（如Redis）、数据库索引优化、连接池管理等技术提高性能。

4. 最近有在看什么技术文章吗

题目要点

学习态度。

参考答案

最近我在阅读关于WebAssembly性能优化的文章，了解如何通过WebAssembly提升前端应用的运行效率。例如，我读了一篇关于使用WebAssembly进行图像处理的文章，介绍了如何将图像处理算法编译为WebAssembly模块，从而在浏览器中实现高性能的图像编辑功能。

同时，我也在关注前端框架的新特性，如Vue 3的Composition API和React的Concurrent Mode。这些新技术有助于构建更高效、响应更快的用户界面。

此外，我还阅读了一些关于前端安全的文章，特别是关于防止XSS攻击和CSRF攻击的最佳实践，这些知识对于构建安全的Web应用至关重要。

通过这些文章，我能够不断更新自己的知识体系，保持对技术前沿的敏感度，并将所学应用到实际项目中。

5. canvas 引擎有什么优化渲染性能的方案

阿里-盒马-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 05:48:59 +0000

本轮要点： 深入框架原理与工程化：小程序加载流程（缓存/渲染机制）、Vue路由动态加载（Code Splitting）、全局状态管理（Vuex模块化）、生命周期资源管理（mounted/beforeDestroy）。难点在于手势识别算法（滑动速度计算）和可控动画引擎（开始/暂停/取消）。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 小程序的页面加载流程是怎样的？请简要描述从用户点击小程序图标到页面显示的整个过程。

题目要点

双线程并行：启动过程是渲染层（UI）和逻辑层（JS）同步初始化的过程。
离线包机制：通过本地缓存和分包加载策略，极大减少了网络传输对首屏的影响。
预加载优化：微信客户端通过预热环境和提前下载包来压榨启动耗时。
数据驱动渲染：首屏显示依赖于逻辑层到渲染层的初始数据传输（setData 机制的前身）。

参考答案

小程序的加载是一个多线程协作的过程，主要可以分为环境准备、代码下载、注入运行以及首屏渲染四个阶段。

1. 运行环境准备（准备阶段）

当用户点击小程序图标时，微信客户端会立即启动一个原生容器。

进程启动：微信会为小程序分配独立的进程或线程。
双线程环境初始化：微信会同时初始化两个运行环境，即逻辑层（AppService）和渲染层（WebView）。为了提速，微信通常会预先启动一个通用的空白 WebView（预加载机制），从而缩短环境搭建的时间。

2. 代码包下载与加载（资源阶段）

在环境准备的同时，微信会根据小程序的 AppID 去服务端请求最新的代码包。

增量更新与缓存：如果本地已有缓存，则直接校验版本；若无或版本过旧，则下载加密的代码包。
分包加载优化：如果开发者配置了分包，此时只会下载“主包”内容，从而减少首次下载的数据量，提升启动速度。

3. 代码注入与逻辑初始化（初始化阶段）

代码包下载完成后，微信会开始解析并执行代码。

逻辑层注入：执行 app.js 和各页面的 JS 逻辑。此时，小程序会触发 App.onLaunch 和 App.onShow 生命周期回调。
配置解析：解析 app.json 和页面配置，确定全局样式、路由关系及初始页面。

4. 渲染层视图构建与首屏渲染（渲染阶段）

这是用户肉眼感知页面出现的关键时刻。

视图层初始化：渲染层载入 WXML 转换后的模板和 WXSS 样式。
初始数据传输（First Paint）：逻辑层在实例化页面后，会将初始数据（Initial Data）通过微信底层提供的 evaluateJavascript 方式，跨线程传递给渲染层。
动态渲染：渲染层接收到数据后，结合模板生成最终的 DOM 树，并交由浏览器引擎进行绘制。

5. 交互就绪（Finish 阶段）

生命周期触发：页面初次渲染完成后，逻辑层会收到反馈，并触发页面的 onReady 回调。此时，逻辑层与渲染层已经建立了稳定的双向数据绑定，用户可以开始进行交互操作。

2. 小程序页面间有哪些传递数据的方法？

京东-技术中台-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 05:48:05 +0000

本轮要点： 本次面试聚焦CSS布局核心问题（浮动清除、BFC机制）、高频JS手写能力（防抖函数）、工程化实践（TS迁移痛点、Vue3升级策略）、深度性能优化（缓存协同更新、Tree Shaking原理）。难点在于浮动导致的布局塌陷解决方案、CDN与本地缓存协同策略设计，以及复杂框架迁移的兼容性处理。

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 浮动元素导致的布局错乱应该如何解决？

题目要点

CSS浮动布局及解决方案。

参考答案

浮动元素会导致其父元素高度塌陷，从而影响布局。解决方法有：

1. 清除浮动：在浮动元素后面添加一个空的`div`，设置`clear: both`。
2. 使用伪元素清除浮动：在父元素上使用`::after`伪元素，设置`clear: both`。

.parent::after {
 content: "";
 display: block;
 clear: both;
}

1. 使用`overflow: hidden`：给父元素设置`overflow: hidden`，但可能会隐藏超出部分的内容。
2. 使用`BFC`（块级格式化上下文）：通过设置`display: flow-root`或`overflow: auto`等属性，使父元素形成一个独立的BFC，从而包含浮动元素。

2. 实现一个固定侧边栏+自适应主内容的布局

题目要点

CSS布局技巧。

参考答案

可以使用flexbox布局实现固定侧边栏和自适应主内容的布局：

<div class="container">
 <div class="sidebar">侧边栏</div>
 <div class="main">主内容</div>
</div>

.container {
 display: flex;
}
.sidebar {
 width: 200px; /* 固定宽度 */
 background-color: #f0f0f0;
}
.main {
 flex: 1; /* 自适应宽度 */
 background-color: #ffffff;
}

3. 实现 debounce（防抖）函数

字节-飞书-校招 · 第 1 轮 · 二面

Thu, 26 Jun 2025 08:23:26 +0000

本轮要点： 本次面试主要考察前端开发者的项目经验、技术深度、问题解决能力以及对未来发展的思考。

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 了解飞书么，讲一下你的使用感受

题目要点

● 说明该题是主观型问题，不考"唯一标准答案"

● 面试官主要考察答题者对产品的理解、用户体验的洞察以及归纳总结能力

● 答题结构建议：首先简要说明你对飞书的整体印象和使用频率，然后从几个具体的产品功能或使用场景出发，详细阐述你的感受、亮点和可以改进的地方。

参考答案

高质量参考范文：我对飞书这款产品有比较深入的了解，因为我们团队在日常工作中就是飞书的重度用户，几乎所有的协作和沟通都在上面进行。从我的使用感受来看，飞书在一体化协作方面做得非常出色，它不仅仅是一个简单的即时通讯工具，更是一个集成了文档、会议、日程、OKR、邮件等多种功能的综合性协作平台，极大地提升了团队的工作效率。

我感受最深的有以下几点：

首先是文档和表格的强大协作能力。飞书文档支持多人实时协同编辑，光标跟随、评论批注等功能都非常流畅，我们团队经常用它来共同撰写需求文档、项目周报等。表格功能也比传统Excel更灵活，支持多种视图和自动化能力，对于项目管理和数据统计非常方便，我们很多内部管理工作都迁移到了飞书表格上。这种所见即所得、实时同步的体验，比我们之前使用分离的工具效率高出很多。

其次是会议和日历的无缝整合。飞书会议的音视频质量很高，屏幕共享和标注功能也很实用。最棒的是它和日历的深度集成，我们可以在日历中直接创建会议，并关联飞书文档，会议结束后纪要也能快速生成并同步。这种从会议发起、进行到纪要归档的全流程一体化体验，减少了大量来回切换应用的麻烦。

当然，在使用过程中，我也注意到一些可以改进的地方。例如，对于一些复杂的数据可视化需求，飞书表格目前的图表功能可能还不够强大，我们有时需要导出数据到其他专业工具进行处理。另外，在面对外部协作场景时，虽然飞书支持分享外部链接，但在权限控制和安全性方面，如果能提供更多灵活的配置选项，会更便于与外部伙伴高效协同。

总的来说，飞书极大地改变了我们团队的协作模式，提升了整体工作效率。它在集成化、实时协作和移动端体验方面都有着显著优势。我相信随着产品的不断迭代，它在更多细分场景和个性化需求方面会做得更好。

2. 如果飞书的某一个页面崩溃了，你会如何处理？

题目要点

● 说明该题是主观型问题，不考"唯一标准答案"

● 面试官主要考察答题者的故障排查能力、问题分析思路、应急处理流程以及对用户体验的关注

● 答题结构建议：首先表明你会从用户角度出发，然后从前端排查、后端排查、联调分析、解决方案、预防措施等多个维度，阐述你处理问题的完整思路和步骤。

参考答案

高质量参考范文：如果飞书的某个页面崩溃了，我会立即启动一套系统的故障排查和处理流程，目标是尽快定位问题、恢复服务，并最大程度地减少对用户的影响。

我的处理思路和步骤通常如下：

初步判断与用户安抚（P0 紧急）：
- 确认问题范围： 首先，我会尝试复现问题，看是偶发性还是普遍性，是个别用户遇到还是所有用户，是特定浏览器或环境下崩溃，还是全量崩溃。这决定了问题的优先级和后续排查方向。
- 快速截图/录屏： 立即保留现场证据，包括控制台报错、网络请求、崩溃页面截图等，为后续分析提供依据。
- 安抚用户/上报： 如果是线上普遍性问题，会第一时间通过内部渠道（如即时通讯工具）向上级和相关团队（后端、产品、SRE等）同步情况，并考虑是否需要发布公告，引导用户刷新页面或使用其他临时方案，确保用户感受到问题正在被处理。
前端层面排查：
- 控制台日志分析： 检查浏览器开发者工具的Console面板，查看是否有JavaScript错误、警告或网络请求失败的提示。JavaScript报错通常是页面崩溃的直接原因，栈追踪能帮助定位代码位置。
- 网络请求分析： 检查Network面板，看是否有接口请求失败（如4XX、5XX错误），或者请求超时。特别是5XX错误，可能指示后端服务异常导致页面无法获取必要数据而崩溃。
- 内存与CPU占用： 使用Performance和Memory面板，观察页面崩溃前是否有内存飙升或CPU占用过高的情况，这可能指向内存泄漏、死循环或计算密集型操作。
- 代码回溯与版本： 确认当前页面的代码版本，检查近期是否有相关代码上线，是否有回滚的必要。使用Source面板进行断点调试，观察变量值和代码执行流程。
- 本地存储检查： 检查LocalStorage、SessionStorage和IndexedDB，看是否有脏数据或超大存储导致的问题。
后端及服务层面排查（与后端协作）：
- 接口健康状况： 如果前端排查怀疑是后端问题，我会联系后端开发或SRE团队，确认相关API接口的健康状况、服务日志、异常报警信息。
- 数据库或缓存： 后端会进一步排查数据库连接、缓存服务是否正常，是否有慢查询或数据一致性问题。
- 依赖服务： 检查该页面所依赖的微服务或其他第三方服务是否正常运行。
定位与解决方案：
- 锁定问题点： 根据排查结果，确定是前端代码Bug（如空指针、死循环、组件渲染异常）、后端接口问题、网络问题、兼容性问题，还是其他服务故障。
- 制定方案： 如果是前端Bug，立即着手修复，并进行单元测试和集成测试。如果是后端问题，协同后端团队修复。如果是数据问题，考虑数据清洗或兼容处理。
- 紧急发布/回滚： 对于严重影响线上用户的问题，优先考虑紧急发布修复补丁，或者在无法快速修复的情况下，采取回滚到上一个稳定版本的方式。
复盘与预防：

字节-本地生活-校招 · 第 1 轮 · 二面

Tue, 24 Jun 2025 14:45:10 +0000

本轮要点： 本轮面试重点考察候选人的项目经验、技术深度和工程化思维。主要包括：

算法编程能力：通过合并有序数组等题目考察基本编程功底
项目经验：深入考察实习期间的技术选型、架构设计等关键决策
微前端技术：重点关注跨应用通信、样式隔离等核心问题
AI 应用实践：考察将新技术应用到工程实践中的能力
跨窗口通信：考察复杂场景下的技术方案设计能力

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 将两个升序数组合并为一个升序数组

题目要点

数组操作能力
双指针算法应用
原地修改的实现
边界条件处理

参考答案

这道题可以使用双指针从后向前遍历的方法，将较大的数放入nums1的末尾。代码实现如下：

function merge(nums1, m, nums2, n) {
 let p1 = m - 1; // nums1的指针
 let p2 = n - 1; // nums2的指针
 let p = m + n - 1; // 合并后数组的指针

 while (p2 >= 0) { // 只要nums2还有元素需要合并
 if (p1 >= 0 && nums1[p1] > nums2[p2]) {
 nums1[p] = nums1[p1];
 p1--;
 } else {
 nums1[p] = nums2[p2];
 p2--;
 }
 p--;
 }
 return nums1;
}

算法分析：

时间复杂度：O(m+n)，只需遍历一次
空间复杂度：O(1)，原地修改不需要额外空间
关键点：从后向前遍历避免覆盖nums1中的有效元素

2. 上一段实习在联想主要做的是什么产品？采用了什么技术架构？

题目要点

这是一道主观性问题，面试官主要考察：

项目描述能力：是否能清晰表达项目背景、目标和价值
技术选型能力：是否有合理的技术决策思路
架构设计能力：是否理解系统设计的关键点
业务理解能力：是否深入理解业务需求和痛点

答题建议：建议从项目背景、技术架构、实现亮点和项目成果四个方面展开。重点说明项目的业务价值和技术特点，展现自己在项目中的贡献和成长。

参考答案

“在联想实习期间，我主要负责一个企业级IT资产管理平台的开发工作。这是一个服务于公司内部的中后台系统，日均活跃用户约2000人，管理着超过10万台设备资产。这个平台的核心价值在于提升IT资产管理效率，降低运维成本。

字节-技术中台-校招 · 第 2 轮 · 二面

Tue, 02 Sep 2025 07:35:12 +0000

本轮要点： 本次面试主要考察小程序、前端基础及算法等方面的知识。

本轮共 17 道题。答案默认折叠，便于先自行作答。

1. 讲一下你的小程序项目

题目要点

这是一个典型的主观型问题，没有唯一的标准答案。面试官主要考察候选人的项目经验、技术选型能力、问题解决能力以及对小程序生态的整体理解。
答题时建议围绕项目背景、个人职责、技术挑战与解决方案、项目成果与思考等方面展开，体现出系统性和条理性。

参考答案

在我的某某项目中，我主要负责开发一个基于微信小程序的某某功能模块，比如一个校园服务小程序，其中我负责了课程表、成绩查询以及校园活动发布的功能。

项目启动之初，我们对需求进行了详细的分析。我选择了小程序作为技术栈，主要是考虑到其轻量级、无需下载安装的特性，能够快速触达用户，并且微信生态提供了丰富的API支持，例如微信支付、地理位置等，非常适合我们校园服务的场景。在技术选型上，我们使用了原生小程序开发模式，结合了小程序自定义组件的能力，将课程表、活动列表等通用UI和逻辑封装成可复用组件，大大提高了开发效率和代码的可维护性。

在开发过程中，我遇到了一些挑战。例如，课程表数据的展示，由于涉及到大量的时间和格子计算，以及复杂的状态管理，我采用了组件化的方式来解耦视图和逻辑。为了避免频繁调用setData导致性能问题，我仔细规划了数据结构，并通过局部更新和事件代理的方式，将数据更新的粒度控制到最小，确保了界面的流畅性。此外，在处理校园活动图片上传和展示时，也遇到了图片内存飙升的问题，我通过启用lazy-load属性，并对图片进行后端压缩和CDN分发，有效解决了内存占用过高的问题，提升了用户体验。在保证安全性的前提下，对于用户敏感信息，我们严格遵循小程序的加密存储和传输规范。

项目上线后，用户反馈良好，尤其是加载速度快、操作流畅得到了肯定。通过这个项目，我不仅深化了对小程序双线程架构、生命周期、组件化等核心概念的理解，也锻炼了我在实际项目中解决复杂性能问题的能力。同时，也让我认识到在项目开发中，前期的技术选型、架构设计以及对潜在性能瓶颈的预判都是至关重要的。

2. 小程序的架构组成

题目要点

宿主环境: 了解小程序运行的载体，如微信、支付宝等App提供的运行环境。
双线程模型: 掌握小程序的逻辑层和视图层分离，通过异步通信机制进行数据交换。
组件系统: 熟悉小程序内置组件和自定义组件的构成。
数据层: 理解小程序数据管理和更新机制。
小程序生命周期: 熟悉小程序应用和页面的生命周期函数。

参考答案

1.1 原理说明

宿主环境: 小程序运行在一个特定的宿主环境中，这个环境由微信、支付宝等App提供。它为小程序提供了运行所需的API、渲染能力、文件系统等。
双线程模型: 小程序采用双线程模型，即逻辑层和视图层分别运行在不同的线程中。
- 逻辑层: 运行在JSCore（或V8引擎）中，负责处理业务逻辑、数据请求、数据处理等，使用JavaScript编写。它不直接操作DOM。
- 视图层: 负责渲染页面，使用WebView（或独立的渲染引擎）渲染WXML和WXSS。
通信机制: 逻辑层和视图层之间通过Native层进行异步通信。视图层将用户操作（如点击、输入）传递给逻辑层，逻辑层处理后将数据变化通知视图层进行更新。
组件系统: 小程序提供了一套丰富的基础组件，如view、text、image等，开发者也可以基于这些基础组件创建自定义组件，实现模块化开发。
数据层: 小程序的数据管理主要通过Page.prototype.data和this.setData进行。数据变化后，通过双线程通信机制同步到视图层，触发视图更新。 1.2 核心用法 + 示例代码
在小程序中，开发者主要通过JavaScript编写逻辑层代码，WXML构建页面结构，WXSS定义页面样式。
app.js 定义小程序的全局逻辑，app.json 进行全局配置，app.wxss 定义全局样式。
每个页面由 .js（逻辑）、.json（配置）、.wxml（结构）、.wxss（样式）组成。
示例：页面数据更新

// page.js
Page({
 data: {
 message: 'Hello Mini Program!'
 },
 onLoad: function() {
 setTimeout(() => {
 this.setData({
 message: 'Data Updated!'
 });
 }, 2000);
 }
});

这种架构分离了业务逻辑和页面渲染，提高了性能和安全性，也方便平台对小程序进行管控。 1.3 常见误区或面试陷阱
误区: 认为小程序是基于浏览器内核直接运行的H5页面。实际上，小程序运行在独立的宿主环境，有其特定的渲染机制和API。
误区: 将双线程通信理解为同步通信。实际上是异步通信，需要注意数据同步的时序问题。
陷阱: 不清楚小程序无法直接操作DOM的原因，本质上是为了安全和性能考量，避免开发者直接对渲染层进行复杂操作，影响性能和用户体验。

3. 小程序和 H5 在开发和使用上有哪些主要的区别和优势？

题目要点

运行环境: 区分小程序和H5的运行载体和能力限制。
开发模式: 掌握两种技术栈的开发流程和工具链。
性能: 对比加载速度、运行流畅度等方面的差异。
功能和权限: 了解各自能调用的系统能力和接口。
用户体验: 分析用户感知到的流畅性、便捷性。
分发和推广: 比较获取用户、传播的难易程度。

参考答案

1.1 原理说明

字节跳动-商业化-校招 · 第 2 轮 · 二面

Tue, 02 Sep 2025 07:31:02 +0000

本轮要点： 本次面试主要考察前端基础（CSS布局、JavaScript原型链）、React框架深入理解（虚拟DOM、性能优化）、设计模式应用以及算法能力。

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 实现一个三栏布局，左右两侧固定宽度，中间区域自适应

题目要点

面试官出这道题主要想确认哪些知识维度？
- 考生对CSS布局（如Flexbox, Grid, 浮动, 定位, 表格布局等）的掌握程度。
- 考生如何处理不同元素之间的空间分配和自适应能力。
该题所考知识点中有哪些高频实际应用点？
- 页面整体布局，如经典后台管理系统布局（侧边栏固定，内容区自适应）。
- 组件内部布局，如卡片、列表项中固定图标/按钮，内容区域自适应。

参考答案

1.1 原理说明 三栏布局是一种常见的网页布局方式，其核心在于实现左右两边固定宽度，中间内容区域根据可用空间自适应。这要求布局方案能够灵活处理流体宽度和固定宽度元素的共存，并且能够正确处理元素之间的堆叠和清除浮动等问题。不同的CSS布局技术提供了不同的实现原理和特性，选择合适的方案取决于兼容性要求、布局复杂度和维护成本。

1.2 核心用法 + 示例代码 以下是几种实现三栏布局的常见方法，并说明其原理和适用场景：

1.2.1 Flexbox 布局

原理： Flexbox (弹性盒子) 是一种一维布局模式，它在父容器中管理子项的分布和对齐。通过设置主轴和交叉轴，可以非常灵活地控制子元素的排列。
使用场景： 现代浏览器环境下的首选布局方式，适用于需要灵活对齐、空间分配的场景。

示例代码：

<div class="container-flex">
 <div class="left">Left</div>
 <div class="center">Center</div>
 <div class="right">Right</div>
</div>

.container-flex {
 display: flex; /* 开启Flex布局 */
}
.left, .right {
 width: 200px; /* 左右固定宽度 */
 flex-shrink: 0; /* 防止收缩 */
}
.center {
 flex-grow: 1; /* 中间区域自适应，占据剩余空间 */
}

优势： 代码简洁，语义化好，对齐和分配空间非常方便。

1.2.2 Grid 布局