一、组件基础题库
- 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是什么？它有什么作用？
- 类组件与函数组件有什么异同？
给大家推荐一个实用面试题库
1、前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
- 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 实现一个全局的 dialog
- React 数据持久化有什么实践吗？
- 对 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面试题的考察频率进行了大致的区分，可以选择性的学习：
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）思维导图
下图对浏览器原理面试题的考察频率进行了大致的区分，可以选择性的学习：
7. 计算机网络
（1）面试题目
一、HTTP协议
- GET和POST的请求的区别
- POST和PUT请求的区别
- 常见的HTTP请求头和响应头
- HTTP状态码304是多好还是少好
- 常见的HTTP请求方法
- OPTIONS请求方法及使用场景
- HTTP 1.0 和 HTTP 1.1 之间有哪些区别？
- HTTP 1.1 和 HTTP 2.0 的区别
- HTTP和HTTPS协议的区别
- GET方法URL长度限制的原因
- 当在浏览器中输入 Google.com 并且按下回车之后发生了什么？
- 对keep-alive的理解
- 页面有多张图片，HTTP是怎样的加载表现？
- HTTP2的头部压缩算法是怎样的？
- HTTP请求报文的是什么样的？
- HTTP响应报文的是什么样的？
- HTTP协议的优点和缺点
- 说一下HTTP 3.0
- HTTP协议的性能怎么样
- URL有哪些组成部分
- 与缓存相关的HTTP请求头有哪些
二、HTTPS协议
- 什么是HTTPS协议？
- TLS/SSL的工作原理
- 数字证书是什么？
- HTTPS通信（握手）过程
- HTTPS的特点
- HTTPS是如何保证安全的？
三、HTTP状态码
- 常见的状态码
- 同样是重定向，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）思维导图
下图对计算机网络面试题的考察频率进行了大致的区分，可以选择性的学习：
8. 前端性能优化
（1）面试题目
一、CDN
- CDN的概念
- CDN的作用
- CDN的原理
- CDN的使用场景
二、懒加载
- 懒加载的概念
- 懒加载的特点
- 懒加载的实现原理
- 懒加载与预加载的区别
三、回流与重绘
- 回流与重绘的概念及触发条件
- 如何避免回流与重绘？
- 如何优化动画？
- documentFragment 是什么？用它跟直接操作 DOM 的区别是什么？
四、节流与防抖
- 对节流与防抖的理解
- 实现节流函数和防抖函数
五、图片优化
- 如何对项目中的图片进行优化？
- 常见的图片格式及使用场景
六、Webpack优化
- 如何提⾼webpack的打包速度?
- 如何减少 Webpack 打包体积
- 如何⽤webpack来优化前端性能？
- 如何提⾼webpack的构建速度？
（2）思维导图
下图对前端性能优化面试题的考察频率进行了大致的区分，可以选择性的学习：
