京东

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

← 已是第一轮 · 返回本次面经 · 第 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则用于用户设置、主题偏好、离线数据缓存等需要持久化的场景。在移动端开发中，还需要考虑存储空间限制和清理策略。 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 中级偏上难度，适合有扎实基础和一定项目经验的应届生。既考察理论知识的深度，也注重实践能力的广度，需要候选人具备较强的学习能力和技术整合能力。 本轮要点： ### 考察范围 这轮校招面试主要考察四个维度： 个人经历和项目实战：通过学习经历、项目搭建、协作经验考察实际开发能力 移动端和多端开发：小程序开发、多端适配、移动端优化等实用技能 前端基础知识：JavaScript核心概念、Vue框架原理、浏览器工作机制等 工程化和架构思维：打包工具、插件开发、系统设计等高级能力 重点准备知识点 项目经验的系统性总结和技术亮点提炼 小程序开发框架和多端适配方案 JavaScript作用域、变量提升等核心机制 Vue组件通信、生命周期、插槽等框架特性 前端性能优化和工程化实践 实时通讯和AI集成的技术方案 本轮共 25 道题。答案默认折叠，便于先自行作答。 1. 介绍自己的学习和实习经历 题目要点 学习路径：从基础到框架的系统性学习过程 实习经验：具体项目和技术栈的实践应用 协作能力：与团队成员的配合和沟通经验 技术深度：不仅会用还要理解原理的学习态度 参考答案 在学习经历方面，计算机科学专业背景为前端开发奠定了扎实的理论基础。大学期间系统学习了数据结构、算法、计算机网络等核心课程，这些知识在后续的前端开发中发挥了重要作用。 前端技术的学习路径比较系统，从HTML、CSS、JavaScript基础开始，逐步深入到现代前端框架。先掌握了Vue.js的基本用法，然后学习了React和小程序开发。在学习过程中特别注重实践，每学习一个新技术都会通过项目来巩固理解。 实习经历主要集中在两个阶段。第一次实习主要负责公司官网的维护和功能迭代，使用Vue.js技术栈，参与了从需求分析到上线部署的完整流程。这个过程中学会了如何与产品经理、设计师协作，也了解了企业级项目的开发规范。 第二次实习参与了一个移动端项目的开发，使用uni-app框架实现多端适配。在这个项目中主要负责用户中心模块的开发，包括登录注册、个人信息管理、订单查询等功能。通过这次实习深入了解了移动端开发的特点和挑战。 在学习和实习过程中，特别注重技术深度的挖掘。不仅学会了如何使用各种技术，更重要的是理解了技术背后的原理。比如学习Vue时，会去了解响应式系统的实现机制；学习webpack时，会研究打包优化的各种策略。 2. 讲一下你的项目搭建过程，用到了哪个脚手架，有没有做其他工作？ 题目要点 脚手架选择：Vue CLI vs Vite的适用场景和特点 配置定制：代码规范、构建优化、环境管理 开发规范：团队协作的标准化流程 工程化实践：组件库、测试、部署等完整流程 参考答案 项目搭建通常会根据具体需求选择合适的脚手架工具。对于Vue项目，主要使用Vue CLI和Vite两种方案。Vue CLI适合需要复杂配置的企业级项目，提供了完整的插件生态和配置选项。Vite则适合快速开发，启动速度更快，热更新体验更好。 具体的搭建流程包括几个关键步骤。首先是技术栈选择，根据项目需求确定使用的框架、UI库、状态管理方案等。然后使用脚手架创建基础项目结构，配置开发环境和构建流程。 在基础搭建完成后，会进行一系列的定制化配置。包括配置ESLint和Prettier确保代码质量，设置路由和状态管理的基础结构，配置axios拦截器处理API请求，设置环境变量管理不同环境的配置。 还会建立项目的开发规范，包括目录结构规范、组件命名规范、Git提交规范等。这些规范对于团队协作非常重要，能够保证代码的一致性和可维护性。 在构建优化方面，会配置代码分割、压缩、缓存等策略。对于生产环境，还会配置CDN、Gzip压缩、性能监控等。这些配置虽然不是核心业务逻辑，但对项目的性能和稳定性有重要影响。 除了技术层面的工作，还会考虑项目的可持续发展。比如建立组件库，提取公共组件和工具函数；配置自动化测试，保证代码质量；建立CI/CD流程，实现自动化部署。 3. 讲一下你在学校参与的协作项目 题目要点 项目背景：技术栈选择和架构设计 个人职责：具体负责的模块和功能实现 协作流程：Git管理、代码审查、敏捷开发 问题解决：接口对接、代码规范等实际挑战 参考答案 在学校期间参与了一个在线学习平台的开发项目，这是一个5人团队的协作项目，持续了一个学期。项目采用前后端分离的架构，前端使用Vue.js，后端使用Node.js。 在项目中主要负责用户管理和课程展示模块的开发。用户管理包括注册登录、个人信息维护、学习进度跟踪等功能。课程展示模块需要支持视频播放、课件下载、评论互动等复杂功能。 团队协作方面，使用Git进行版本控制，建立了完整的分支管理策略。主分支用于生产环境，开发分支用于功能集成，每个人都有自己的特性分支。通过Pull Request的方式进行代码审查，确保代码质量。 项目管理使用敏捷开发方法，每周进行一次迭代规划，每天有简短的站会同步进度。使用Trello进行任务管理，每个功能都有明确的负责人和完成时间。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本次面试深度考察JavaScript核心原理（闭包、继承实现）、前端框架（Vue响应式机制、虚拟DOM性能、Vue vs React区别）、性能优化（高并发请求处理、HTTP/2应用）、前端安全（XSS/CSRF防御）。难点聚焦于Vue响应式系统限制的解决（如动态字段更新）、复杂布局实现（自适应流式），以及高效算法设计（O(n)去重）。 本轮共 14 道题。答案默认折叠，便于先自行作答。 1. 自我介绍 题目要点 个人背景、能力、经验。 参考答案 我叫[姓名]，毕业于[学校]，专业是[专业]。我有[X]年的前端开发经验，熟练掌握HTML、CSS、JavaScript等前端技术，熟悉Vue.js和React框架。在项目中，我注重代码质量和用户体验，善于解决复杂的技术问题。我曾参与过多个大型项目的开发，例如[项目名称]，负责[具体工作]，通过优化代码结构和性能，提升了页面加载速度和用户体验。 2. 怎么学习javascript的？讲一下闭包，自己的使用场景 题目要点 JavaScript学习方法、闭包概念及应用。 参考答案 学习JavaScript时，我首先从基础语法入手，通过阅读经典书籍如《JavaScript高级程序设计》来系统地学习。闭包是JavaScript中的一个重要概念，它允许函数记住并访问其创建时所在的作用域链中的变量。闭包的使用场景很多，比如在事件处理中，可以使用闭包来保存事件相关的数据。例如，创建一个计数器函数，每次调用时返回当前的计数值，利用闭包可以保持计数器的状态。 3. Javascript如何实现继承？ 题库原题：Javascript如何实现继承？ 题目要点 1. 原型链继承 通过将一个构造函数的实例作为另一个构造函数的原型，实现属性和方法的继承。 特点 简单易实现。 缺点是父类实例的属性会被所有子类实例共享。 2. 借用构造函数（经典继承） 通过在子类构造函数中调用父类构造函数，实现属性的继承。 特点 避免了原型链继承共享属性的问题。 但无法继承父类的原型方法。 3. 组合继承（原型链+借用构造函数） 结合原型链继承和借用构造函数的方法，既调用父类构造函数，又将父类原型赋值给子类原型。 特点 可以继承实例属性和原型方法。 需要注意避免构造函数属性的多次调用。 4. 原型式继承 使用一个函数来创建一个新对象，并将这个新对象的原型指向另一个对象。 特点 适用于对象之间的属性继承，不涉及构造函数。 5. 寄生式继承 基于原型式继承，但添加了额外的包装函数，以提供更好的控制和灵活性。 特点 通过创建对象的副本来实现继承，避免修改原始对象。 6. ES6 类继承 使用class关键字和extends关键字实现继承。 特点 语法简洁，易于理解。 底层仍然是基于原型链实现。 参考答案 一、是什么 继承（inheritance）是面向对象软件技术当中的一个概念。 如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类” 继承的优点 继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试聚焦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（防抖）函数 题库原题：实现 debounce（防抖）函数 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 考察核心集中在前端性能优化（如无限加载卡顿、页面渲染延迟）、CSS布局与兼容性（如Flexbox自适应、跨浏览器适配）及Vue框架原理（如响应式限制、虚拟DOM优劣）。需重点准备懒加载/虚拟滚动优化、兼容性Hack技巧、异步执行顺序分析及需求拆分设计能力。 本轮共 12 道题。答案默认折叠，便于先自行作答。 1. 现在我们有一个 618 活动页的需求，需要你来做，你会如何拆分需求，如何设计？ 题目要点 需求分析与设计能力 参考答案 首先与产品、设计、运营等多部门沟通，明确活动页的核心功能、促销规则、页面风格等基本需求。例如，确定活动主题（如限时秒杀、满减优惠等）、预计流量、商品展示形式等。 根据功能模块拆分需求，可将活动页分为头部导航区（包含活动标题、时间、入口等信息）、商品展示区（如秒杀商品列表、热门推荐商品列表等）、促销信息区（展示活动规则、优惠券领取等）、底部信息区（如活动说明、客服入口等）。 在设计上，根据品牌风格和活动主题确定整体视觉风格，包括配色方案（如节日氛围的红色、金色等）、字体选择、图片风格等。针对商品展示区，考虑采用网格布局或瀑布流布局，以合理展示商品信息，包括商品图片、名称、价格、优惠信息等。对于交互设计，需考虑页面的滚动加载、商品点击跳转、优惠券领取等交互效果，确保用户体验流畅。 2. 商品列表中一行有五个商品卡片，最后一个自适应剩余空间，怎么实现。 题目要点 CSS 布局能力 参考答案 可以使用 CSS 的 Flexbox 布局来实现。首先将商品列表的容器设置为 flex 布局，即 display: flex。然后对前四个商品卡片设置固定宽度，例如 width: 100px，最后一个商品卡片设置 flex: 1，这样它就会占据所在行剩余的空间，实现自适应效果。同时，为了防止一行中商品卡片因内容过多而超出父容器宽度，可对每个商品卡片设置 overflow: hidden，确保其内容在自身区域内显示，并且可以添加 white - space: nowrap 和 text - overflow: ellipsis 来处理溢出的文字内容。 3. CSS 样式开发中你都遇到过哪些兼容性问题，如何解决的。 题目要点 CSS 问题解决能力及兼容性知识 参考答案 在不同浏览器中遇到过盒模型问题，例如 IE 浏览器的怪异盒模型与其他浏览器的标准盒模型不同，导致元素尺寸计算不一致。解决方法是使用 box - sizing: border - box，并结合 CSS 重置样式表统一各浏览器的盒模型表现。 2. 浮动布局在某些低版本浏览器中可能出现父元素高度塌陷或子元素排列不整齐的问题。可以通过为父元素添加 clearfix 清除浮动，即设置父元素 overflow: hidden 或使用伪元素 :after 添加清除浮动的样式来解决。 3. CSS3 动画在部分浏览器中可能不支持，或者动画效果不一致。例如，IE 浏览器对 CSS3 动画的支持较弱。解决方法是使用渐进增强的方式，在支持 CSS3 动画的浏览器中展示动画效果，对于不支持的浏览器提供简单的过渡效果或静态样式，并利用Modernizr 等工具进行特性检测，根据检测结果加载相应的样式和脚本。 4. 字体渲染在不同操作系统和浏览器中可能存在差异，影响页面的美观和一致性。可以通过设置字体的 font - family 为系统安全字体组合，并使用相对单位（如 em、rem）设置字体大小，以提高字体的兼容性和可读性。 4. 你刚刚说的上滑无限加载有没有性能问题，你怎么解决？ 题目要点 前端性能优化知识 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 面试时间： 60分钟 本轮共 16 道题。答案默认折叠，便于先自行作答。 1. 前端和后端有什么区别？ 题目要点 职责分工不同，前端关注用户体验，后端关注业务逻辑，但需要密切协作完成产品开发。 参考答案 前端和后端在职责、技术栈、关注点等方面都有明显区别。前端主要负责用户界面和交互体验，使用HTML、CSS、JavaScript等技术，关注的是如何让用户更好地使用产品。后端则负责业务逻辑处理、数据存储、系统架构等，使用Java、Python、Node.js等语言，关注的是系统的稳定性、安全性和性能。 工作内容上，前端需要将设计稿转化为可交互的页面，处理用户输入、数据展示、页面跳转等；后端需要设计数据库结构、编写API接口、处理业务逻辑、确保数据安全等。思维方式也不同，前端更多从用户角度思考问题，注重体验和视觉效果；后端更多从系统角度思考，注重逻辑严谨性和数据一致性。 但两者并不是完全独立的，现代Web开发中前后端需要密切协作，通过API接口进行数据交互，共同完成产品功能。随着技术发展，界限也在模糊，比如Node.js让前端开发者也能做后端开发。 2. 如果现在有一个需要前后端协作的功能开发需求，你认为前端和后端在沟通和配合上最重要的是什么？ 题目要点 API接口设计一致性、数据格式规范、清晰的沟通方式、完善的联调流程是协作的关键。 参考答案 最重要的是在项目开始前就API接口的设计达成一致。这包括接口的URL设计、请求方法、参数格式、返回数据结构、错误处理方式等。清晰的接口文档能够避免后续很多沟通成本和返工问题。 其次是建立统一的数据格式规范。比如时间格式、状态码定义、分页参数等，这些看似细节的问题如果不提前约定，会在开发过程中产生很多摩擦。还要约定好错误处理机制，什么情况下返回什么状态码，错误信息的格式等。 沟通方式也很重要。建议使用统一的协作工具，如Postman分享API文档，或者使用Swagger等工具生成接口文档。定期的技术评审会议也必不可少，确保双方对需求理解一致。 最后是要建立联调测试的流程。前端可以先用Mock数据开发，后端接口完成后再进行联调，这样能够并行开发，提高效率。 3. 项目是怎么接到的？ 题目要点 通过课程项目、实验室项目、实习项目和个人项目等多种渠道积累开发经验。 参考答案 主要通过几个渠道获得项目经验。首先是课程项目，在Web开发、软件工程等课程中，老师会布置一些实际的开发任务，比如开发一个在线学习平台、图书管理系统等。这些项目虽然规模不大，但涵盖了完整的开发流程。 实验室项目是另一个重要来源。导师的研究项目中经常需要开发一些数据展示、实验管理的Web系统，会让研究生参与开发。这类项目更贴近实际应用，需求也更复杂一些。 还有就是实习期间参与的公司项目。虽然作为实习生主要是辅助开发，但能够接触到真实的商业项目，了解完整的产品开发流程。 另外也会主动寻找一些开源项目参与贡献，或者自己发起一些小项目来练习新技术。比如看到一个有趣的API，就会想着用它开发一个小应用来练手。 4. 讲一个你觉得最有成就感的项目 题目要点 科研数据可视化平台，解决了性能优化和数据适配的技术挑战，最终被多个实验室采用。 参考答案 最有成就感的是在实验室开发的一个科研数据可视化平台。这个项目是为了帮助实验室的研究人员更好地分析和展示实验数据。 项目的挑战在于需要处理大量的科研数据，并且要支持多种图表类型的动态切换。数据量大的时候页面会卡顿，用户体验很差。通过学习和实践，使用了虚拟滚动技术处理大列表，用Web Workers在后台处理数据计算，用Canvas替代DOM渲染复杂图表，最终解决了性能问题。 另一个难点是不同研究方向的数据格式差异很大，需要设计一个灵活的数据适配层。通过抽象出通用的数据模型，并提供配置化的字段映射功能，让系统能够适应不同的数据格式。 最终这个平台不仅在我们实验室使用，还被其他几个实验室采用，帮助研究人员提高了数据分析效率。看到自己开发的系统真正解决了实际问题，并且得到用户认可，这种成就感是最大的收获。 5. 前端怎么样才是一种好的体验？ 题目要点 性能优化、交互反馈改进、错误处理优化、移动端适配、基于反馈的持续改进。 参考答案 好的前端体验应该是用户感知不到技术存在的体验。首先是性能方面，页面加载要快，交互要流畅，用户不应该感受到明显的等待时间。这需要做好资源优化、懒加载、缓存策略等。 界面设计要直观易懂，用户能够快速找到需要的功能，操作流程要符合用户习惯。响应式设计也很重要，在不同设备上都能提供良好的体验。 交互反馈要及时准确。用户的每个操作都应该有明确的反馈，比如按钮点击效果、加载状态提示、操作结果通知等。错误处理要友好，当出现问题时，要给用户清晰的错误信息和解决建议。 可访问性也是好体验的重要组成部分。要考虑到不同能力用户的需求，比如键盘导航、屏幕阅读器支持等。 最后是要保持一致性，整个应用的交互模式、视觉风格、信息架构都要保持统一，让用户形成稳定的使用预期。 6. 平时怎么学习前端的？ 题目要点 系统性学习、实践项目、阅读源码、关注社区、记录总结、保持好奇心。 参考答案 学习前端主要通过几个渠道。首先是系统性学习，通过在线课程平台如慕课网、极客时间等学习完整的技术体系。看技术书籍也很重要，比如《JavaScript高级程序设计》、《CSS权威指南》等经典书籍能够建立扎实的基础。 实践是最重要的学习方式。会跟着教程做一些小项目，然后尝试改进和扩展功能。GitHub上有很多优秀的开源项目，通过阅读源码能够学到很多最佳实践。 技术社区是获取最新信息的重要渠道。经常浏览掘金、思否、MDN等网站，关注前端技术的发展趋势。参加一些技术分享会和线上讲座，能够了解行业动态和实际应用经验。 建立了自己的学习笔记系统，将学到的知识点整理成文档，定期回顾和总结。还会写一些技术博客，通过输出来加深理解。 保持好奇心很重要，看到新技术会主动去了解和尝试。比如最近学习了WebAssembly、微前端等新技术，虽然可能暂时用不到，但能够拓宽技术视野。 7. 最近了解到的新技术讲一下 题目要点 WebAssembly提供高性能计算能力，微前端解决大型应用架构问题，新CSS特性增强布局能力。 ...