百度

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 该轮主要考察前端基础知识、JavaScript高级特性、HTTP协议、Vue与React框架对比、Git操作以及算法实现能力。问题涵盖理论理解与实际应用，氛围较为专业。 本轮共 16 道题。答案默认折叠，便于先自行作答。 1. 如何判断一个变量是数组？ 题库原题：判断数组的方式有哪些？ 题目要点 推荐方法：使用 Array.isArray()，这是最简单、最可靠的方式来检查一个值是否为数组。 其他方法：instanceof 和 Object.prototype.toString.call() 也很有效，但有一些特定的局限性。constructor 和 isPrototypeOf() 方法不如 Array.isArray() 可靠，且在某些情况下可能会出现问题。 参考答案 判断一个值是否为数组的方式有多种： 1. Array.isArray() 方法 描述：这是 ES5 引入的标准方法，推荐用于检查一个值是否为数组。 语法：Array.isArray(value) 示例： console.log(Array.isArray([1, 2, 3])); // true console.log(Array.isArray('hello')); // false 2. instanceof 操作符 描述：使用 instanceof 操作符来判断对象是否是 Array 的实例。 语法：value instanceof Array 示例： console.log([1, 2, 3] instanceof Array); // true console.log('hello' instanceof Array); // false 3. Object.prototype.toString.call() 方法 描述：使用 Object.prototype.toString.call() 可以准确判断一个对象的类型，包括数组。它返回 [object Array] 对于数组，其他类型则返回不同的结果。 语法：Object.prototype.toString.call(value) 示例： console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array] console.log(Object.prototype.toString.call('hello')); // [object String] 4. constructor 属性 描述：检查 constructor 属性是否为 Array。这种方法不如 Array.isArray() 可靠，因为 constructor 可以被改变。 语法：value.constructor === Array 示例： console.log([1, 2, 3].constructor === Array); // true console.log('hello'.constructor === Array); // false 5. Array.prototype.isPrototypeOf() 方法 描述：检查数组的 prototype 是否在目标对象的 prototype 链上。这种方法也可以用来判断一个对象是否为数组。 语法：Array.prototype.isPrototypeOf(value) 示例： console.log(Array.prototype.isPrototypeOf([1, 2, 3])); // true console.log(Array.prototype.isPrototypeOf('hello')); // false 6. 使用 constructor 属性和原型链 描述：结合 constructor 属性和原型链检查。这个方法有一定的局限性，不推荐使用。 示例： function isArray(value) { return value && typeof value === 'object' && value.constructor === Array; } console.log(isArray([1, 2, 3])); // true console.log(isArray('hello')); // false 2. 讲一下闭包及其优缺点。 题目要点 函数嵌套, 词法作用域, 内存管理 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 该轮主要考察前端开发相关知识，包括动画实现、性能优化、React优化、Web Accessibility、计时器处理、WebSocket、缓存策略、国际化、兼容性问题等。题目以主观题为主，注重对核心原理和实际应用场景的理解。 本轮共 18 道题。答案默认折叠，便于先自行作答。 1. 实现一个动画，当用户鼠标悬停在按钮上时，按钮逐渐变大 题目要点 CSS transition, 动画性能优化, 硬件加速, 事件监听 参考答案 在实现此类动画时，可以使用CSS的transition属性或JavaScript的requestAnimationFrame方法。重点在于控制动画的流畅性和性能。可以通过设置合适的过渡时间（transition-duration）和使用硬件加速（如transform: scale()）来提升性能。此外，注意避免不必要的重排和重绘，确保动画的平滑性。 2. 如何避免动画过程中的卡顿？ 题库原题：在解决动画卡顿问题时，会引导硬件加速，那么硬件加速的原理是什么？ 题目要点 硬件加速是指利用 GPU（图形处理单元）来执行图形和动画相关的计算任务，以减轻 CPU（中央处理单元）的负担。GPU 专为处理图形和图像的高吞吐量操作而设计，因此在执行动画和复杂图形渲染时，硬件加速可以提供更流畅的体验。 原理解析 GPU vs CPU： GPU 拥有更多的核心，适合并行处理大量计算任务，而 CPU 核心较少，更适合串行处理复杂逻辑。 图形渲染： GPU 优化了图形渲染流程，包括顶点处理、像素着色等，这些是动画和图形显示的基础。 减少重绘和回流： 通过硬件加速，可以减少浏览器的重绘（repaint）和回流（reflow）次数，这些操作通常由 DOM 变更触发，非常消耗性能。 合成层（Compositing Layer）： 浏览器使用合成层来合并多个层的图形，GPU 可以快速地在这些层上进行变换和动画。 CSS 属性触发： 某些 CSS 属性，如 transform 的 3D 变换（translate3d、scale3d 等）和 opacity 动画，可以触发硬件加速。 浏览器优化： 浏览器会根据性能和资源情况，自动决定是否使用硬件加速。 考察重点 理解：硬件加速的基本概念和 GPU 在图形渲染中的作用。 应用：知道哪些 CSS 属性可以触发硬件加速，以及如何利用它们来优化动画性能。 参考答案 面试中可能会经常会碰到怎么解决动画卡顿的问题，然后会引导到硬件加速。那么究竟什么是硬件加速，为什么它可以提高咱们的动画效率？我们今天就来一探究竟。 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 这场面试主要围绕前端项目的实际工程能力展开，重点考察了候选人对动态路由、权限控制和状态管理的理解与实践。 同时涉及网络请求优化、缓存机制及组件复用等中高级工程问题，体现出对项目可维护性和性能的关注。 面试还关注了候选人对 TypeScript 应用、学习方法和职业规划的思考，考察其成长潜力与技术视野。 本轮要点： 跨域相关 本轮共 16 道题。答案默认折叠，便于先自行作答。 1. 如何在前端项目中实现动态路由？ 题库原题：如何在前端项目中实现动态路由？ 题目要点 动态路由的核心是将路由配置从静态定义转为运行时生成或挂载。常见做法包括“前端维护完整路由表后过滤”以及“后端下发路由配置”。 具体实现依赖框架提供的 API（如 addRoute、useRoutes），同时需要兼顾权限控制、懒加载与导航组件的解耦，才能在保证安全性的同时保持可扩展性和良好的用户体验。 参考答案 在前端项目中实现动态路由，本质上是根据用户权限、接口返回的数据或者运行时条件，动态地生成或加载路由配置，从而决定页面的可访问性和导航结构。 以 React Router 和 Vue Router 为例，核心思路有一些共通点： 在应用启动时，会有一个静态的基础路由表，用来保证最基本的页面可以正常访问（例如登录页、404 页、Layout 容器等）。而真正需要按用户角色、接口数据控制的路由，则通过接口请求或预置配置动态挂载进路由系统。 常见的实现方式有两类： 一种是前端自行维护完整的路由表，用户登录后，后端返回权限信息（角色、菜单、可访问模块 ID 等），前端在已有的路由表中做过滤，只保留当前用户有权限的部分，再动态挂载到路由系统。这种方式对前端掌控力更强，体验流畅，但需要在前端同步维护一份路由和权限的映射关系。 另一种是由后端直接下发路由配置（通常带有 path、component 标识、子路由结构等），前端拿到配置后再通过组件映射表动态生成路由。这种方式能减轻前端维护压力，但会带来接口设计和前后端耦合的问题。 在技术层面，React Router v6 提供了 useRoutes 可以直接基于对象动态生成路由，Vue Router 也支持 router.addRoute 在运行时动态添加路由。对于懒加载组件，还需要结合 import() 或 defineAsyncComponent（Vue）来实现，避免一次性加载所有页面。 此外，动态路由不仅仅是技术实现，还涉及安全性和用户体验。例如： 在前端动态路由实现时，不能只依赖前端的路由控制，还需要后端接口做权限校验，避免用户绕过前端访问受限页面。 路由结构最好和菜单、面包屑等导航组件解耦，通过统一的数据结构管理，保证后续扩展的灵活性。 在大规模项目中，动态路由还常与微前端、模块化加载结合，按需挂载子应用或子模块。 2. Vue3的addRoute与React Router的动态useRoutes有何区别？如何解决动态路由刷新后失效的问题？ 题库原题：Vue3的addRoute与React Router的动态useRoutes有何区别？如何解决动态路由刷新后失效的问题？ 题目要点 Vue3 的 addRoute 属于“增量挂载”，可以在运行时动态向现有路由表中追加新配置；React Router 的 useRoutes 则是基于配置对象动态生成，强调整体渲染而不是单点挂载。动态路由刷新后失效的根本原因是路由配置只存在于内存中，需要在应用初始化时通过本地存储或接口请求恢复路由数据，才能保证页面刷新后仍能正确访问。 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮共 21 道题。答案默认折叠，便于先自行作答。 1. 深拷贝浅拷贝有什么区别？怎么实现深拷贝？ 题库原题：深拷贝浅拷贝有什么区别？怎么实现深拷贝？ 题目要点 JS数据类型分别基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。 浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。 浅拷贝方法 直接对象复制 Object.assign 深拷贝 JSON.stringify转为字符串再JSON.parse 深度递归遍历 参考答案 一、数据类型存储 前面文章我们讲到，JavaScript中存在两大数据类型： 基本类型 引用类型 基本类型数据保存在在栈内存中 引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中 二、浅拷贝 浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝 如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址 即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址 下面简单实现一个浅拷贝 function shallowClone(obj) { const newObj = {}; for(let prop in obj) { if(obj.hasOwnProperty(prop)){ newObj[prop] = obj[prop]; } } return newObj; } 在JavaScript中，存在浅拷贝的现象有： Object.assign Array.prototype.slice(), Array.prototype.concat() 使用拓展运算符实现的复制 Object.assign var obj = { age: 18, nature: ['smart', 'good'], names: { name1: 'fx', name2: 'xka' }, love: function () { console.log('fx is a great girl') } } var newObj = Object.assign({}, obj); slice() const fxArr = ["One", "Two", "Three"] const fxArrs = fxArr.slice(0) fxArrs[1] = "love"; console.log(fxArr) // ["One", "Two", "Three"] console.log(fxArrs) // ["One", "love", "Three"] concat() const fxArr = ["One", "Two", "Three"] const fxArrs = fxArr.concat() fxArrs[1] = "love"; console.log(fxArr) // ["One", "Two", "Three"] console.log(fxArrs) // ["One", "love", "Three"] 拓展运算符 const fxArr = ["One", "Two", "Three"] const fxArrs = [...fxArr] fxArrs[1] = "love"; console.log(fxArr) // ["One", "Two", "Three"] console.log(fxArrs) // ["One", "love", "Three"] 三、深拷贝 深拷贝开辟一个新的栈，两个对象的属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮共 20 道题。答案默认折叠，便于先自行作答。 1. 有没有使用 Node.js 进行开发的经历？ 题目要点 “不仅仅用过 Node.js，而且能说清楚在前端团队里它解决了哪些实际问题，产生了什么价值。” 这样比单纯回答“用过/没用过”更有亮点。 参考答案 考察的核心是：对 Node.js 的理解深度和在前端/全栈中的实际应用场景。 回答时可以从以下几个角度展开： 1. 使用场景 前端工程化工具链： 使用 Node.js 驱动构建工具（Webpack、Vite、Rollup 等），编写脚本实现自动化构建、代码检查、Mock Server 搭建。 服务端接口开发： 基于 Express、Koa、NestJS 搭建轻量级 API 服务，用于前后端分离项目的接口模拟或小型后台系统。 中间层 / BFF（Backend for Frontend）： 在复杂业务中，用 Node.js 实现前后端解耦，比如统一处理接口聚合、鉴权、缓存。 SSR / SSG 场景： 使用 Next.js 或 Nuxt.js，借助 Node.js 渲染首屏，提升 SEO 和加载体验。 运维与脚本： 编写部署脚本、自动生成文件、批量处理数据。 2. 具体任务 可以结合自身经历强调： 是否搭建过 Mock 服务，辅助前后端并行开发； 是否写过中间层解决跨域、接口聚合问题； 是否在工程化中写过 Node.js 工具脚本（如自动生成路由表、埋点收集脚本）； 是否参与过服务端渲染或静态站点生成相关开发。 3. 收获和亮点 对 事件驱动、非阻塞 I/O 有更深理解，能写出高并发场景下的稳定服务； 学会了在前端视角下如何更好地和后端衔接； 在实际项目中通过 Node.js 提升了团队的开发效率（例如通过脚本工具减少重复劳动）。 2. CSS 3D 变形有哪些常见的属性和方法？ 题目要点 CSS 3D 变形（3D Transform）是 CSS3 提供的一组属性，用来在三维空间中对元素进行旋转、缩放、平移、倾斜等操作。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 面试时间： 60分钟 本轮共 21 道题。答案默认折叠，便于先自行作答。 1. 讲一下你在官网开发中的主要职责，开发的模块以及你觉的比较亮点的地方 题目要点 如果是面试官问到“官网开发中的主要职责、开发的模块以及比较亮点的地方”，一般可以从以下几个角度来回答，既展示你的全局把控能力，又体现你在某些点上有深度。 参考答案 如果是面试官问到“官网开发中的主要职责、开发的模块以及比较亮点的地方”，一般可以从以下几个角度来回答，既展示你的全局把控能力，又体现你在某些点上有深度。 下面是一个参考思路： 1. 主要职责 官网整体架构搭建：根据业务和设计稿，使用 React/Vue + Vite/Next.js/Nuxt.js 等技术栈完成整体框架搭建，包括路由、状态管理、多语言支持等。 公共模块封装：抽象公共组件（如导航栏、页脚、轮播、富文本渲染、内容卡片等），提高复用率，减少重复开发。 性能优化：处理首屏加载速度、资源拆分、图片懒加载、SSR/SSG、SEO 优化。 协作沟通：与产品、UI、后端保持沟通，保证页面上线节奏和质量。 2. 负责的模块（可根据实际情况举例） 首页：承担品牌形象展示，涉及 banner 动效、动态数据展示、视频播放等。 产品/解决方案页：结合后端接口，展示不同产品模块，支持筛选、搜索、动态路由。 活动/新闻动态页：接入 CMS（如 Strapi、Sanity、WordPress 等），支持运营人员通过后台直接发布。 多语言切换模块：基于 i18n 实现官网多语言，支持自动识别浏览器语言，静态资源跟随切换。 SEO 优化模块：处理 meta 信息、OG 标签、站点地图、robots.txt，提升搜索引擎收录效果。 3. 亮点/难点突破 性能优化亮点 利用 SSR/SSG（Next.js/Nuxt.js）提升首屏渲染速度，Lighthouse 分数提升到 90+。 使用图片 CDN + WebP 格式，首页加载时间缩短 30%。 按需加载组件、拆分 bundle，减少首次请求体积。 可配置化思路 引入 CMS 系统，实现官网内容可配置，避免频繁改代码上线，运营可直接维护。 封装通用“模块化组件”，如 Banner、富文本、图文组合，做到拖拽/配置式渲染。 前端体验优化 首页/产品页引入 动效（基于 Lottie 或 GSAP），提升视觉冲击力。 交互细节（滚动吸附、视差动画、过渡效果）增强用户沉浸感。 工程化实践 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮共 15 道题。答案默认折叠，便于先自行作答。 1. 前端实现动画有哪些方式？ 题库原题：前端实现动画有哪些方式？ 题目要点 前端开发中，实现动画的方法多种多样，每种方法都有其适用场景和优缺点。以下是一些常见的实现方式： CSS 动画： 使用 @keyframes 和 animation 属性定义动画。 优点：易于实现，性能好，易于维护。 缺点：功能相对简单，难以实现复杂的交互动画。 CSS 过渡（Transitions）： 使用 transition 属性在状态变化时实现平滑过渡。 优点：简单易用，性能优秀。 缺点：只能用于状态变化的过渡，不适合复杂动画。 JavaScript 动画： 使用 JavaScript 直接操作 DOM 元素的样式属性实现动画。 优点：灵活性高，可以控制动画的每一个细节。 缺点：可能影响性能，需要更多的代码实现。 Web Animations API： 使用 Element.animate() 方法实现动画。 优点：提供更丰富的动画控制和更一致的跨浏览器支持。 缺点：兼容性不如 CSS 动画。 SVG 动画： 使用 SVG 元素和 SMIL（Synchronized Multimedia Integration Language）或 CSS 动画实现动画。 优点：适合矢量图形动画，易于集成。 缺点：浏览器支持和性能可能不如 CSS 动画。 Canvas： 使用 HTML <canvas> 元素和 JavaScript 绘制动画。 优点：适合复杂的图形和游戏动画。 缺点：实现复杂，需要手动管理每一帧的绘制。 CSS 3D 变换： ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本轮面试注重基础知识的掌握与表达，涵盖了前端语言、框架原理、计算机基础、网络协议、数据库设计、加密安全等内容，兼顾技术深度与广度。 本轮共 16 道题。答案默认折叠，便于先自行作答。 1. 面向对象和面向程序设计的主要区别 题目要点 面向过程以过程为中心，强调顺序执行逻辑，适合小型程序； 参考答案 面向过程以过程为中心，强调顺序执行逻辑，适合小型程序； 面向对象以对象和行为抽象为中心，强调封装、继承、多态，适合复杂系统的可维护性与复用性设计。 2. 面向对象的三大特性 题目要点 封装隐藏内部实现、继承提高复用性、多态通过统一接口实现行为差异，三者是构建大型系统的基础。 参考答案 封装隐藏内部实现、继承提高复用性、多态通过统一接口实现行为差异，三者是构建大型系统的基础。 3. 开发的过程中你用到过哪些设计模式？ 题库原题：开发的过程中你用到过哪些设计模式？ 题目要点 设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。 参考答案 设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。 以下是一些常用的设计模式： 单例模式（Singleton）：确保一个类只有一个实例，并提供全局访问点来获取该实例。 工厂模式（Factory）：通过工厂方法创建对象，而不是直接使用new操作符。这样可以隐藏具体实现，并根据需要创建所需类型的对象。 观察者模式（Observer）：定义了一种一对多的依赖关系，当一个对象状态发生改变时，它的所有依赖者（观察者）都会收到通知并自动更新。 装饰器模式（Decorator）：动态地将责任附加到对象上。通过将对象包装在装饰器对象中，可以在运行时为对象添加新的行为。 策略模式（Strategy）：定义了一系列算法，将每个算法封装起来并使它们可以相互替换。策略模式可以让算法独立于客户端而变化。 适配器模式（Adapter）：将一个类的接口转换成客户端所期望的另一个接口。适配器模式使得原本由于接口不匹配而无法一起工作的类可以协同工作。 每个设计模式都有其特定的应用场景和优缺点，可以根据具体情况来选择使用。设计模式可以提高代码结构的灵活性、可维护性和可扩展性，并促进重用和解耦。然而，需要根据实际需求慎重选择和应用设计模式，避免过度设计或不必要的复杂性。 4. JavaScript 中引用数据类型和基本数据类型 题目要点 基本类型包括 Number、String 等，按值传递；引用类型如 Object、Array 按地址传递，赋值为浅拷贝。 参考答案 基本类型包括 Number、String 等，按值传递；引用类型如 Object、Array 按地址传递，赋值为浅拷贝。 5. 谈谈对Vue中双向绑定的理解 题库原题：谈谈对Vue中双向绑定的理解 题目要点 Vue中的双向绑定是其核心特性之一，它极大地简化了数据在视图（View）和模型（Model）之间的同步过程。双向绑定意味着当数据发生变化时，视图会自动更新以反映这些变化，反之亦然，用户在视图上的操作（如输入）也会自动更新到数据中。 实现原理 Vue的双向绑定主要依赖于其响应式系统（Reactivity System）和模板引擎（Template Engine）。 响应式系统：Vue使用Object.defineProperty（在Vue 3中使用了Proxy）来劫持（或说“代理”）对象的getter和setter。当组件的data中的属性被访问或修改时，Vue会拦截这些操作，并执行相应的依赖更新逻辑。这样，Vue就能追踪到数据的变化，并在需要时更新视图。 模板引擎：Vue的模板引擎使用基于HTML的模板语法，允许开发者声明式地将DOM绑定到底层Vue实例的数据上。当数据变化时，Vue的模板引擎会重新渲染模板，生成新的虚拟DOM树，并通过高效的DOM diff算法更新真实的DOM，以反映数据的最新状态。 参考答案 一、什么是双向绑定 我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 三面偏重项目经历、思维深度与工程解决方案，兼顾产品理解与算法能力。 本轮共 6 道题。答案默认折叠，便于先自行作答。 1. 讲一下之前的实习经历，主要负责什么工作，你们团队是做什么的？ 题目要点 在回答实习经历时，可以遵循： “团队是做什么的 → 自己负责了什么 → 过程中遇到的挑战 → 最终的结果和成长”。 这样既能让面试官清楚地看到候选人的贡献，也能体现出对团队目标的理解和自身成长路径的清晰度。 要不要我帮你准备几个可直接套用的实习经历表述范例，比如业务团队和前端基础设施团队两个版本？ 参考答案 这个问题本质上考察的是候选人能否清晰表达实习经历的价值，以及是否能将个人的工作与团队目标联系起来。回答时既要避免流水账式的叙述，也要避免过度拔高，而是重点体现做过什么、为什么做、产生了什么影响。 回答思路 1. 团队定位与职责 先交代团队是做什么的，比如： 是否负责某条具体业务线（例如地图、金融、电商、内容平台）； 是否是基础架构团队（组件库、工程化平台、性能优化、监控体系）； 团队的核心目标是什么（提升用户体验、提升研发效率、支撑业务增长）。 这样能让面试官快速理解环境。 2. 个人负责的工作 描述时可以抓住几个关键词： 核心任务：负责开发某个功能模块、参与前端组件封装、接入监控埋点、优化性能等； 协作方式：是否需要和后端、测试、设计配合，是否参与需求评审或接口联调； 挑战与亮点：是否遇到过性能瓶颈、复杂交互、数据量大等问题，是否提出了改进方案。 避免简单说“写页面、改 bug”，而是强调“通过实现某个功能/优化某处性能，解决了某类问题”。 3. 收获与成长 最后点出在实习期间的成长： 是否熟悉了前端项目的完整研发流程（需求 → 开发 → 测试 → 上线 → 复盘）； 是否积累了在团队协作、代码规范、工程化工具上的经验； 是否提升了技术能力，比如掌握了某些框架或优化手段。 2. 在工作中遇到过什么问题，是怎么解决的？ 题目要点 这个问题的最佳回答路径是： “提出一个具体问题 → 说明如何分析定位 → 阐述解决过程和思考 → 总结结果和反思”。 重点不是问题有多难，而是展现出遇事冷静分析、推动落地并能沉淀经验的能力。 要不要我帮你列几个可以直接在面试里使用的典型案例场景，比如“性能优化”、“构建优化”、“协作问题”三类？ 参考答案 这个问题考察的是候选人的问题意识、分析能力、解决路径和复盘能力。面试官关注的不是问题本身多么“高大上”，而是能否体现出逻辑清晰、方案合理、结果正向。 ...

← 第 1 轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 二面重点考察前端框架理解与性能优化能力，同时关注工程化处理思维和大规模数据处理能力。 本轮共 10 道题。答案默认折叠，便于先自行作答。 1. 元素隐藏的三种方法（display:none、visibility:hidden、opacity:0）及其区别 题目要点 display: none：元素不在文档流中，不占位，无法响应事件。 参考答案 display: none：元素不在文档流中，不占位，无法响应事件。 visibility: hidden：占位但不可见，无法响应事件。 opacity: 0：占位且可响应事件（需用 pointer-events: none 避免）。 2. display:none是否影响DOM渲染性能？如何用CSS实现淡出动画？ 题目要点 display:none 会从渲染树中移除，提升性能，但不能用于动画过渡。 参考答案 display:none 会从渲染树中移除，提升性能，但不能用于动画过渡。 使用 opacity + transition 实现淡出，再用 JS 延迟设置 display:none。 3. Array.from({ length: 5 }, (v, i) => i * 2) 的输出是什么？ 题目要点 输出 [0, 2, 4, 6, 8]。构造一个长度为 5 的数组，并通过索引乘以 2 填充。 参考答案 输出 [0, 2, 4, 6, 8]。构造一个长度为 5 的数组，并通过索引乘以 2 填充。 ...