金九银十，前端工程师开始准备了吗

446 08-16

不知不觉，已是八月中旬。最近有很多大四的小伙伴都在跟我谈论秋招面试的问题，其实对于面试，我也没有太多的经验，只能默默地把之前整理的前端面试题分享给Ta。今天就来大致的梳理一下前端的面试体系（每一部分最后都有相应的面试题参考答案哦）。

1. 前端知识体系

在说前端面试体系之前，先来看一下之前整理的前端知识体系图（可能不太完整，毕竟我只是一个刚毕业一个多月的小菜鸡），这只是一个基础版的前端知识体系图，适合刚入门前端的小伙伴参考，大佬勿喷：前端.png

2. HTML

（1）面试题目

常考的HTML面试题：

src和href的区别
对HTML语义化的理解
DOCTYPE(⽂档类型) 的作⽤
script标签中defer和async的区别
常⽤的meta标签有哪些
HTML5有哪些更新
img的srcset属性的作⽤？
行内元素有哪些？块级元素有哪些？空(void)元素有那些？
说一下 web worker
HTML5的离线储存怎么使用，它的工作原理是什么
浏览器是如何对 HTML5 的离线储存资源进行管理和加载？
title与h1的区别、b与strong的区别、i与em的区别？
iframe 有那些优点和缺点？
label 的作用是什么？如何使用？
Canvas和SVG的区别
head 标签有什么作用，其中什么标签必不可少？
文档声明（Doctype）和有何作用? 严格模式与混杂模式如何区分？它们有何意义?
浏览器乱码的原因是什么？如何解决？
渐进增强和优雅降级之间的区别
说一下 HTML5 drag API

（2）思维导图

下图对HTML面试题的考察频率进行了大致的区分，可以选择性的学习： HTML面试题.png

（3）答案解析

既然有面试题，那面试题答案也是必不可少的，参考文章：「2021」高频前端面试题汇总之HTML篇

2. CSS

（1）面试题目

常考的CSS面试题：

一、CSS基础

CSS选择器及其优先级
CSS中可继承与不可继承属性有哪些
display的属性值及其作用
display的block、inline和inline-block的区别
隐藏元素的方法有哪些
link和@import的区别
transition和animation的区别
display:none与visibility:hidden的区别
伪元素和伪类的区别和作用？
对requestAnimationframe的理解
对盒模型的理解
为什么有时候⽤translate来改变位置⽽不是定位？
li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？
CSS3中有哪些新特性
替换元素的概念及计算规则
常见的图片格式及使用场景
对 CSSSprites 的理解
什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？
margin 和 padding 的使用场景
对line-height 的理解及其赋值方式
CSS 优化和提高性能的方法有哪些？
CSS预处理器/后处理器是什么？为什么要使用它们？
::before 和 :after 的双冒号和单冒号有什么区别？
display:inline-block 什么时候会显示间隙？
单行、多行文本溢出隐藏
Sass、Less 是什么？为什么要使用他们？
对媒体查询的理解？
对 CSS 工程化的理解
如何判断元素是否到达可视区域
z-index属性在什么情况下会失效
CSS3中的transform有哪些属性

二、页面布局

常见的CSS布局单位
px、em、rem的区别及使用场景
两栏布局的实现
三栏布局的实现
水平垂直居中的实现
如何根据设计稿进行移动端适配？
对Flex布局的理解及其使用场景
响应式设计的概念及基本原理

三、定位与浮动

为什么需要清除浮动？清除浮动的方式
使用 clear 属性清除浮动的原理？
对BFC的理解，如何创建BFC
什么是margin重叠问题？如何解决？
元素的层叠顺序
position的属性有哪些，区别是什么
display、float、position的关系
absolute与fixed共同点与不同点
对 sticky 定位的理解

四、场景应用

实现一个三角形
实现一个扇形
实现一个宽高自适应的正方形
画一条0.5px的线
设置小于12px的字体
如何解决 1px 问题？

（2）思维导图

下图对CSS面试题的考察频率进行了大致的区分，可以选择性的学习： CSS面试题.png

（3）答案解析

既然有面试题，那面试题答案也是必不可少的，参考文章：「2021」高频前端面试题汇总之CSS篇

3. JavaScript

（1）面试题目

一、数据类型

JavaScript有哪些数据类型，它们的区别？
数据类型检测的方式有哪些
判断数组的方式有哪些
null和undefined区别
typeof null 的结果是什么，为什么？
intanceof 操作符的实现原理及实现
为什么0.1+0.2 ! == 0.3，如何让其相等
如何获取安全的 undefined 值？
typeof NaN 的结果是什么？
isNaN 和 Number.isNaN 函数的区别？
== 操作符的强制类型转换规则？
其他值到字符串的转换规则？
其他值到数字值的转换规则？
其他值到布尔类型的值的转换规则？
|| 和 && 操作符的返回值？
Object.is() 与比较操作符 “===”、“==” 的区别？
什么是 JavaScript 中的包装类型？
JavaScript 中如何进行隐式类型转换？
+操作符什么时候用于字符串的拼接？
为什么会有BigInt的提案？
object.assign和扩展运算法是深拷贝还是浅拷贝，两者区别

二、ES6

let、const、var的区别
const对象的属性可以修改吗
如果new一个箭头函数的会怎么样
箭头函数与普通函数的区别
箭头函数的this指向哪⾥？
扩展运算符的作用及使用场景
Proxy 可以实现什么功能？
对对象与数组的解构的理解
如何提取高度嵌套的对象里的指定属性？
对 rest 参数的理解
ES6中模板语法与字符串处理

三、JavaScript基础

new操作符的实现原理
map和Object的区别
map和weakMap的区别
JavaScript有哪些内置对象
常用的正则表达式有哪些？
对JSON的理解
JavaScript脚本延迟加载的方式有哪些？
JavaScript 类数组对象的定义？
数组有哪些原生方法？
Unicode、UTF-8、UTF-16、UTF-32的区别？
常见的位运算符有哪些？其计算规则是什么？
为什么函数的 arguments 参数是类数组而不是数组？如何遍历类数组?
什么是 DOM 和 BOM？
对类数组对象的理解，如何转化为数组
escape、encodeURI、encodeURIComponent 的区别
对AJAX的理解，实现一个AJAX请求
JavaScript为什么要进行变量提升，它导致了什么问题？
什么是尾调用，使用尾调用有什么好处？
ES6模块与CommonJS模块有什么异同？
常见的DOM操作有哪些
use strict是什么意思 ? 使用它区别是什么？
如何判断一个对象是否属于某个类？
强类型语言和弱类型语言的区别
解释性语言和编译型语言的区别
for...in和for...of的区别
如何使用for...of遍历对象
ajax、axios、fetch的区别
数组的遍历方法有哪些
forEach和map方法有什么区别

四、原型与原型链

对原型、原型链的理解
原型修改、重写
原型链指向
原型链的终点是什么？如何打印出原型链的终点？
如何获得对象非原型链上的属性？

五、执行上下文/作用域链/闭包

对闭包的理解
对作用域、作用域链的理解
对执行上下文的理解

六、this/call/apply/bind

对this对象的理解
call() 和 apply() 的区别？
实现call、apply 及 bind 函数

七、异步编程

异步编程的实现方式？
setTimeout、Promise、Async/Await 的区别
对Promise的理解
Promise的基本用法
Promise解决了什么问题
Promise.all和Promise.race的区别的使用场景
对async/await 的理解
await 到底在等啥？
async/await的优势
async/await对比Promise的优势
async/await 如何捕获异常
并发与并行的区别？
什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？
setTimeout、setInterval、requestAnimationFrame 各有什么特点？

八、面向对象

对象创建的方式有哪些？
对象继承的方式有哪些？

九、垃圾回收与内存泄漏

浏览器的垃圾回收机制
哪些情况会导致内存泄漏

（2）思维导图

下图对JavaScript面试题的考察频率进行了大致的区分，可以选择性的学习： JavaScript面试题.png

（3）答案解析

既然有面试题，那面试题答案也是必不可少的，参考文章：

4. Vue

（1）面试题目

一、Vue 基础

Vue的基本原理
双向数据绑定的原理
使用 Object.defineProperty() 来进行数据劫持有什么缺点？
MVVM、MVC、MVP的区别
Computed 和 Watch 的区别
Computed 和 Methods 的区别
slot是什么？有什么作用？原理是什么？
过滤器的作用，如何实现一个过滤器
如何保存页面的当前的状态
常见的事件修饰符及其作用
v-if、v-show、v-html 的原理
v-if和v-show的区别
v-model 是如何实现的，语法糖实际是什么？
v-model 可以被用在自定义组件上吗？如果可以，如何使用？
data为什么是一个函数而不是对象
对keep-alive的理解，它是如何实现的，具体缓存的是什么？
$nextTick 原理及作用
Vue 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？
Vue中封装的数组方法有哪些，其如何实现页面更新
Vue 单页应用与多页应用的区别
Vue template 到 render 的过程
Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？
简述 mixin、extends 的覆盖逻辑
描述下Vue自定义指令
子组件可以直接改变父组件的数据吗？
Vue是如何收集依赖的？
对 React 和 Vue 的理解，它们的异同
Vue的优点
assets和static的区别
delete和Vue.delete删除数组的区别
vue如何监听对象或者数组某个属性的变化
什么是 mixin ？
Vue模版编译原理
对SSR的理解
Vue的性能优化有哪些
对 SPA 单页面的理解，它的优缺点分别是什么？
template和jsx的有什么分别？
vue初始化页面闪动问题
extend 有什么作用
mixin 和 mixins 区别
MVVM的优缺点?

二、生命周期

说一下Vue的生命周期
Vue 子组件和父组件执行顺序
created和mounted的区别
一般在哪个生命周期请求异步数据
keep-alive 中的生命周期哪些

三、组件通信

组件通信的方式

四、路由

Vue-Router 的懒加载如何实现
路由的hash和history模式的区别
如何获取页面的hash变化
$r o u t e 和$ router 的区别
如何定义动态路由？如何获取传过来的动态参数？
Vue-router 路由钩子在生命周期的体现
Vue-router跳转和location.href有什么区别
params和query的区别
Vue-router 导航守卫有哪些
对前端路由的理解

五、Vuex

Vuex 的原理
Vuex中action和mutation的区别
Vuex 和 localStorage 的区别
Redux 和 Vuex 有什么区别，它们的共同思想
为什么要用 Vuex 或者 Redux
Vuex有哪几种属性？
Vuex和单纯的全局对象有什么区别？
为什么 Vuex 的 mutation 中不能做异步操作？
Vuex的严格模式是什么,有什么作用，如何开启？
如何在组件中批量使用Vuex的getter属性
如何在组件中重复使用Vuex的mutation

六、Vue 3.0

Vue3.0有什么更新
defineProperty和proxy的区别
Vue3.0 为什么要用 proxy？
Vue 3.0 中的 Vue Composition API？
Composition API与React Hook很像，区别是什么