前端开发工程师面试题

涵盖基础、框架、性能等多方面试题

前端开发工程师面试中，各类题目能全面考察求职者的能力。下面为大家详细介绍常见的几类面试题。

基础知识类

这类题目主要考察对 html、css、javascript 等基础技术的掌握。比如，面试官可能会问 html5 有哪些新特性。html5 新增了语义化标签，像 header、nav、article、section、aside、footer 等，使代码结构更清晰。以一个简单的博客页面为例，使用 article 标签来包裹每一篇文章内容，让搜索引擎和开发者更容易理解页面结构。还有 css 中盒模型的概念，它由内容区、内边距、边框和外边距组成。若要实现一个固定宽度和高度的盒子，需要考虑这些元素的综合影响。在 javascript 方面，常考的是数据类型和作用域。例如，问你 javascript 中有哪些基本数据类型，答案是 number、string、boolean、null、undefined、symbol。

框架相关类

如今前端框架众多，像 vue 和 react 是热门框架。面试可能会问 vue 的响应式原理。vue 通过 object.defineproperty() 方法来实现数据的双向绑定。当一个 vue 实例创建时，vue 会遍历 data 选项中的所有属性，使用 object.defineproperty() 将这些属性转换为 getter/setter。这样，当这些属性的值发生变化时，vue 会自动更新与之绑定的 dom 元素。以一个简单的计数器组件为例，当点击按钮使计数器的值增加时，页面上显示的数字也会相应更新。对于 react，可能会问组件的生命周期函数。比如 componentdidmount 函数，它在组件挂载后调用，常用于发起网络请求获取数据。

性能优化类

性能优化是前端开发的重要环节。面试官可能会问如何优化网页加载速度。可以从多个方面入手，如压缩代码，将 html、css、javascript 文件进行压缩，减少文件大小。还可以使用 cdn 加速，将静态资源存放在 cdn 服务器上，利用 cdn 的分布式节点，让用户从离自己最近的节点获取资源，提高加载速度。例如，很多网站会使用百度、阿里云等的 cdn 来加载 jquery 等库。另外，图片优化也很关键，选择合适的图片格式，如 jpeg 适合照片，png 适合图标等，并且对图片进行压缩处理。

项目经验类

面试官通常会让求职者介绍自己参与过的项目。在介绍时，要清晰阐述项目的背景、目标、自己承担的角色和主要工作。比如，你参与过一个电商网站的前端开发项目，项目背景是为了提升用户购物体验，目标是实现一个界面美观、交互流畅的购物平台。你在项目中负责商品列表页的开发，使用 vue 框架实现了商品的展示、筛选和排序功能。同时，要说明在项目中遇到的问题及解决方案，如遇到性能瓶颈时，通过优化代码和图片，使页面加载速度提升了 30%。

逻辑思维类

这类题目主要考察求职者的逻辑思维和解决问题的能力。例如，有一个经典的算法题：给定一个数组，找出数组中第二大的数。可以先对数组进行排序，然后取倒数第二个元素。但更优的解法是遍历数组，同时记录最大数和第二大数，这样时间复杂度为 o(n)。还有一些逻辑推理题，如在一个房间里有三盏灯，房外有三个开关，每个开关只能控制一盏灯，如何只进房间一次就确定哪个开关控制哪盏灯。可以先打开一个开关，等几分钟后关闭，再打开另一个开关，然后进入房间，亮着的灯由第二个开关控制，用手摸一下另外两盏不亮的灯，发热的由第一个开关控制，剩下的由第三个开关控制。