【面试题】金九银十，你准备好面试了吗? (30w字前端面试题总结)（ React）

一、组件基础题库

1. React 事件机制
2. React的事件和普通的HTML事件有什么不同？
3. React 组件中怎么做事件代理？它的原理是什么？
4. React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代
5. React如何获取组件对应的DOM元素？
6. React中可以在render访问refs吗？为什么？
7. 对React的插槽(Portals)的理解，如何使用，有哪些使用场景
8. 在React中如何避免不必要的render？
9. 对 React-Intl 的理解，它的工作原理？
10. 对 React context 的理解
11. 为什么React并不推荐优先考虑使用Context？
12. React中什么是受控组件和非控组件？
13. React中refs的作用是什么？有哪些应用场景？
14. React组件的构造函数有什么作用？它是必须的吗？
15. React.forwardRef是什么？它有什么作用？
16. 类组件与函数组件有什么异同？
17. React中可以在render访问refs吗？为什么？
18. 对React的插槽(Portals)的理解，如何使用，有哪些使用场景
19. 在React中如何避免不必要的render？
20. 对 React-Intl 的理解，它的工作原理？
21. 对 React context 的理解
22. 为什么React并不推荐优先考虑使用Context？
23. React中什么是受控组件和非控组件？
24. React中refs的作用是什么？有哪些应用场景？
25. React组件的构造函数有什么作用？它是必须的吗？
26. React.forwardRef是什么？它有什么作用？
27. 类组件与函数组件有什么异同？

给大家推荐一个实用面试题库

1、前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库

二、数据管理

1. React setState 调用的原理
2. React setState 调用之后发生了什么？是同步还是异步？
3. React中的setState批量更新的过程是什么？
4. React中有使用过getDefaultProps吗？它有什么作用？
5. React中setState的第二个参数作用是什么？
6. React中的setState和replaceState的区别是什么？
7. 在React中组件的this.state和setState有什么区别？
8. state 是怎么注入到组件的，从 reducer 到组件经历了什么样的过程
9. React组件的state和props有什么区别？
10. React中的props为什么是只读的？
11. 在React中组件的props改变时更新组件的有哪些方法？
12. React中怎么检验props？验证props的目的是什么？

三、生命周期

1. React的生命周期有哪些？
2. React 废弃了哪些生命周期？为什么？
3. React 16.X 中 props 改变后在哪个生命周期中处理
4. React 性能优化在哪个生命周期？它优化的原理是什么？
5. state 和 props 触发更新的生命周期分别有什么区别？
6. React中发起网络请求应该在哪个生命周期中进行？为什么？
7. React 16中新生命周期有哪些

四、组件通信

1. 父子组件的通信方式？
2. 跨级组件的通信方式？
3. 非嵌套关系组件的通信方式？
4. 如何解决 props 层级过深的问题
5. 组件通信的方式有哪些

五、路由

1. React-Router的实现原理是什么？
2. 如何配置 React-Router 实现路由切换
3. React-Router怎么设置重定向？
4. react-router 里的 Link 标签和 a 标签的区别
5. React-Router如何获取URL的参数和历史对象？
6. React-Router 4怎样在路由变化时重新渲染同一个组件？
7. React-Router的路由有几种模式？
8. React-Router 4的Switch有什么用？

六、Redux

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

七、Hooks

1. 对 React Hook 的理解，它的实现原理是什么
2. 为什么 useState 要使用数组而不是对象
3. React Hooks 解决了哪些问题？
4. React Hook 的使用限制有哪些？
5. useEffect 与 useLayoutEffect 的区别
6. React Hooks在平时开发中需要注意的问题和原因
7. React Hooks 和生命周期的关系？

八、虚拟DOM

1. 对虚拟 DOM 的理解？虚拟 DOM 主要做了什么？虚拟 DOM 本身是什么？
2. React diff 算法的原理是什么？
3. React key 是干嘛用的 为什么要加？key 主要是解决哪一类问题的
4. 虚拟 DOM 的引入与直接操作原生 DOM 相比，哪一个效率更高，为什么
5. React 与 Vue 的 diff 算法有何不同？

九、其他

1. React组件命名推荐的方式是哪个？
2. react 最新版本解决了什么问题，增加了哪些东西
3. react 实现一个全局的 dialog
4. React 数据持久化有什么实践吗？
5. 对 React 和 Vue 的理解，它们的异同
6. 可以使用TypeScript写React应用吗？怎么操作？
7. React 设计思路，它的理念是什么？
8. React中props.children和React.Children的区别
9. React的状态提升是什么？使用场景有哪些？
10. React中constructor和getInitialState的区别?
11. React的严格模式如何使用，有什么用处？
12. 在React中遍历的方法有哪些？
13. 在React中页面重新加载时怎样保留数据？
14. 同时引用这三个库react.js、react-dom.js和babel.js它们都有什么作用？
15. React必须使用JSX吗？
16. 为什么使用jsx的组件中没有看到使用react却需要引入react？
17. 在React中怎么使用async/await？
18. React.Children.map和js的map有什么区别？
19. 对React SSR的理解
20. 为什么 React 要用 JSX？
21. HOC相比 mixins 有什么优点？
22. React 中的高阶组件运用了什么设计模式？

（2）思维导图

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

6. 浏览器原理

（1）面试题目

一、浏览器安全

1. 什么是 XSS 攻击？
2. 如何防御 XSS 攻击？
3. 什么是 CSRF 攻击？
4. 如何防御 CSRF 攻击？
5. 什么是中间人攻击？如何防范中间人攻击？
6. 有哪些可能引起前端安全的问题?
7. 网络劫持有哪几种，如何防范？

二、进程与线程

1. 进程与线程的概念
2. 进程和线程的区别
3. 浏览器渲染进程的线程有哪些
4. 进程之前的通信方式
5. 僵尸进程和孤儿进程是什么？
6. 死锁产生的原因？ 如果解决死锁的问题？
7. 如何实现浏览器内多个标签页之间的通信?
8. 对Service Worker的理解

三、浏览器缓存

1. 对浏览器的缓存机制的理解
2. 浏览器资源缓存的位置有哪些？
3. 协商缓存和强缓存的区别
4. 为什么需要浏览器缓存？
5. 点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？

四、浏览器组成

1. 对浏览器的理解
2. 对浏览器内核的理解
3. 常见的浏览器内核比较
4. 常见浏览器所用内核
5. 浏览器的主要组成部分
6. 五、浏览器渲染原理
7. 浏览器的渲染过程
8. 浏览器渲染优化
9. 渲染过程中遇到 JS 文件如何处理？
10. 什么是文档的预解析？
11. CSS 如何阻塞文档解析？
12. 如何优化关键渲染路径？
13. 什么情况会阻塞渲染？

六、浏览器本地存储

1. 浏览器本地存储方式及使用场景
2. Cookie有哪些字段，作用分别是什么
3. Cookie、LocalStorage、SessionStorage区别
4. 前端储存的⽅式有哪些？
5. IndexedDB有哪些特点？

七、浏览器同源策略

1. 什么是同源策略
2. 如何解决跨越问题
3. 正向代理和反向代理的区别
4. Nginx的概念及其工作原理

八、浏览器事件机制

1. 事件是什么？事件模型？
2. 如何阻止事件冒泡
3. 对事件委托的理解
4. 事件委托的使用场景
5. 同步和异步的区别
6. 对事件循环的理解
7. 宏任务和微任务分别有哪些
8. 什么是执行栈
9. Node 中的 Event Loop 和浏览器中的有什么区别？process.nextTick 执行顺序？
10. 事件触发的过程是怎样的

九、浏览器垃圾回收机制

1. V8的垃圾回收机制是怎样的
2. 哪些操作会造成内存泄漏？

（2）思维导图

下图对浏览器原理面试题的考察频率进行了大致的区分，可以选择性的学习： 

7. 计算机网络

（1）面试题目

一、HTTP协议

1. GET和POST的请求的区别
2. POST和PUT请求的区别
3. 常见的HTTP请求头和响应头
4. HTTP状态码304是多好还是少好
5. 常见的HTTP请求方法
6. OPTIONS请求方法及使用场景
7. HTTP 1.0 和 HTTP 1.1 之间有哪些区别？
8. HTTP 1.1 和 HTTP 2.0 的区别
9. HTTP和HTTPS协议的区别
10. GET方法URL长度限制的原因
11. 当在浏览器中输入 Google.com 并且按下回车之后发生了什么？
12. 对keep-alive的理解
13. 页面有多张图片，HTTP是怎样的加载表现？
14. HTTP2的头部压缩算法是怎样的？
15. HTTP请求报文的是什么样的？
16. HTTP响应报文的是什么样的？
17. HTTP协议的优点和缺点
18. 说一下HTTP 3.0
19. HTTP协议的性能怎么样
20. URL有哪些组成部分
21. 与缓存相关的HTTP请求头有哪些

二、HTTPS协议

1. 什么是HTTPS协议？
2. TLS/SSL的工作原理
3. 数字证书是什么？
4. HTTPS通信（握手）过程
5. HTTPS的特点
6. HTTPS是如何保证安全的？

三、HTTP状态码

1. 常见的状态码
2. 同样是重定向，307，303，302的区别？

四、DNS协议介绍

1. DNS 协议是什么
2. DNS同时使用TCP和UDP协议？
3. DNS完整的查询过程
4. 迭代查询与递归查询
5. DNS 记录和报文

五、网络模型

1. OSI七层模型
2. TCP/IP五层协议

六、TCP与UDP

1. TCP 和 UDP的概念及特点
2. TCP和UDP的区别
3. TCP和UDP的使用场景
4. UDP协议为什么不可靠？
5. TCP的重传机制
6. TCP的拥塞控制机制
7. TCP的流量控制机制
8. TCP的可靠传输机制
9. TCP的三次握手和四次挥手
10. TCP粘包是怎么回事，如何处理?
11. 为什么udp不会粘包？

七、WebSocket

1. 对 WebSocket 的理解
2. 即时通讯的实现：短轮询、长轮询、SSE 和 WebSocket 间的区别？

（2）思维导图

下图对计算机网络面试题的考察频率进行了大致的区分，可以选择性的学习：

8. 前端性能优化

（1）面试题目

一、CDN

1. CDN的概念
2. CDN的作用
3. CDN的原理
4. CDN的使用场景

二、懒加载

1. 懒加载的概念
2. 懒加载的特点
3. 懒加载的实现原理
4. 懒加载与预加载的区别

三、回流与重绘

1. 回流与重绘的概念及触发条件
2. 如何避免回流与重绘？
3. 如何优化动画？
4. documentFragment 是什么？用它跟直接操作 DOM 的区别是什么？

四、节流与防抖

1. 对节流与防抖的理解
2. 实现节流函数和防抖函数

五、图片优化

1. 如何对项目中的图片进行优化？
2. 常见的图片格式及使用场景

六、Webpack优化

1. 如何提⾼webpack的打包速度?
2. 如何减少 Webpack 打包体积
3. 如何⽤webpack来优化前端性能？
4. 如何提⾼webpack的构建速度？

（2）思维导图

下图对前端性能优化面试题的考察频率进行了大致的区分，可以选择性的学习：