腾讯-音乐 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 第 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; } 特点: ...

July 25, 2025

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

← 第 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 ...

July 25, 2025

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

← 已是第一轮 · 返回本次面经 · 第 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 元素都可以看作一个矩形盒子,由以下四层组成: ...

July 25, 2025

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

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点: - 考点覆盖:网络协议(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; } 测试用例: ...

July 17, 2025

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

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述: 中高级难度。既有基础概念的深度考察,也有复杂业务场景的解决方案设计,对于校招同学有一定的挑战。 本轮要点: ### 考察范围 这轮面试主要考察三个维度: 项目实战能力:通过虚拟列表、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,它能够确保回调函数在浏览器下一次重绘之前执行,这对虚拟列表的滚动性能优化具有重要意义。 ...

July 6, 2025

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

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点: 主要几种在以下几个方向: 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 渲染综合题,目标包括: ...

June 29, 2025