← 已是第一轮 · 返回本次面经 · 已是最后一轮 →
本轮概述： 主要考察前端基础，难度不大。
本轮共 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. 当前项目还有哪些可以优化的地方 题目要点 从性能、体验、质量三个维度分析优化空间，体现对项目全局的思考和持续改进意识。
...