第一轮 on Last Stand

腾讯-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. 闭包内存问题及解决方案

题目要点

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

京东-零售-实习 · 第 1 轮 · 第一轮

Mon, 28 Jul 2025 14:15:34 +0000

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

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

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

1. 自我介绍

题目要点

突出专业背景、技术栈掌握情况、学习能力和求职意向，简洁明了地展现个人优势。

参考答案

本科就读于XXX大学计算机科学与技术专业，在校期间系统学习了前端开发相关技术栈，包括HTML、CSS、JavaScript基础，以及React、Vue等现代框架。通过课程项目和个人实践，积累了一定的开发经验。

在技术方面，熟练掌握ES6+语法、响应式布局、组件化开发思想，了解前端工程化工具如Webpack、Vite的使用。同时对前端性能优化、用户体验提升有一定认识。

学习能力较强，能够快速适应新技术和开发环境，具备良好的问题分析和解决能力。希望能够加入贵公司，在实际项目中进一步提升技术水平，为团队贡献价值。

2. 说一说做过的项目中的难点和亮点

题目要点

通过具体的技术难题展现问题解决能力，用数据量化优化效果，体现技术深度和实践价值。

参考答案

难点： 在开发电商类项目时，遇到了商品列表的性能问题。当商品数据量达到几千条时，页面渲染明显卡顿。通过分析发现是频繁的DOM操作和重复渲染导致的。

解决方案是实现了虚拟滚动技术，只渲染可视区域内的商品项，配合防抖优化搜索功能，最终将首屏渲染时间从3秒优化到800毫秒。

亮点： 设计了一套可复用的表单验证组件库。通过高阶组件模式封装了常见的验证逻辑，支持链式调用和自定义验证规则。这套组件在后续项目中被多次复用，提高了开发效率约30%。

3. 手写秒杀倒计时组件

题目要点

实现了完整的倒计时功能，包括时间计算、格式化显示、状态管理和生命周期处理，考虑了边界情况和用户体验。

参考答案

"use client"

import type React from "react"
import { useState, useEffect, useCallback } from "react"

interface CountdownProps {
 targetTimestamp: number // 目标时间戳（毫秒）
 onEnd?: () => void // 倒计时结束回调
}

interface TimeLeft {
 days: number
 hours: number
 minutes: number
 seconds: number
}

const Countdown: React.FC<CountdownProps> = ({ targetTimestamp, onEnd }) => {
 const [timeLeft, setTimeLeft] = useState<TimeLeft>({ days: 0, hours: 0, minutes: 0, seconds: 0 })
 const [isActive, setIsActive] = useState(true)

 const calculateTimeLeft = useCallback((): TimeLeft => {
 const now = Date.now()
 const difference = targetTimestamp - now

 if (difference <= 0) {
 setIsActive(false)
 onEnd?.()
 return { days: 0, hours: 0, minutes: 0, seconds: 0 }
 }

 const days = Math.floor(difference / (1000 * 60 * 60 * 24))
 const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
 const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60))
 const seconds = Math.floor((difference % (1000 * 60)) / 1000)

 return { days, hours, minutes, seconds }
 }, [targetTimestamp, onEnd])

 useEffect(() => {
 if (!isActive) return

 const timer = setInterval(() => {
 setTimeLeft(calculateTimeLeft())
 }, 1000)

 // 初始化时立即计算一次
 setTimeLeft(calculateTimeLeft())

 return () => clearInterval(timer)
 }, [calculateTimeLeft, isActive])

 const formatNumber = (num: number): string => {
 return num.toString().padStart(2, "0")
 }

 if (!isActive) {
 return (
 <div className="countdown-container">
 <span className="countdown-ended">秒杀已结束</span>
 </div>
 )
 }

 return (
 <div className="countdown-container">
 <div className="countdown-wrapper">
 {timeLeft.days > 0 && (
 <>
 <div className="time-unit">
 <span className="time-number">{formatNumber(timeLeft.days)}</span>
 <span className="time-label">天</span>
 </div>
 <span className="separator">:</span>
 </>
 )}
 <div className="time-unit">
 <span className="time-number">{formatNumber(timeLeft.hours)}</span>
 <span className="time-label">时</span>
 </div>
 <span className="separator">:</span>
 <div className="time-unit">
 <span className="time-number">{formatNumber(timeLeft.minutes)}</span>
 <span className="time-label">分</span>
 </div>
 <span className="separator">:</span>
 <div className="time-unit">
 <span className="time-number">{formatNumber(timeLeft.seconds)}</span>
 <span className="time-label">秒</span>
 </div>
 </div>
 </div>
 )
}

// 使用示例
const App: React.FC = () => {
 // 设置一个5分钟后的时间戳
 const targetTime = Date.now() + 5 * 60 * 1000

 const handleCountdownEnd = () => {
 console.log("秒杀活动结束")
 }

 return (
 <div className="app">
 <h1>京东秒杀倒计时</h1>
 <Countdown targetTimestamp={targetTime} onEnd={handleCountdownEnd} />
 </div>
 )
}

export default App

4. 当前项目还有哪些可以优化的地方

题目要点

从性能、体验、质量三个维度分析优化空间，体现对项目全局的思考和持续改进意识。

京东-物流-秋招 · 第 1 轮 · 第一轮

Sun, 27 Jul 2025 15:38:59 +0000

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

本轮概述： 比较简单，主要考察一些前端基础知识。

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

1. 请你简单介绍一下自己，你研究生期间学了哪些课程？

题目要点

计算机专业研究生，系统学习了相关理论课程，对前端技术有浓厚兴趣并有实践经验。

参考答案

本科学习计算机科学与技术专业，研究生阶段继续深入学习相关领域知识。研究生期间的核心课程包括高级数据结构与算法分析、分布式系统、软件架构设计、人工智能原理、计算机图形学、高级数据库系统等。同时选修了前端开发相关的课程，如Web技术与应用、用户界面设计等。在学习过程中，对前端技术产生了浓厚兴趣，通过自学掌握了React、Vue等主流框架，并在多个课程项目中实践应用。研究方向偏向Web技术和用户体验，毕业论文也是围绕前端性能优化展开的研究。

2. 在之前参与的项目里，你主要担任什么职责，都负责了哪些模块的开发呀？

题目要点

主要通过课程项目、实验室项目和实习积累经验，担任前端开发角色，涉及多种常见功能模块。

参考答案

主要参与过学校的课程项目、实验室项目以及一段实习经历。在课程项目中，通常担任前端开发的主要负责人，负责整体页面架构设计和核心功能实现。具体开发过在线学习平台的用户界面、数据可视化展示模块、以及实时聊天功能。在实验室项目中，参与开发了一个科研数据管理系统，主要负责数据录入界面、图表展示组件和用户权限管理前端部分。实习期间，在导师指导下参与了公司内部管理系统的开发，负责表单处理、文件上传和基础的增删改查功能。虽然项目规模不算很大，但通过这些实践对前端开发的完整流程有了较好的理解。

3. HTML5 相较于之前的版本有哪些新特性？

题目要点

语义化标签、原生多媒体支持、Canvas绘图、增强表单、Web存储、丰富的API等新特性。

参考答案

HTML5相比之前版本引入了很多重要特性。语义化标签是最显著的改进，新增了header、nav、main、article、section、aside、footer等标签，让页面结构更清晰，也有利于SEO优化。多媒体支持方面，audio和video标签可以直接嵌入音视频内容，不再依赖Flash等插件。Canvas元素提供了强大的2D绘图能力，可以用JavaScript动态绘制图形和动画。表单功能得到增强，新增了email、url、date、range等输入类型，以及内置的表单验证功能。Web存储API包括localStorage和sessionStorage，提供了比cookie更好的本地存储方案。还有地理位置API、拖拽API、Web Workers等，为Web应用提供了更丰富的功能支持。

4. 浏览器缓存这块，你是怎么理解的？

题目要点

性能优化机制，通过HTTP头部控制，能减少网络请求但需要合理配置避免更新问题。

参考答案

浏览器缓存是Web性能优化的重要机制，通过在本地存储已请求的资源来减少网络请求，提升页面加载速度。在学习过程中了解到，缓存主要通过HTTP协议的相关头部来控制。当浏览器首次请求资源时，服务器会返回资源内容以及缓存相关的响应头，浏览器根据这些头部信息决定是否缓存资源以及缓存多长时间。再次请求相同资源时，浏览器会先检查本地缓存，如果缓存有效就直接使用，否则向服务器发起请求。这个机制在减少服务器负载、节省带宽、提升用户体验方面都有重要作用。在实际项目中也遇到过缓存导致的问题，比如更新代码后用户看不到最新内容。

5. 浏览器缓存主要有哪些类型？

题目要点

HTTP缓存（强缓存、协商缓存）、内存缓存、磁盘缓存、Service Worker缓存等多层次缓存机制。

参考答案

浏览器缓存可以分为几个层次。HTTP缓存是最主要的类型，包括强缓存和协商缓存两种机制。强缓存通过Cache-Control和Expires头部设置过期时间，在有效期内直接使用本地缓存。协商缓存则通过ETag和Last-Modified与服务器确认资源是否有更新。除了HTTP缓存，还有内存缓存和磁盘缓存的区别，内存缓存速度快但容量小，磁盘缓存容量大但速度相对较慢。Service Worker缓存是比较新的技术，可以通过编程方式控制缓存策略，支持离线应用。另外还有DNS缓存、CDN缓存等，虽然不在浏览器内部，但也是整个缓存体系的组成部分。

6. 你有没有遇到过因为浏览器缓存带来的问题？比如，用户没有获取到最新的资源这种情况，你是怎么解决的？

题目要点

通过版本号、时间戳、文件hash等方式解决缓存更新问题，构建工具可以自动化处理。

参考答案

在做课程项目和实习期间确实遇到过这类问题。最典型的情况是修改了CSS或JavaScript文件后，浏览器仍然加载旧版本的文件，导致页面显示异常或功能不正常。刚开始遇到这种问题时比较困惑，后来学习了解到是缓存机制导致的。解决方法主要有几种：最简单的是在开发阶段使用浏览器的强制刷新功能，或者在开发者工具中禁用缓存。对于生产环境，学会了在文件名后添加版本号或时间戳参数来强制更新，比如style.css?v=1.0.1。后来了解到webpack等构建工具可以自动为文件生成hash值，这样文件内容改变时文件名也会改变，从而绕过缓存。这个问题让我深刻理解了缓存机制的重要性和复杂性。

7. 说说 sessionStorage 和 localStorage 的区别

题目要点

主要区别在生命周期和作用域，sessionStorage会话级，localStorage持久化且可跨页面共享。

参考答案

这两个都是HTML5提供的Web存储API，在项目中都有使用过。

最主要的区别是生命周期不同：sessionStorage只在当前浏览器标签页的会话期间有效，关闭标签页后数据就会被清除；而localStorage的数据会持久保存在用户设备上，除非主动删除或者达到存储限制。

作用域方面也不同，sessionStorage的数据只能在当前标签页内访问，不同标签页之间是隔离的；localStorage则可以在同一域名下的所有页面间共享数据。

在实际使用中，sessionStorage适合存储临时的会话相关数据，比如表单的临时保存；localStorage更适合存储用户偏好设置、购物车内容等需要跨会话保持的信息。

8. 除了它们的存储大小区别外，还有哪些不同？

题目要点

事件机制、安全特性、使用场景和数据共享能力等方面存在差异。

参考答案

除了生命周期差异，还有一些其他区别。数据共享机制上，localStorage支持storage事件，当其他页面修改localStorage数据时，当前页面可以监听到这个变化，这在多标签页应用中很有用；而sessionStorage不支持这种跨页面的事件通知。安全性方面，sessionStorage由于其会话特性，数据泄露的风险相对较小。在浏览器兼容性上，两者的支持程度基本一致，都是HTML5的特性。使用场景也有明显区别：sessionStorage常用于单页面应用的状态管理、表单数据的临时保存等；localStorage则用于用户设置、主题偏好、离线数据缓存等需要持久化的场景。在移动端开发中，还需要考虑存储空间限制和清理策略。