2022 前端面试之道（你值得拥有）

前言

转瞬间，2022 年也是迎来了尾声！在这疫情😷的三年时间里，亦是忧愁，尤其是今年份，各大小厂接连迎来裁员浪潮。至此，市场涌入大批就业人员，再加上即将步入社会的学子们，这无疑使得本就严峻的就业环境雪上加霜，这真是闻者伤心💔，见者流泪😢！在与大多数铁子一样领取大礼包成功毕业后，笔者也深有所感！

本着过来人的身份，如此恶劣的就业环境之下，面试相比于之前而言显得越加艰难，而且很多企业现在在择选优秀人才这方面也是更加的深思熟虑。但相比于即将步入职场的学子而言，已经有工作经验的铁子则会有着更多的机会！更多的机会，结合环境以及站在企业的角度而言，其中缘由也就不言而喻了。

下面是笔者自己在准备面试过程中收集的一些面试知识点，内容个人觉得对于即将步入职场的学子(实习/校招)去熟悉它们会是个非常不错的选择。但是，对于有工作经验的同学而言，铁子萌可以去了解这些基础知识点，不过更多的关注点应该放在项目上面。

由于时间有限，本文内容将以链接形式展示，更多优质内容请前往 我的博客 查阅，相关内容也将在我的 blog 中持续更新！！！

博客 github 地址：github.com/niezicheng/…

最后，伴随着疫情 😷 政策的调整，相信在不久的将来也将落下帷幕！迎来美好的生活，期待这一天的到来！

知识图谱：

下面内容结合 Google 插件 Smart TOC 来显示网页目录，浏览起来会更加方便。

HTML

浅谈script标签的defer和async

SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？

Web Worker 使用教程

WebSocket 教程

HTML5原生拖拽/拖放 Drag & Drop 详解

iframe,我们来谈一谈

meta标签到底是做什么的|我竟一无所知

前端offset/scroll/client各类属性详解

CSS

CSS盒模型详解

你真的了解回流和重绘吗?

BFC

10 分钟理解 BFC 原理

小科普：到底什么是 BFC、IFC、GFC 和 FFC

清除浮动的四种方式及其原理理解

js 动画和 css 动画

CSS动画简介

css动画和js动画有什么区别？

为什么 CSS 动画比 JavaScript 高效？

你知道的requestAnimationFrame

布局

Flex 布局教程：语法篇

CSS Grid 网格布局教程

详解 CSS 七种三栏布局技巧

CSS设置居中的方案总结-超全

其他

px rem em vh vw之间的区别到底是啥？

你真的理解@import和link引入样式的区别吗?

你能描述一下渐进增强和优雅降级之间的不同吗?

display:none visibility:hidden opacity:0 区别

display:table与本身的table的区别

你知道几种CSS样式隔离方案？

【工程化】深入浅出 CSS Modules

响应式布局之 @media 媒体查询

JavaScript

JavaScript中的this

事件流机制

理解DOM事件流的三个阶段

你真的理解事件冒泡和事件捕获吗？

模块化演变历程

前端模块化详解(完整版)

ES6的模块加载，你们真的完全懂了吗？

动态模块加载

深入理解 ES6 模块机制

webpack require.ensure

浅拷贝和深拷贝

浅拷贝与深拷贝

深拷贝的终极探索（90%的人都不知道）

深入剖析 JavaScript 的深复制

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

[译] 理解 JavaScript 中的执行上下文和执行栈

JavaScript深入之作用域链

闭包

破解前端面试（80% 应聘者不及格系列）：从闭包说起

JavaScript深入之闭包

JavaScript闭包的底层运行机制

原型/继承

原型

JavaScript深入之从原型到原型链

深入理解 JavaScript 原型

继承

详解JS原型链与继承

垃圾回收机制

V8 引擎垃圾内存回收原理解析

JavaScript中的垃圾回收和内存泄漏

认识 V8 引擎

事件循环（EventLoop）

最后一次搞懂 Event Loop

浏览器与Node环境下的Event Loop

浏览器与Node的事件循环(Event Loop)有何区别?

不可变状态 Immutable

理解不可变状态Immer.js

React中为什么要强调使用Immutable

ES5+

ES6 入门教程

一看就懂的var、let、const三者区别

简单了解ES6/ES2015 Symbol() 方法

undefined与null的区别

ES6 - 箭头函数、箭头函数与普通函数的区别

Set 和 Map

深入理解：ES6中的Set和Map数据结构，Map与其它数据结构的互相转换

如何实现 JS 真正意义上的弱引用？

Promise/async/Generator

9k字 | Promise/async/Generator实现原理解析

JS 异步编程六种方案

新特性

ES6、ES7、ES8、ES9、ES10新特性一览

实践

JS数组去重!!!一篇不怎么靠谱的"深度"水文

JS数组专题1️⃣ ➖ 数组扁平化

「前端进阶」数组乱序

在JavaScript中，如何判断数组是数组？

Js生成随机数 生成随机字符串的5种方法

拓展

JavaScript专题系列20篇正式完结！

由浅入深，66条JavaScript面试知识点

浏览器

渲染机制

细说浏览器输入URL后发生了什么

简单谈谈浏览器从输入URL到页面渲染的过程

必须明白的浏览器渲染机制

缓存机制

实践这一次,彻底搞懂浏览器缓存机制

深入理解浏览器的缓存机制

存储方式

cookie

Cookie属性详解

预测最近面试会考 Cookie 的 SameSite 属性

webStorage

indexDB - 浏览器数据库 IndexedDB 入门教程

深入了解浏览器存储--从cookie到WebStorage、IndexedDB

跨域

九种跨域方式实现原理（完整版）

前端常见跨域解决方案（全）

安全知识

前端安全系列（一）：如何防止XSS攻击？

前端安全系列（二）：如何防止CSRF攻击？

前端如何给 JavaScript 加密（不是混淆）？

前端也需要了解的 JSONP 安全

【面试篇】寒冬求职之你必须要懂的Web安全

网络

HTTP

20分钟助你拿下HTTP和HTTPS，巩固你的HTTP知识体系

HTTP 响应状态码

提交方式

都9102年了，还问GET和POST的区别

听说『99% 的人都理解错了 HTTP 中 GET 与 POST 的区别』？？

为什么要禁止除GET和POST之外的HTTP方法？

四种常见的 POST 提交数据方式

HTTPS

谈谈 HTTPS

详细解析 HTTP 与 HTTPS 的区别

SSL/TSL

TLS 详解握手流程

图解SSL/TLS协议

HTTP 头部字段

HTTP协议头部与Keep-Alive模式详解

HTTP keep-alive 二三事?

HTTP 发展史

HTTP发展史（HTTP1.1，HTTPS，SPDY，HTTP2.0，QUIC，HTTP3.0）

一文读懂 HTTP/1、HTTP/2、HTTP/3

浅谈 HTTP/2 Server Push

TCP/UDP

TCP协议灵魂之问，巩固你的网路底层基础

TCP协议与UDP协议的区别?

CDN

漫话：如何给女朋友解释什么是CDN？

CDN是什么？使用CDN有什么优势？

DNS

写给前端工程师的DNS基础知识

框架

React

React类组件和函数组件的本质区别?

深入理解React：懒加载（lazy）实现原理

React Hooks

React Hooks 详解 【近 1W 字】+ 项目实战

useEffect 完整指南

【React深入】从Mixin到HOC再到Hook

「react进阶」一文吃透react-hooks原理

事件系统

React 事件系统工作原理

深入React合成事件机制原理

React Router

React Router 官网

「源码解析 」这一次彻底弄懂react-router路由原理

React Redux

React Redux 官网

React Redux 中文官网

一幅图明白React-Redux的原理

手写系列之简易redux -- createStore

源码解读

面试官问: 如何理解Virtual DOM？

React 源码剖析系列 － 不可思议的 react diff

React源码解析 - (基于 v15)

React 源码解析 - (基于 v16)

React Fiber 源码解析

新特性

React v17

React 18 新特性概览

Vue

Vue.js的computed和watch是如何工作的？

Vue3 script setup 语法糖详解

Vue3 对比 Vue2.x 差异性、注意点、整体梳理，与React hook比又如何？

MVVM

不好意思！耽误你的十分钟，让MVVM原理还给你

50行代码的MVVM，感受闭包的艺术

数据绑定

面试官: 实现双向绑定Proxy比defineproperty优劣如何?

为什么Vue3.0使用Proxy实现数据监听？defineProperty表示不背这个锅

状态管理

Vuex、Flux、Redux、Redux-saga、Dva、MobX

8k字 | Redux/react-redux/redux中间件设计实现剖析

Mobx 思想的实现原理，及与 Redux 对比

使用原生 JavaScript 构建状态管理系统

组件间通信

vue中8种组件通信方式, 值得收藏!

Vue 组件间通信六种方式（完整版）

Virtual DOM

面试官: 你对虚拟DOM原理的理解?

让虚拟DOM和DOM-diff不再成为你的绊脚石

虚拟 DOM 到底是什么？(长文建议收藏)

Diff 算法

详解vue的diff算法

React 源码剖析系列 － 不可思议的 react diff

浅入浅出图解domDIff

源码解析

Vue.js 技术揭秘

你真的理解$nextTick么

拓展

Vue 面试题汇总及答案

性能优化

写给中高级前端关于性能优化的9大策略和6大指标 | 网易四年实践

浏览器页面资源加载过程与优化

聊一聊前端性能优化

2019年前端性能优化清单

Webpack

Webpack优化——将你的构建效率提速翻倍

Tree-Shaking性能优化实践 - 原理篇

Webpack 大法之 Code Splitting

懒加载和预加载

懒加载和预加载

浏览器IMG图片原生懒加载loading=”lazy”实践指南

图片与视频懒加载的详细指南

长列表和虚拟列表

聊聊前端开发中的长列表

再谈前端虚拟列表的实现

实践

网站性能优化实战——从12.67s到1.06s的故事

腾讯HTTPS性能优化实践

项目工程化

Webpack

带你深度解锁Webpack系列

手把手教你撸一个简易的 webpack

一文掌握Webpack编译流程

Loader

前端工程师都得掌握的 webpack Loader

手把手教你撸一个 Webpack Loader

【webpack进阶】你真的掌握了loader么？- loader十问

Plugin

揭秘webpack插件工作流程和原理

手把手带你入门Webpack Plugin

揭秘webpack plugin

代码分割

Webpack 大法之 Code Splitting

热更新

轻松理解webpack热更新原理

Tree Shaking

Webpack Tree shaking 深入探究

SourceMap

打破砂锅问到底：详解Webpack中的sourcemap

拓展

深入浅出 Webpack

Babel

不容错过的 Babel7 知识

深入浅出 Babel 上篇：架构和原理 + 实战

深入浅出 Babel 下篇：既生 Plugin 何生 Macros

[前端与编译原理——用JS写一个JS解释器]

模版引擎

Vue 模板编译原理

实现一个简单的模版引擎

前端发布

大公司里怎样开发和部署前端代码？

前端高级进阶：前端部署的发展历程

前端监控

5 分钟撸一个前端性能监控工具

前端监控和前端埋点方案设计

把前端监控做到极致

代码规范

凹凸实验室前端代码规范

Git Commit 规范（Conventional Commit）

架构

浅谈 MVC、MVP 和 MVVM 架构模式