前端面试题宝典

滴滴校招提前批面经，这届应届生确实有点卷

简介：一位粉丝投稿了自己的校招提前批面经，不经感慨：这届应届生确实有点卷！
可前往公众号查看原文：前端面试题宝典，关注公众号，查看最新面经和技术文章哦~

大家好，这又快到一年一度的秋招季了，不少大厂陆续开始了校招提前批的招聘工作。

有一位粉丝投稿了自己的校招提前批面经，看完不由感慨：现在的应届生比我们毕业那会，技术牛多了。

咱们下面直接来看面经，大家可以自己评定下，如果是自己当年秋招碰到这样的题，能否通过呢？

所有题目的参考答案或者解析都放到了面经后面的“面试题点评”中，供大家参考。


一面

  1. 现有瀑布流式图片页面（页面下拉时无限加载图片），用JS监听每个图片的点击事件。需要书写DOM和onClick回调。

  2. 讲一下CSS选择器以及权重值的对比。

  3. z-index什么情况下生效？

  4. 层级比较关系原则。

  5. 讲一下event.target和event.currentTarget。

  6. 实现深拷贝，考虑边界问题。

  7. ES6新特性。

  8. 浏览器事件循环。

  9. 请解释JavaScript中的闭包（Closure）是什么，并提供一个使用闭包的例子。

  10. 解释什么是跨域请求（Cross-Origin Request），并说明如何解决跨域问题。

  11. 解释什么是单页应用（Single Page Applications）以及它们的优点和缺点。

  12. 介绍一下Vue.js框架响应式原理。

  13. 解释什么是前端路由（Front-end Routing），以及它与后台路由的区别。

  14. 解释什么是响应式网站设计（Responsive Web Design），并描述如何实现响应式布局。

二面

  1. 讲一下你的实习项目

  2. 实现一个列表页，如何保证刷新后，筛选条件保持不变，将链接给另一个人可以正常打开，并显示对应的条件和页码

  3. 对象数组去重

  • 输入:
input: [
  {
    key:'x',
    value:2,
  },
  {
    key:'x',
    value:3,
  },
  {
    key:'x',
    value:3,
  }
]
  • 输出:
output: [
  {
    key:'x',
    value:2,
  },
  {
    key:'x',
    value:3,
  }
]
  • 进阶：每个对象有一个children属性，children也需去重，不能出现重复的key:value对
{
  key:'x',
  value:2,
  children: [
    {
      key:'x',
      value:2,
      children:[],
    }
  ]
}

  1. 给定字符串，输出该字符串中出现次数最多的字符。（要最优写法）

  2. 解释什么是MVVM模式？它与MVC模式有什么区别？

  3. 解释什么是虚拟DOM（Virtual DOM）？它的作用是什么？

三面

  1. 讲一下实习经历

  2. 如何实现三列布局，两边定宽，中间自适应

  3. 讲一下浮动

  4. 讲一下BFC

  5. 事件管理器设计方案

  6. 前端性能优化

  7. WEB安全

  8. 个人规划


面试题点评：

一面

  1. 瀑布流式图片页面

    • 建议：首先，考虑使用现有的库（如React、Vue.js）来简化开发过程。然后，使用DOM操作来实现图片的加载和点击事件监听。
    • 回答思路：可以使用document.createElement创建图片元素，然后通过appendChild将其添加到页面中。在每个图片上添加onClick回调函数，用于处理点击事件。

  2. CSS选择器和权重值对比

    • 建议：解释CSS选择器的不同类型（元素选择器、类选择器、ID选择器、属性选择器等），以及选择器的权重值计算规则。
    • 回答思路：介绍各种选择器的语法和应用场景，并解释权重值由选择器的特定性和声明位置决定。提供一个具体的例子来说明权重值的对比和计算方法。

  3. z-index生效情况

    • 建议：解释z-index属性的作用和使用场景，以及何时会生效。
    • 回答思路：z-index属性用于控制元素的层叠顺序。它只在具有定位属性（如relative、absolute、fixed）的元素上生效，且仅在这些元素之间进行比较。

  4. 层级比较关系原则

    • 建议：解释层级比较关系原则，以便在复杂的布局中正确使用z-index属性。
    • 回答思路：介绍层叠上下文、层叠顺序和层叠水平等概念。提到如何使用层叠上下文和z-index来控制元素的层级关系，以及如何通过修改HTML结构来改变层叠顺序。

  5. event.target与event.currentTarget

    • 建议：解释event.target和event.currentTarget之间的区别和作用。
    • 回答思路：event.target是触发事件的最底层元素，而event.currentTarget是事件监听器绑定的当前元素。可以通过示例代码演示它们在事件冒泡和捕获过程中的不同行为。

  6. 实现深拷贝

    • 建议：解释深拷贝的概念和应用场景，并讨论边界问题（如循环引用、函数、Symbol等）。
    • 回答思路：可以使用递归方法或其他库（如lodash的cloneDeep）来实现深拷贝。强调要考虑对象的类型，并处理可能遇到的特殊情况。

  7. ES6新特性

    • 建议：列举一些ES6的新特性，并解释它们的优势和用法。
    • 回答思路：可以提到箭头函数、模板字面量、解构赋值、类和模块等新特性。对于每个特性，提供一个简单的示例来说明其用法和好处。

  8. 浏览器事件循环

    • 建议：介绍浏览器的事件循环机制，包括宏任务和微任务，并解释它们在代码执行过程中的顺序。
    • 回答思路：首先解释事件循环是什么，然后描述浏览器是如何处理宏任务（如setTimeout）和微任务（如Promise）的。可以通过示意图或伪代码来帮助理解。

  9. 闭包的定义和使用

    • 建议：解释闭包的概念和原理，并提供一个使用闭包的实际例子。
    • 回答思路：闭包是指在函数内部创建的函数，它可以访问外部函数作用域中的变量。解释闭包的原理，并提供一个例子来说明闭包的使用场景和好处。例如，可以展示一个计数器函数，该函数使用闭包来保持计数器状态。

  10. 跨域请求和解决方案

    • 建议：解释什么是跨域请求，即从一个域名下向另一个域名发送HTTP请求。然后，介绍常见的跨域解决方案，如JSONP、CORS、代理服务器等。
    • 回答思路：首先解释同源策略以及为何会存在跨域请求问题。然后介绍每种解决方案的原理和适用场景，并提供具体的代码示例。

  11. 单页应用和优缺点

    • 建议：解释什么是单页应用（SPA），即在一个页面上加载所有内容并通过AJAX进行动态更新。然后，讨论SPA的优点（快速响应、良好的用户体验）和缺点（初次加载时间较长、SEO不友好）。
    • 回答思路：介绍SPA的特点和工作原理，并提到一些流行的SPA框架（如React、Angular、Vue.js）。说明SPA适用于哪些场景，并讨论如何解决SPA的缺点。

  12. Vue.js框架响应式原理

    • 建议：解释Vue.js框架如何实现响应式数据绑定，以及其基本原理。
    • 回答思路：介绍Vue.js中的数据劫持和观察者模式。解释Vue.js是如何通过Object.defineProperty来劫持数据对象的属性，并在数据发生变化时通知相关观察者进行更新。

  13. 前端路由与后台路由的区别

    • 建议：解释前端路由和后台路由之间的区别和作用。
    • 回答思路：前端路由是指通过URL路径来控制页面内容的显示和切换，而后台路由是指服务器端根据URL来确定返回数据或页面。解释前端路由的优点（更快的页面切换、更好的用户体验）和后台路由相比的不同之处。

  14. 响应式网站设计和实现响应式布局

    • 建议：解释什么是响应式网站设计，即根据设备的屏幕大小和特性自动调整页面布局和内容展示。然后，描述如何实现响应式布局，包括使用媒体查询、弹性盒子布局等技术。
    • 回答思路：解释响应式网站设计的优势（适应不同设备、提供一致的用户体验）和如何使用CSS媒体查询来根据屏幕尺寸应用不同的样式。介绍弹性盒子布局和网格布局等技术，以实现灵活的响应式布局。

二面

以下是对每个面试题的点评、建议和回答思路：

  1. 实习项目

    • 建议：在回答问题时，重点突出你在实习项目中的角色、贡献和所取得的成果。描述你遇到的挑战、解决方法以及从中学到的经验。
    • 回答思路：介绍实习期间参与的具体项目，包括项目的目标、背景和你在其中承担的职责。强调你在项目中使用的技术和工具，以及通过这个项目获得的专业或团队合作方面的成长。

  2. 列表页保持筛选条件和链接共享

    • 建议：解释如何通过URL参数来保持列表页的筛选条件，并将链接分享给其他人打开时能够正常显示对应的条件和页码。
    • 回答思路：说明如何将筛选条件编码为URL参数，并在页面加载时从URL参数中读取并应用筛选条件。提到使用JavaScript的URLSearchParams API来处理URL参数的获取和设置。

  3. 对象数组去重

    • 建议：解释如何对给定的对象数组进行去重操作，确保输出结果中不会出现重复的key:value对。
    • 回答思路：可以使用Set数据结构或使用循环遍历的方式对对象数组进行去重。对于进阶要求，可以使用递归或深度优先遍历的方式来处理children属性。

  4. 字符串中出现次数最多的字符

    • 建议：解释如何找到给定字符串中出现次数最多的字符，要求给出最优的写法。
    • 回答思路：可以使用哈希表（对象）来统计每个字符出现的次数，并找到出现次数最多的字符。强调使用一次遍历即可完成统计，并考虑空字符串和大小写敏感性。

  5. MVVM模式与MVC模式的区别

    • 建议：解释MVVM（Model-View-ViewModel）模式的概念和特点，并与MVC（Model-View-Controller）模式进行比较，指出两者之间的区别。
    • 回答思路：解释MVVM模式中的三个核心组件：Model（数据模型）、View（视图层）和ViewModel（视图模型）。强调MVVM模式的双向数据绑定和ViewModel的作用，以及减少了对DOM操作的需求。

  6. 虚拟DOM（Virtual DOM）

    • 建议：解释什么是虚拟DOM，它的作用和优势。
    • 回答思路：解释虚拟DOM是在内存中创建的一种轻量级的DOM表示形式，用于提高页面渲染性能和优化页面更新。描述如何通过比较虚拟DOM树与实际DOM树的差异来最小化DOM操作，从而提高渲染效率。强调虚拟DOM在前端框架如React、Vue.js中的应用。

三面：

以下是对每个面试题的点评、建议和回答思路：

  1. 实习经历

    • 建议：回答问题时，重点突出你在实习期间所做的具体项目和任务。强调自己的贡献、遇到的挑战以及从中学到的经验和技能。
    • 回答思路：描述你实习期间所在公司或团队的背景，并介绍你参与的具体项目。讲述自己在项目中承担的角色和责任，以及通过实习获得的技术、沟通或团队合作方面的成长。

  2. 三列布局

    • 建议：解释如何使用CSS来实现三列布局，其中两边为定宽，中间自适应。
    • 回答思路：可以使用浮动、Flexbox或Grid布局来实现三列布局。解释如何设置左右两列的固定宽度，并使用margin或padding来调整中间列的自适应宽度。

  3. 浮动

    • 建议：解释浮动的概念、特性和常见用法。
    • 回答思路：首先解释什么是浮动，然后介绍浮动元素会如何影响周围的文本和其他元素。提到浮动的用途，如实现多栏布局或图文混排等。讨论清除浮动的方法，如使用clearfix或触发BFC。

  4. BFC

    • 建议：解释BFC（块级格式化上下文）的概念、特性和应用。
    • 回答思路：解释什么是BFC以及它的作用，如在处理浮动元素、解决外边距重叠问题等方面的应用。提到如何创建BFC，如设置overflow属性为非visible值、使用display: flow-root等。

  5. 事件管理器设计方案

    • 建议：讨论如何设计一个事件管理器，用于管理和分发各种前端事件。
    • 回答思路：可以介绍使用观察者模式或发布-订阅模式来设计事件管理器。解释如何注册和触发事件，以及如何通过事件对象传递数据。强调事件管理器的灵活性和可扩展性。

  6. 前端性能优化

    • 建议：讨论常见的前端性能优化技术和策略，如代码压缩、资源合并、延迟加载、缓存优化等。
    • 回答思路：列举一些常见的性能优化技术和策略，如减少HTTP请求、使用CDN、使用缓存、异步加载JavaScript等。提到浏览器开发者工具和性能分析工具，以帮助识别优化的瓶颈和问题。

  7. WEB安全

    • 建议：讨论常见的WEB安全问题和防护措施，如跨站脚本攻击（XSS）、跨站请求伪造（CSRF）、点击劫持等。
    • 回答思路：解释每个安全问题的概念和原理，并提供相应的防护措施。强调前后端的合作和综合防护的重要性，如输入验证、输出转义、使用HTTPS等。

  8. 个人规划

    • 建议：展示自己对个人发展的规划和目标，以及如何在前端领域中不断学习和提升自己的建议。
    • 回答思路：描述你对前端领域发展的兴趣和热情，以及你在学习和成长方面的计划。可以提到参与开源项目、学习新的前端技术或框架、参加技术社区活动等方式来积累经验和扩展技能。强调你对持续学习和适应新技术的态度。

整体点评：

这份滴滴打车部门秋招提前批面试题涵盖了前端开发的各个方面，从基础的HTML、CSS、JavaScript知识到框架和性能优化等高级主题。面试题目数量较多，涉及的知识点也较广泛，考察了候选人的基础知识和实际经验。

面试关注的重点包括：

  • 候选人对HTML、CSS、JavaScript的熟悉程度，包括DOM操作、事件处理、选择器和权重值等；
  • 对常用框架（如Vue.js）以及响应式原理、前端路由的理解；
  • 跨域请求和解决方案、浏览器事件循环、闭包的概念和实践等；
  • 对网站设计和布局的认识，如响应式网站设计和虚拟DOM在性能优化中的作用；
  • 实习项目和工作经历对候选人的项目经验和团队合作能力进行了考察。

对于候选人来说，建议准备时重点关注以下方面：

  • 温习HTML、CSS、JavaScript的基础知识，熟悉常用的选择器、事件处理机制和DOM操作；
  • 对Vue.js或其他主流前端框架有一定的了解，并掌握响应式原理、前端路由等概念；
  • 理解浏览器事件循环机制，熟悉闭包的概念和用法；
  • 掌握跨域请求的原理和解决方案，并了解常见的Web安全问题和防护措施；
  • 对前端性能优化有一定的了解，包括网络优化、代码压缩和懒加载等技术；
  • 准备自己的实习项目和工作经历的介绍，突出自己在团队中的贡献和成长。

在回答问题时，尽量清晰、简洁地表达自己的观点，并通过具体的例子和实际经验来支撑回答。在面试前做好准备，复习常见的面试题目和技术知识，并提前了解滴滴打车部门的业务和技术栈。

最后

再给我们的辅导服务打个广告，我们目前有面试全流程辅导、简历指导、模拟面试、零基础辅导和付费咨询等增值服务，大厂前端专家一对一辅导。

辅导服务推出了近 2 年的时间，已助力超过 200 + 的同学找到心仪的工作，感兴趣的伙伴可以联系小助手（微信号：interview-fe2）了解详情哦~