前端面试会问什么问题

涵盖基础、框架、项目等多方面问题

前端面试涉及的问题广泛，全面了解这些问题有助于我们更好地应对面试，下面为大家详细介绍。

基础知识类问题

这类问题主要考察对 html、css、javascript 等基础技术的掌握程度。比如，面试官可能会问 html 中块级元素和行内元素的区别。块级元素会独占一行，并且可以设置宽度和高度，像 div、p 等；而行内元素不会独占一行，宽度和高度由内容决定，例如 span、a 等。css 方面，可能会问到盒模型的组成，它由内容区、内边距、边框和外边距构成。在 javascript 里，作用域和闭包是常考内容。例如下面这个闭包的例子：

function outer() {

var a = 10;

function inner() {

console.log(a);

}

return inner;

}

var closure = outer();

closure(); // 输出 10

框架相关问题

现在前端开发中框架使用非常普遍，常见的如 react、vue 等。对于 vue，可能会问响应式原理。vue 通过 object.defineproperty() 方法来实现数据的响应式，当一个 vue 实例创建时，vue 会遍历 data 选项中的所有属性，使用 object.defineproperty() 将这些属性转换为 getter/setter。在 react 中，虚拟 dom 是重点考察内容。虚拟 dom 是一种轻量级的 javascript 对象，它是真实 dom 的抽象表示。通过比较新旧虚拟 dom 的差异，只更新需要更新的真实 dom 部分，从而提高性能。

项目经验问题

面试官通常会让你介绍自己参与过的项目。这时要清晰地阐述项目的背景、目标、你在项目中承担的角色和具体工作。比如，在一个电商网站项目中，你负责商品列表页面的开发。你可以说：“该项目旨在打造一个用户体验良好的电商平台，我负责商品列表页面的开发，使用了 vue 框架，实现了商品的展示、筛选和排序功能。在开发过程中，遇到了性能优化的问题，通过对图片进行懒加载和对数据请求进行节流处理，有效提升了页面的加载速度。”

性能优化问题

性能优化是前端开发中的重要环节。常见的优化方法有压缩代码、合并文件、使用 cdn 等。例如，将多个 css 文件合并为一个，减少 http 请求次数。对于图片优化，可以使用 webp 格式，它具有更高的压缩率。在代码层面，避免内联样式和内联脚本，将它们提取到外部文件中。

算法和编程能力问题

虽然前端开发对算法的要求相对后端较低，但一些基本的算法和编程能力还是会考察。比如，实现数组去重。可以使用 es6 的 set 数据结构来实现：

function unique(arr) {

return [...new set(arr)];

}

var arr = [1, 2, 2, 3, 4, 4];

console.log(unique(arr)); // 输出 [1, 2, 3, 4]

总之，前端面试问题涵盖多个方面，我们要全面准备，才能在面试中取得好成绩。