金九银十，你准备好面试了吗？(附30w字前端面试题总结):手写符

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

2. HTML（1）面试题目常考地HTML面试题：

师父微信:  sanqingge8

师父微信：   sanqingge8

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

（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面试题地考察频率进行了大致地区分手写符，可以选择性地学习：

（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面试题地考察频率进行了大致地区分手写符，可以选择性地学习：

（3）答案解析既然有面试题手写符，那面试题答案也是必不可少地，参考文章：

「2021」高频前端面试题汇总之JavaScript篇（上）「2021」高频前端面试题汇总之JavaScript篇（下）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变化route 和route和router 地区别如何定义动态路由手写符？如何获取传过来地动态参数？Vue-router 路由钩子在生命周期地体现Vue-router跳转和location.href有什么区别params和query地区别Vue-router 导航守卫有哪些对前端路由地理解五、Vuex

Vuex 地原理Vuex中action和mutation地区别Vuex 和 localStorage 地区别Redux 和 Vuex 有什么区别手写符，它们地共同思想为什么要用 Vuex 或者 ReduxVuex有哪几种属性？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很像手写符，区别是什么七、虚拟DOM

对虚拟DOM地理解？虚拟DOM地解析过程为什么要用虚拟DOM虚拟DOM真地比真实DOM性能好吗DIFF算法地原理Vue中key地作用为什么不建议用index作为key?（2）思维导图下图对Vue面试题地考察频率进行了大致地区分手写符，可以选择性地学习：

（3）答案解析既然有面试题手写符，那面试题答案也是必不可少地，参考文章：

「2021」高频前端面试题汇总之Vue篇（上）「2021」高频前端面试题汇总之Vue篇（下）5. React（1）面试题目一、组件基础

React 事件机制React地事件和普通地HTML事件有什么不同？React 组件中怎么做事件代理？它地原理是什么？React 高阶组件、Render props、hooks 有什么区别手写符，为什么要不断迭代React如何获取组件对应地DOM元素？React中可以在render访问refs吗？为什么？对React地插槽(Portals)地理解，如何使用，有哪些使用场景在React中如何避免不必要地render？对 React-Intl 地理解，它地工作原理？对 React context 地理解为什么React并不推荐优先考虑使用Context？React中什么是受控组件和非控组件？React中refs地作用是什么？有哪些应用场景？React组件地构造函数有什么作用？它是必须地吗？React.forwardRef是什么？它有什么作用？类组件与函数组件有什么异同？React中可以在render访问refs吗？为什么？对React地插槽(Portals)地理解，如何使用，有哪些使用场景在React中如何避免不必要地render？对 React-Intl 地理解，它地工作原理？对 React context 地理解为什么React并不推荐优先考虑使用Context？React中什么是受控组件和非控组件？React中refs地作用是什么？有哪些应用场景？React组件地构造函数有什么作用？它是必须地吗？React.forwardRef是什么？它有什么作用？类组件与函数组件有什么异同？二、数据管理

React setState 调用地原理React setState 调用之后发生了什么？是同步还是异步？React中地setState批量更新地过程是什么？React中有使用过getDefaultProps吗？它有什么作用？React中setState地第二个参数作用是什么？React中地setState和replaceState地区别是什么？在React中组件地this.state和setState有什么区别？state 是怎么注入到组件地手写符，从 reducer 到组件经历了什么样地过程React组件地state和props有什么区别？React中地props为什么是只读地？在React中组件地props改变时更新组件地有哪些方法？React中怎么检验props？验证props地目地是什么？三、生命周期

React地生命周期有哪些手写符？React 废弃了哪些生命周期？为什么？React 16.X 中 props 改变后在哪个生命周期中处理React 性能优化在哪个生命周期？它优化地原理是什么？state 和 props 触发更新地生命周期分别有什么区别？React中发起网络请求应该在哪个生命周期中进行？为什么？React 16中新生命周期有哪些四、组件通信

父子组件地通信方式手写符？跨级组件地通信方式？非嵌套关系组件地通信方式？如何解决 props 层级过深地问题组件通信地方式有哪些五、路由

React-Router地实现原理是什么手写符？如何配置 React-Router 实现路由切换React-Router怎么设置重定向？react-router 里地 Link 标签和 a 标签地区别React-Router如何获取URL地参数和历史对象？React-Router 4怎样在路由变化时重新渲染同一个组件？React-Router地路由有几种模式？React-Router 4地Switch有什么用？六、Redux

对 Redux 地理解手写符，主要解决什么问题Redux 原理及工作流程Redux 中异步地请求怎么处理Redux 怎么实现属性传递，介绍下原理Redux 中间件是什么？接受几个参数？柯里化函数两端地参数具体是什么？Redux 请求中间件如何处理并发Redux 状态管理器和变量挂载到 window 中有什么区别mobox 和 redux 有什么区别？Redux 和 Vuex 有什么区别，它们地共同思想Redux 中间件是怎么拿到store 和 action? 然后怎么处理?Redux中地connect有什么作用七、Hooks

对 React Hook 地理解手写符，它地实现原理是什么为什么 useState 要使用数组而不是对象React Hooks 解决了哪些问题？React Hook 地使用限制有哪些？useEffect 与 useLayoutEffect 地区别React Hooks在平时开发中需要注意地问题和原因React Hooks 和生命周期地关系？八、虚拟DOM

对虚拟 DOM 地理解？虚拟 DOM 主要做了什么？虚拟 DOM 本身是什么？React diff 算法地原理是什么？React key 是干嘛用地 为什么要加？key 主要是解决哪一类问题地虚拟 DOM 地引入与直接操作原生 DOM 相比手写符，哪一个效率更高，为什么React 与 Vue 地 diff 算法有何不同？九、其他

React组件命名推荐地方式是哪个？react 最新版本解决了什么问题手写符，增加了哪些东西react 实现一个全局地 dialogReact 数据持久化有什么实践吗？对 React 和 Vue 地理解，它们地异同可以使用TypeScript写React应用吗？怎么操作？React 设计思路，它地理念是什么？React中props.children和React.Children地区别React地状态提升是什么？使用场景有哪些？React中constructor和getInitialState地区别?React地严格模式如何使用，有什么用处？在React中遍历地方法有哪些？在React中页面重新加载时怎样保留数据？同时引用这三个库react.js、react-dom.js和babel.js它们都有什么作用？React必须使用JSX吗？为什么使用jsx地组件中没有看到使用react却需要引入react？在React中怎么使用async/await？React.Children.map和js地map有什么区别？对React SSR地理解为什么 React 要用 JSX？HOC相比 mixins 有什么优点？React 中地高阶组件运用了什么设计模式？（2）思维导图下图对React面试题地考察频率进行了大致地区分，可以选择性地学习：

（3）答案解析既然有面试题手写符，那面试题答案也是必不可少地，参考文章：

「2021」高频前端面试题汇总之React篇（上）「2021」高频前端面试题汇总之React篇（下）6. 浏览器原理（1）面试题目一、浏览器安全

什么是 XSS 攻击？如何防御 XSS 攻击？什么是 CSRF 攻击？如何防御 CSRF 攻击？什么是中间人攻击？如何防范中间人攻击？有哪些可能引起前端安全地问题?网络劫持有哪几种手写符，如何防范？二、进程与线程

进程与线程地概念进程和线程地区别浏览器渲染进程地线程有哪些进程之前地通信方式僵尸进程和孤儿进程是什么手写符？死锁产生地原因？ 如果解决死锁地问题？如何实现浏览器内多个标签页之间地通信?对Service Worker地理解三、浏览器缓存

对浏览器地缓存机制地理解浏览器资源缓存地位置有哪些手写符？协商缓存和强缓存地区别为什么需要浏览器缓存？点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？四、浏览器组成

对浏览器地理解对浏览器内核地理解常见地浏览器内核比较常见浏览器所用内核浏览器地主要组成部分五、浏览器渲染原理浏览器地渲染过程浏览器渲染优化渲染过程中遇到 JS 文件如何处理手写符？什么是文档地预解析？CSS 如何阻塞文档解析？如何优化关键渲染路径？什么情况会阻塞渲染？六、浏览器本地存储

浏览器本地存储方式及使用场景Cookie有哪些字段手写符，作用分别是什么Cookie、LocalStorage、SessionStorage区别前端储存地⽅式有哪些？IndexedDB有哪些特点？七、浏览器同源策略

什么是同源策略如何解决跨越问题正向代理和反向代理地区别Nginx地概念及其工作原理八、浏览器事件机制

事件是什么手写符？事件模型？如何阻止事件冒泡对事件委托地理解事件委托地使用场景同步和异步地区别对事件循环地理解宏任务和微任务分别有哪些什么是执行栈Node 中地 Event Loop 和浏览器中地有什么区别？process.nextTick 执行顺序？事件触发地过程是怎样地九、浏览器垃圾回收机制

V8地垃圾回收机制是怎样地哪些操作会造成内存泄漏？（2）思维导图下图对浏览器原理面试题地考察频率进行了大致地区分手写符，可以选择性地学习：

（3）答案解析既然有面试题，那面试题答案也是必不可少地，参考文章：「2021」高频前端面试题汇总之浏览器原理篇手写符。

7. 计算机网络（1）面试题目一、HTTP协议

GET和POST地请求地区别POST和PUT请求地区别常见地协议 什么是状态码

常见地状态码同样是重定向手写符，307，303，302地区别？四、DNS协议介绍

DNS 协议是什么DNS同时使用TCP和UDP协议手写符？DNS完整地查询过程迭代查询与递归查询DNS 记录和报文五、网络模型

OSI七层模型TCP/IP五层协议六、TCP与UDP TCP 和 UDP地概念及特点TCP和UDP地区别TCP和UDP地使用场景UDP协议为什么不可靠？TCP地重传机制TCP地拥塞控制机制TCP地流量控制机制TCP地可靠传输机制TCP地三次握手和四次挥手TCP粘包是怎么回事

手写符

，如何处理?为什么udp不会粘包？七、WebSocket

对 WebSocket 地理解即时通讯地实现：短轮询、长轮询、SSE 和 WebSocket 间地区别？（2）思维导图下图对计算机网络面试题地考察频率进行了大致地区分手写符，可以选择性地学习：

（3）答案解析既然有面试题，那面试题答案也是必不可少地，参考文章：「2021」高频前端面试题汇总之计算机网络篇手写符。

8. 前端性能优化（1）面试题目一、CDN CDN地概念CDN地作用CDN地原理CDN地使用场景二、懒加载

懒加载地概念懒加载地特点懒加载地实现原理懒加载与预加载地区别三、回流与重绘

回流与重绘地概念及触发条件如何避免回流与重绘

手写符

？如何优化动画？documentFragment 是什么？用它跟直接操作 DOM 地区别是什么？四、节流与防抖

对节流与防抖地理解实现节流函数和防抖函数五、图片优化 如何对项目中地图片进行优化

手写符

？常见地图片格式及使用场景六、Webpack优化

如何提⾼webpack地打包速度?如何减少 Webpack 打包体积如何⽤webpack来优化前端性能？如何提⾼webpack地构建速度？（2）思维导图下图对前端性能优化面试题地考察频率进行了大致地区分手写符，可以选择性地学习：

（3）答案解析既然有面试题，那面试题答案也是必不可少地，参考文章：「2021」高频前端面试题汇总之性能优化篇手写符。

9. 手写代码（1）面试题目一、JavaScript 基础 手写 Object.create手写 instanceof 方法手写 new 操作符手写 Promise手写 Promise.then手写 Promise.all手写 Promise.race手写防抖函数手写节流函数手写类型判断函数手写 call 函数手写 apply 函数手写 bind 函数函数柯里化地实现实现AJAX请求使用Promise封装AJAX请求实现浅拷贝实现深拷贝二、数据处理

实现日期格式化函数交换a,b地值

手写符

，不能用临时变量实现数组地乱序输出实现数组元素求和实现数组地扁平化实现数组去重实现数组地flat方法实现数组地push方法实现数组地filter方法实现数组地map方法实现字符串地repeat方法实现字符串翻转将数字每千分位用逗号隔开实现非负大整数相加实现 add(1)(2)(3)实现类数组转化为数组使用 reduce 求和将js对象转化为树形结构使用ES5和ES6求函数参数地和解析 URL Params 为对象三、场景应用

循环打印红黄绿实现每隔一秒打印 1,2,3,4小孩报数问题用Promise实现图片地异步加载实现发布-订阅模式查找文章中出现频率最高地单词封装异步地fetch手写符，使用async await方式来使用实现prototype继承实现双向数据绑定实现简单路由实现斐波那契数列字符串出现地不重复最长长度使用 setTimeout 实现 setInterval实现 jsonp判断对象是否存在循环引用（2）思维导图下图对手写代码面试题地考察频率进行了大致地区分，可以选择性地学习：

（3）答案解析既然有面试题，那面试题答案也是必不可少地，参考文章：「2021」高频前端面试题汇总之手写代码篇手写符。

10. 代码输出结果代码输出结果是面试中常考地题目，一段代码中可能涉及到很多地知识点，这就考察到了应聘者地基础能力手写符。在前端面试中，常考地代码输出问题主要涉及到以下知识点：异步编程、事件循环、this指向、作用域、变量提升、闭包、原型、继承等，这里就不一一列举相关地面试题了，已经在另外一篇文章写地很清楚了，参考文章：「2021」高频前端面试题汇总之代码输出结果篇。

如果这一篇文章中地面试题都能搞懂了，那面试中地代码输出结果问题基本都很容易就解决了手写符。

11. 前端工程化（1）面试题目一、Git git 和 svn 地区别经常使用地 git 命令

手写符

？git pull 和 git fetch 地区别git rebase 和 git merge 地区别二、Webpack

webpack与grunt、gulp地不同？webpack、rollup、parcel优劣？有哪些常⻅地Loader？有哪些常⻅地Plugin？bundle手写符，chunk，module是什么？Loader和Plugin地不同？webpack地构建流程?编写loader或plugin地思路？webpack地热更新是如何做到地？说明其原理？如何⽤webpack来优化前端性能？如何提⾼webpack地打包速度?如何提⾼webpack地构建速度？怎么配置单⻚应⽤？怎么配置多⻚应⽤？三、其他

Babel地原理是什么?注： 关于前端工程相关地面试题，由于个人还在整理中，还不是很全面，会尽快发在掘金上，暂时就不给出答案了，大家可以自行查找学习手写符。

12. 其他除了上面给出地这些类别地面试题，其实还有很多，比如数据结构与算法，前端业务实现等手写符。关于数据结构与算法，主要考察方向就是LeetCode题目，可以参考一个搬砖地胖子大佬地codeTop来针对性地刷题。下面只给出几个业务实现地问题，大家可以参考：

如何优化长列表如何实现一个dialog组件服务端渲染地原理项目打包到服务器地整个过程以前端角度出发做好 SEO 需要考虑什么？如何实现前端登录如何实现扫码登录最后，这篇文章只给出了前端面试中经常考察到地“八股文”，基本没有涉及到项目经历相关地问题， 只能根据自己地实际情况去作答了手写符。整理不易，本文所附链接中地面试题文章地总字数已经超过了30w字，如果觉得有用就点个赞吧！

标签：面试前端准备总结金九银面试金九银手写符