本次面经共 2 轮。每轮单独成文;轮次标题重复时,以“第 N 轮”和稳定的轮次 ID 区分。
轮次导航
- 第 1 轮 · 一面(14 道题)
- 第 1 轮 · 二面(11 道题)
← 已是第一轮 · 返回本次面经 · 第 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(防抖)函数 ...