腾讯 on Last Stand

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

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

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮概述： 这些题目全面考察了前端工程师在实际项目中需要掌握的核心技术和解决问题的能力，涵盖了从基础原理到工程实践的各个层面。

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

1. 自我介绍、项目介绍

题目要点

技术栈熟练度、架构经验、性能优化成果、团队协作能力

参考答案

具有3年前端开发经验，专注于现代化前端技术栈和工程化实践。主要负责过大型电商平台的前端架构设计和性能优化工作，熟练掌握 Vue/React 生态系统。在项目中主导了从传统架构向微前端架构的迁移，通过模块联邦和组件库建设提升了团队开发效率。同时在性能优化方面有丰富实践，将核心页面的首屏加载时间优化至2秒以内。

2. 可视化搭建平台中，如何设计数据规范保证组件间数据兼容性？请求收效的具体实现方案是什么？

题目要点

Schema规范、数据校验、适配器模式、请求优化策略

参考答案

建立统一的数据协议规范，定义标准的组件 Schema 结构，包含 props、events、slots 等接口描述。通过 JSON Schema 进行数据校验，确保组件间数据传递的类型安全。实现数据适配器模式，当组件接口不兼容时自动进行数据转换。请求收效方面，采用请求去重和缓存策略，相同请求在短时间内只发送一次，同时建立请求优先级队列，确保关键数据的及时响应。

3. 组件的拖拽行为如何实现？如何为组件动态注入行为（如拖拽、缩放）？

题目要点

事件序列处理、状态管理、装饰器模式、行为解耦

参考答案

拖拽实现基于原生 Drag API 或鼠标事件，通过监听 mousedown、mousemove、mouseup 事件序列。建立拖拽状态管理，记录拖拽起始位置、当前位置和目标位置。动态行为注入采用装饰器模式或高阶组件，将行为逻辑与组件本身解耦。通过 mixin 或 composition API 的方式，在运行时为组件添加拖拽、缩放等交互能力。

4. 如何解决拖拽过程中频繁触发事件导致的性能问题？

题目要点

节流防抖、requestAnimationFrame、事件委托、计算优化

参考答案

使用节流（throttle）限制事件触发频率，通常设置为 16ms 以保持 60fps 的流畅度。采用 requestAnimationFrame 优化动画渲染，确保在浏览器重绘时机执行位置更新。实现事件委托减少事件监听器数量，在容器元素上统一处理拖拽事件。对于复杂计算，使用防抖（debounce）延迟执行，避免在拖拽过程中进行不必要的重计算。

5. 性能优化关注的指标有哪些（如FCP、TTI）？你用了哪些具体手段？

题库原题：前端性能优化指标有哪些？怎么进行性能检测？

题目要点

前端性能评估主要围绕三个维度展开：

页面加载速度、交互响应能力以及页面稳定性。常见指标包括 FP、FCP、LCP 等加载指标，FID 和 INP 等交互指标，以及 CLS 布局稳定性指标。
性能检测通常分为两类方式：开发阶段使用 Lighthouse、Chrome DevTools、WebPageTest 等工具进行实验室分析；
线上环境通过 Performance API 或 web-vitals 采集真实用户性能数据，并结合监控平台进行统计与优化。

参考答案

前端性能通常不会只看单一指标，而是从用户感知加载速度、交互响应速度以及页面稳定性三个维度进行评估。当前行业中比较主流的一套指标体系来自 Google 提出的 Web Vitals，并结合传统的加载性能指标共同评估。

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

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

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 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

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

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

1. Vue 3.0 相比 Vue 2.0 有哪些改进？

题目要点

响应式系统升级、Composition API、性能优化、TypeScript支持、Fragment支持

参考答案

Vue 3.0 在架构层面进行了重大重构，采用了基于 Proxy 的响应式系统替代了 Object.defineProperty，这使得可以直接监听数组变化和动态属性添加。组合式 API 的引入提供了更好的逻辑复用和类型推导能力。在性能方面，通过 Tree-shaking 支持、更小的包体积、以及编译时优化显著提升了运行效率。

2. Composition API 解决了 Options API 的哪些问题？

题目要点

逻辑聚合、代码复用、类型推导、避免mixin问题

参考答案

Options API 在处理复杂组件时会出现逻辑分散的问题，相关的数据、方法、计算属性被强制分离到不同的选项中。Composition API 通过 setup 函数将相关逻辑聚合在一起，提高了代码的可维护性。同时解决了 mixin 命名冲突和来源不清晰的问题，提供了更好的 TypeScript 类型推导支持。

3. Proxy 相比 Object.defineProperty 在响应式上有何优势？

题目要点

对象级别监听、动态属性支持、数组监听、更多拦截操作

参考答案

Proxy 可以直接监听整个对象而不需要遍历每个属性，支持动态属性的添加和删除监听。对于数组操作，Proxy 可以直接监听数组的变化，而 Object.defineProperty 需要重写数组方法。Proxy 还支持更多的拦截操作，如 has、deleteProperty 等，提供了更完整的响应式能力。

4. nextTick 如何保证 DOM 更新后执行回调？

题目要点

事件循环、微任务队列、异步更新、降级策略

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

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

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 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 协议原理

题库原题：说下 websocket 的连接原理

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

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

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 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 骨架屏。

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

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

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

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

1. 讲一下项目的难点和亮点

题目要点

突出解决问题的能力，说明遇到过的复杂问题和优化方案，亮点要体现价值和可扩展性。

参考答案

在大型前端项目中，常见难点在于性能优化和复杂业务的抽象。比如数据量大时页面渲染和交互卡顿，需要通过虚拟列表、懒加载、分片渲染等方式解决；跨端适配和复杂状态管理也是典型难点。亮点可以体现在工程化和架构设计上，例如通过模块化拆分、微前端架构提高可维护性，或通过自动化工具链提升研发效率。

2. 项目的规范是如何制定的，如何执行的

题目要点

强调自动化工具与制度双管齐下，执行靠工具、评审和 CI 流程。

参考答案

前端规范一般从编码规范、组件封装规范、目录结构、Git 提交规范等方面制定。执行时可以依赖工具保障，比如 ESLint + Prettier 自动化格式化，Husky + lint-staged 在提交时校验，CI/CD 流程中增加检测。对组件层面，约定统一的 API 风格和文档，保证多人协作一致性。

3. 说说vue中的diff算法

题库原题：说说vue中的diff算法

题目要点

diff算法是一种高效的比较算法，主要用于比较虚拟DOM节点，以确定如何更新真实DOM。它具有两个特点：只会在同层级进行比较，不会跨层级比较；在比较的过程中，循环从两边向中间收拢。

在Vue中，diff算法用于比较新旧VNode节点，以决定如何更新真实DOM。

这个过程分为以下几个步骤：

比较新旧VNode节点：如果新旧节点相同，则不做任何操作；如果新旧节点都不存在子节点，则直接结束比较；如果新旧节点都有子节点，则进入updateChildren函数比较子节点。
更新子节点：在updateChildren函数中，设置新旧VNode的头尾指针，然后从两边向中间比较。如果新旧头尾指针相同，则直接patchVnode；如果新旧头尾指针不同，则根据情况调用patchVnode、createElm创建新节点，或者从哈希表寻找key一致的旧VNode节点再进行分情况操作。
patchVnode方法：如果新旧节点都有文本节点且不相等，则设置真实dom的文本节点为新节点的文本节点；如果旧节点有子节点而新节点没有，则删除旧节点的子节点；如果旧节点没有子节点而新节点有，则将新节点的子节点真实化后添加到旧节点；如果两者都有子节点，则进入updateChildren函数比较子节点。

通过diff算法，Vue能够高效地比较新旧VNode节点，以决定如何更新真实DOM，从而提高页面渲染的性能。

参考答案

一、是什么

diff 算法是一种通过同层的树节点进行比较的高效算法

其有两个特点：

比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中，循环从两边向中间比较

diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较

二、比较方式

diff整体策略为：深度优先，同层比较

比较只会在同层级进行, 不会跨层级比较

比较的过程中，循环从两边向中间收拢

腾讯-CSIG一校招 · 第 1 轮 · 第一轮

Mon, 28 Jul 2025 14:52:54 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮概述： 一面主要考察前端基础，难度不大。

面试时间： 90分钟

本轮要点： 基础概念理解深入，能够解释原理和应用场景

代码实现思路清晰，考虑边界情况和性能优化

对前端技术栈有系统性认知，了解技术发展趋势

具备解决实际问题的能力和工程化思维

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

1. 为什么选择前端

题目要点

作为校招生，回答"为什么选择前端"时要避免空喊"热爱"或跟风，建议用具体经历+能力匹配+行业洞察的三段式结构，既体现思考深度又展示成长潜力。

参考答案

以下是分场景的高分回答模板：

版本一：技术驱动型（适合有项目经历的同学）

“选择前端源于两次关键经历：

大一用Vue重构学院官网时，发现通过组件化开发能将设计稿像素级还原，这种’所见即所得’的即时反馈让我着迷；

在实习中做低代码平台时，用React+D3.js实现拖拽生成图表，体会到前端不仅是实现UI，更是连接用户与数据的桥梁。
前端技术迭代快（如WebAssembly、微前端）的特点，恰好匹配我热衷通过技术解决实际问题的性格。贵司的XX业务（如电商/数据可视化）对交互体验要求极高，我的XX项目经验（举例）能快速落地。”

版本二：用户导向型（适合非科班转行的同学）

“虽然我是工业设计专业，但大三时用Figma做APP原型时，发现静态设计无法验证用户真实体验。于是自学Three.js做了3D产品展示页，通过A/B测试发现3D交互使用户停留时长提升40%。这让我意识到：前端是设计落地的’最后一公里’。
前端独有的**‘技术+设计+心理学’交叉属性**（如用Framer-motion设计微交互引导用户操作），让我能用代码延续设计价值。贵司注重用户体验（如引用官网案例），我的设计背景+代码能力能提供差异化视角。”

版本三：行业趋势型（适合技术视野广的同学）

“选择前端是因为它是最接近技术变革一线的领域：

云原生时代：前端从浏览器扩展到全端（如Electron桌面应用、小程序）；

AI赋能：WebGL+TF.js让前端直接运行AI模型（如实时人脸检测）；

IoT场景：前端技术控制智能家居（如用WebSerial协议与硬件通信）。
我在开源项目参与过WebRTC实时互动功能开发，体会到前端工程师正在定义下一代人机交互标准。贵司的XX业务（如智能硬件/元宇宙）正处于这些趋势的交汇点，我的XX技能（如WebGL/跨端开发）能直接贡献。”

避坑提示

不要只说"喜欢 visible 的结果"：改为**“享受从像素级还原到性能优化的全链路挑战”**（体现技术深度）。
避免"前端简单"的刻板印象：改为**“前端是工程复杂度最高的领域之一，需同时处理兼容性、状态管理、性能优化多端适配”**（展示认知）。
关联公司业务：提前研究官网/技术博客，比如：“注意到贵司用Next.js重构了主站，我对其中SSG/ISR的SEO优化策略很感兴趣”（体现调研）。

最后，用成长型结尾强化潜力：“作为校招生，我清楚自己缺乏高并发场景经验，但已系统学习Chrome DevTools性能分析，并模拟过百万级PV的SSR优化（举例），期待在贵司的实际业务中深化这些能力。”

2. 框架理解 - Nest.js设计思想

题目要点

分层架构、功能增强、多种设计模式应用

参考答案

Nest.js基于Express或Fastify进行封装，采用分层架构设计。底层HTTP服务器提供基础的请求处理能力，Nest.js在此基础上添加了依赖注入、装饰器、模块化等企业级特性。这确实类似装饰器模式，每一层都在不改变核心功能的前提下增强框架能力。

除了装饰器模式，还了解观察者模式（发布-订阅），常用于事件系统和状态管理；工厂模式，用于创建不同类型的对象实例；单例模式，确保全局唯一实例等。

3. 闭包概念和产生原因

题目要点

词法作用域、变量访问权限、执行环境保持

参考答案

闭包是指函数能够访问其外部作用域变量的特性。产生闭包的原因是JavaScript的词法作用域机制，函数在定义时就确定了可访问的变量范围，即使在其他执行环境中调用也能保持这种访问能力。

function createCounter() {
 let count = 0;
 return function() {
 return ++count;
 };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

4. 闭包内存问题及解决方案

题目要点

引用保持、垃圾回收阻塞、手动清理、变量提取

腾讯-CSIG一校招 · 第 1 轮 · 第二轮

Mon, 28 Jul 2025 14:52:54 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 第二轮对技术深度有一定的考察。对构建工具有深入理解，能够分析技术选型原因掌握React核心概念和性能优化技巧具备网络协议和安全知识代码实现能力强，能够设计合理的算法和架构理解设计模式在实际场景中的应用

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

1. Node中间件的作用和使用

题目要点

请求拦截处理、横切关注点、链式执行、功能解耦

参考答案

中间件是在请求和响应之间执行的函数，用于处理横切关注点。在Express/Nest.js中，中间件按顺序执行，每个中间件可以修改请求对象、响应对象，或者终止请求-响应循环。

常用的中间件包括：

身份验证中间件：验证用户token
日志中间件：记录请求信息
错误处理中间件：统一处理异常
CORS中间件：处理跨域请求
参数验证中间件：验证请求参数格式

2. 大模型的理解和应用

题目要点

语言模型、涌现能力、开发辅助、安全考虑

参考答案

大模型是基于Transformer架构的深度学习模型，通过大规模数据训练获得强大的语言理解和生成能力。主要特点是参数量巨大、涌现能力强、通用性好。

在开发中的应用：

代码生成和补全：提高开发效率
文档生成：自动生成API文档和注释
代码审查：发现潜在问题和优化建议
需求分析：辅助理解业务逻辑

使用时需要注意数据安全、结果准确性验证、成本控制等问题。

3. Webpack vs Vite 的理解和区别

题目要点

构建原理差异、性能表现、生态成熟度、配置复杂度

参考答案

Webpack是基于模块打包的构建工具，通过入口文件分析依赖关系，将所有资源打包成bundle。Vite是基于ES模块的构建工具，开发时利用浏览器原生ES模块支持，生产时使用Rollup打包。

主要区别：

启动速度：Vite利用ES模块按需加载，启动更快；Webpack需要预先打包
热更新：Vite基于ES模块的HMR更精确；Webpack需要重新打包相关模块
生态系统：Webpack生态更成熟，插件丰富；Vite相对较新但发展迅速
配置复杂度：Vite开箱即用，配置简单；Webpack配置相对复杂

4. 项目选择构建工具的考虑

题目要点

开发体验优先、项目延续性、团队熟悉度、稳定性考虑

参考答案

个人项目选择Vite主要考虑开发体验，启动快、热更新迅速，配置简单，适合快速原型开发。实习项目使用Webpack主要因为：

历史项目延续性，已有完整的配置和工作流
团队熟悉度高，维护成本低
生态系统成熟，特殊需求的插件支持更好
大型项目的稳定性考虑

5. Vite 开发环境与生产环境差异

题目要点

按需加载vs完整打包、开发体验vs生产优化、不同构建工具

参考答案

开发环境：

腾讯-CDG-暑期实习 · 第 1 轮 · 一面

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

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

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

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

← 第 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 轮 · 一面

Fri, 25 Jul 2025 07:17:59 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 动画、响应式设计、事件循环、跨域、浏览器的缓存机制、列表和key、生命周期

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

1. 请介绍一下你的科研项目经历。

题目要点

STAR法则

参考答案

结合自身经历展开

2. 为什么选择前端开发作为你的职业方向？

题目要点

无

参考答案

无

3. 你学习前端开发有多久了？谈谈你的学习经历。

题目要点

无

参考答案

无

4. 如何使用CSS实现动画效果？举个项目中的例子。

题目要点

transition/animation 区别 / transform+opacity / 项目落地举例 / 动画性能

参考答案

考察点

● CSS 动画相关属性与原理掌握

面试官希望了解候选人是否掌握 CSS 动画的基本实现方式，包括 transition、animation、关键帧、补间函数等。

● 能结合项目场景举例说明

不仅要懂 API，更重要的是知道什么时候使用、为什么使用，是否有性能考量和交互体验意识。

● 对动画效果的性能与体验理解

是否清楚哪些动画对性能影响大，哪些动画适合用 CSS 实现，如何避免卡顿或丢帧。

参考答案

原理说明

一、CSS 动画的实现方式

CSS 提供了两类动画机制：

1. 过渡动画（transition）

通过 transition 属性定义在样式变更时自动补间的动画：

.button {
 transition: all 0.3s ease-in-out;
}

特点：

腾讯云-实习 · 第 1 轮 · 二面

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

← 第 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 轮 · 一面

Fri, 25 Jul 2025 02:54:17 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 一面，更多考察的是八股文的基础知识

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

1. 什么是 HTML 语义化？

题库原题：什么是 HTML 语义化？

题目要点

先看下什么是HTML：

参考答案

先看下什么是HTML：

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。

那么如何理解 Web 语义化？

通俗的来讲就是从代码上来展示页面的结构，而不是从最终视觉上来展示结构。

单纯的HTML代码是不带任何样式的只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等。

但是为什么我们只写HTML在浏览器中不同的标签也是有不同的样式呢？

那是因为各个浏览器都自带的有相应标签的默认样式，为了方便在没有设定样式的情况下友好的展示页面。

良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容。

为什么要使用语义化标签？

有伙伴会认为，我用DIV+CSS也能做出来一样的效果，虽然单纯看实现效果，两者并没有什么区别。

但是页面不止是给人看的，机器也要看爬虫也要看，网页结构更清晰方便开发维护。

特别是在网络或其他原因页面样式文件丢失的时候，良好语义结构组成的页面，肯定比全是div的页面对用户更友好。

总结下语义化的优点：

标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说。
有利于不同设备的解析（屏幕阅读器，盲人阅读器等）
有利于构建清晰的机构，有利于团队的开发、维护

2. CSS盒模型、Flex布局与Grid布局的区别及适用场景

题目要点

CSS盒模型/box-sizing/Flex布局/Grid布局/一维 vs 二维/布局适用场景/页面结构设计

参考答案

一、考察点

是否掌握 CSS 中盒模型的基本概念及布局行为
Flex 与 Grid 的本质区别及使用场景是否清晰
能否结合实际 UI 场景选择最合适的布局方式
是否理解布局系统与页面结构解耦的设计思想

二、参考答案

1.1 原理说明

✅ 一、CSS 盒模型（Box Model）

定义：所有 HTML 元素都可以看作一个矩形盒子，由以下四层组成：

腾讯-视频-校招 · 第 1 轮 · 一面

Thu, 17 Jul 2025 14:02:21 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： - 考点覆盖：网络协议（HTTP/HTTPS、OSI、WebSocket、QUIC、CORS）、安全（XSS、缓存投毒）、性能优化（缓存、懒加载/预加载）、工程化（版本更新、路由）、Vue框架细节。

难易度：中等偏上。前6题基础网络必会，7-10题需理解协议差异与实战场景，11-16题偏重安全与缓存的落地策略，17-20题考察框架原理与工程思维，梯度合理但深度要求高。

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

1. 统计出现次数最多的字符以及出现的次数

题目描述：

编写一个函数，接收一个字符串作为输入，统计并返回出现次数最多的字符及其出现的次数。如果有多个字符出现次数相同且最多，则返回所有这些字符及其出现次数。
输入输出要求：

输入：一个字符串（只包含字母和数字）。
输出：一个对象，包含出现次数最多的字符及其出现次数。示例：

const input = "aabbccddde";
const result = mostFrequentChar(input);
console.log(result); // 输出：{ a: 2, b: 2, c: 2, d: 3, e: 1 }

题目要点

时间复杂度：O(n)，需要遍历字符串两次
空间复杂度：O(k)，k为不同字符的数量
关键点：正确理解题意，返回所有出现次数最多的字符
优化：可以在统计过程中同时记录最大值，减少遍历次数

参考答案

这道题需要统计字符串中每个字符的出现次数，然后找出出现次数最多的字符。需要注意的是，题目要求如果有多个字符出现次数相同且最多，要返回所有这些字符。

解题思路：

遍历字符串，使用Map或对象统计每个字符的出现次数
找出最大出现次数
筛选出所有达到最大出现次数的字符
返回结果对象

代码实现：

function mostFrequentChar(str) {
 // 边界情况处理
 if (!str || str.length === 0) {
 return {};
 }

 // 统计每个字符的出现次数
 const charCount = {};
 for (let char of str) {
 charCount[char] = (charCount[char] || 0) + 1;
 }

 // 找出最大出现次数
 const maxCount = Math.max(...Object.values(charCount));

 // 筛选出所有达到最大出现次数的字符
 const result = {};
 for (let [char, count] of Object.entries(charCount)) {
 if (count === maxCount) {
 result[char] = count;
 }
 }

 return result;
}

// 优化版本：使用Map，一次遍历完成
function mostFrequentCharOptimized(str) {
 if (!str || str.length === 0) {
 return {};
 }

 const charCount = new Map();
 let maxCount = 0;

 // 统计字符出现次数，同时记录最大值
 for (let char of str) {
 const count = (charCount.get(char) || 0) + 1;
 charCount.set(char, count);
 maxCount = Math.max(maxCount, count);
 }

 // 构建结果对象
 const result = {};
 for (let [char, count] of charCount) {
 if (count === maxCount) {
 result[char] = count;
 }
 }

 return result;
}

测试用例：

腾讯-QQ浏览器-校招 · 第 1 轮 · 一面

Sun, 06 Jul 2025 13:37:36 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 中高级难度。既有基础概念的深度考察，也有复杂业务场景的解决方案设计，对于校招同学有一定的挑战。

本轮要点： ### 考察范围

这轮面试主要考察三个维度：

项目实战能力：通过虚拟列表、Token管理等具体技术方案考察解决复杂业务问题的能力
前端基础功底：涵盖浏览器原理、JavaScript核心机制、CSS布局、性能优化等核心知识
计算机基础：通过算法题考察数据结构和算法基础

重点准备知识点

虚拟列表等性能优化方案的深度理解和实践经验
HTTP协议、浏览器工作原理、缓存机制等网络基础
JavaScript事件循环、闭包、原型链等语言核心特性
Vue/React框架原理，特别是响应式系统和虚拟DOM
CSS布局方案和BFC等核心概念
前端工程化和性能优化实践
基础算法和数据结构

建议

深入理解前端核心概念，不仅知其然还要知其所以然
积累实际项目经验，特别是性能优化和复杂业务场景的解决方案
保持对新技术的敏感度，了解技术发展趋势
加强计算机基础，算法和数据结构是技术能力的重要体现
培养系统性思维，能够从多个角度分析和解决问题

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

1. 请讲一下你项目中的的虚拟列表，包括实现原理、优化过程以及如何设置缓冲区？

题目要点

核心原理：只渲染可视区域，动态计算显示范围
关键技术：滚动监听、索引计算、位置缓存
优化重点：动态高度处理、缓冲区设置、滚动性能
实际考虑：内存占用与性能平衡

参考答案

虚拟列表是解决大数据量列表渲染性能问题的核心方案。其实现原理基于"只渲染可视区域"的思想。

具体实现上，首先需要确定容器的可视高度和每个列表项的高度。通过监听滚动事件，实时计算当前滚动位置对应的起始索引和结束索引。核心公式是：起始索引 = Math.floor(scrollTop / itemHeight)，结束索引 = 起始索引 + Math.ceil(containerHeight / itemHeight)。

在优化过程中遇到的主要挑战是处理动态高度的列表项。解决方案是维护一个位置缓存数组，记录每个列表项的实际高度和累计偏移量。当列表项高度发生变化时，需要更新缓存并重新计算后续项的位置。

缓冲区设置是性能优化的关键。通常在可视区域前后各增加5-10个列表项作为缓冲，具体数量需要根据列表项的复杂度和渲染耗时来调整。缓冲区过小会导致快速滚动时出现白屏，过大则会增加内存占用和渲染负担。

对于滚动性能优化，还需要结合防抖节流、requestAnimationFrame等技术，确保滚动的流畅性。

2. 在虚拟列表中，如何结合防抖和节流技术优化性能？

题目要点

节流应用：滚动事件实时响应，保证连续性操作的流畅度
防抖应用：计算密集操作、数据预加载等非实时场景
组合策略：根据不同操作特性选择合适的优化方案
参数调优：时间间隔需要平衡性能和用户体验

参考答案

在虚拟列表的性能优化中，防抖和节流扮演着不同但互补的角色。

对于滚动事件本身，节流是更合适的选择。因为滚动是连续性操作，用户期望得到实时反馈，而不是等待操作结束后才响应。通常设置16-33ms的节流间隔，对应60-30fps的更新频率，既保证了流畅度又避免了过度计算。

防抖则主要用于一些计算密集型的操作。比如当滚动停止后，可能需要进行数据预加载、图片懒加载等操作，这些可以使用防抖来避免频繁触发。另外，对于搜索框结合虚拟列表的场景，搜索关键词的处理也适合使用防抖。

在实际实现中，还需要考虑组合使用的场景。比如可以对滚动事件使用节流进行实时响应，同时对复杂的重新计算逻辑使用防抖进行优化。这样既保证了用户体验，又避免了不必要的性能消耗。

需要注意的是，节流和防抖的时间设置需要根据具体业务场景调整，过短可能达不到优化效果，过长则会影响用户体验。

3. 如何使用 requestAnimationFrame 优化虚拟列表的滚动性能？

题目要点

核心优势：与浏览器重绘周期同步，避免无效渲染
应用场景：DOM更新调度、动画优化、时间切片
性能提升：减少重排重绘、合并多次操作、避免掉帧
注意事项：刷新率适配、兼容性考虑

参考答案

requestAnimationFrame是浏览器提供的专门用于动画优化的API，它能够确保回调函数在浏览器下一次重绘之前执行，这对虚拟列表的滚动性能优化具有重要意义。

腾讯-暑期实习 · 第 1 轮 · 一面

Sun, 29 Jun 2025 13:39:17 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 主要几种在以下几个方向：

vue3原理
前端工程化：webpack、vite、pnpm、monorepo
前端安全
计算机网络

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

1. JSON数组扁平化&数据过滤

假设有一个模拟接口 fetchData()，返回 Promise 对象，数据格式为：

{
"data": [
 { "id": 1, "value": 5 },
 { "id": 2, "value": 10, "children": [
 { "id": 3, "value": 8 } ]
 }
]
}

要求：

将接口返回的嵌套数据结构扁平化为一维数组；
筛选出 value 大于等于 8 的元素；
按 id 升序排列后，渲染为 <ul> 列表。

示例输出：

<ul>
<li>id:2, value:10</li>
<li>id:3, value:8</li>
</ul>

题目要点

递归与数据结构处理：考查候选人是否理解如何处理嵌套结构。
数组操作基础：filter/sort/map 等高阶方法掌握情况。
异步处理能力：是否熟悉 Promise 的使用。
原生 DOM 操作：不用框架的情况下渲染 HTML。

参考答案

1.1 原理说明

此题本质是一个数据处理与 DOM 渲染综合题，目标包括：