【前端面试题总结】

React

1. 说说React生命周期中有哪些坑？如何避免？
2. 说说Real diff算法是怎么运作的？
3. 调和阶段setState干了什么？
4. 说说redux的实现原理是什么，写出核心代码？
5. React合成事件的原理？
6. React组件之间如何通信？
7. 为什么react元素有一个$$type属性？
8. 说说Connect组件的原理是什么？
9. 说说你对fiber架构的理解？解决了什么问题？
10. 说说你对redux中间件的理解？常用的中间件有哪些？实现原理？
11. React性能优化的手段有哪些？
12. 说说你对事件循环event loop的理解？
13. 前端跨域的解决方案？
14. 数组常用方法及作用，至少15个？
15. React render方法的原理，在什么时候会触发？
16. 说说你对vue中mixin的理解？
17. for...in循环和for...of循环的区别？
18. Js数据类型判断都有哪几种方式？至少说出5种？它们的区别是什么？
19. 说说你对Object.defineProperty()的理解？
20. 说说你对webSocket的理解？

CSS

1. 说说你对盒子模型的理解?
2. css选择器有哪些？优先级？哪些属性可以继承？
3. 元素水平垂直居中的方法有哪些？如果元素不定宽高呢？
4. 怎么理解回流跟重绘？什么场景下会触发？
5. 什么是响应式设计？响应式设计的基本原理是什么？如何做？

6. 如果要做优化，CSS提高性能的方法有哪些？

7. 对前端工程师这个职位是怎么样理解的？它的前景会怎么样?

8. 说说JavaScript中的数据类型？存储上的差别？

9. typeof 与 instanceof 区别​​​​​​​

10. 说说你对闭包的理解？闭包使用场景?

具体内容：

React合成事件的原理？

合成事件是React模拟原生DOM事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装

器，根据W3C规范来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口

当我们在按钮上绑定一个事件时，实际并不会把事件代理函数直接绑定到真实的节点上，而是把所

有的事件绑定到结构的最外层，使用一个统一的事件去监听，这个事件监听器上维持了一个映射来

保存所有组件内部的事件监听和处理函数。当组件挂载或卸载时，只是在这个统一的事件监听器上

插入或删除一些对象，当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正

的事件处理函数并调用。这样做简化了事件处理和回收机制，效率也有很大提升

React组件之间如何通信？

父组件向子组件传递：

父组件在调用子组件的时候，在子组件标签内传递参数，子组件通过props属性就能接收父组件传递过来的参数

子组件向父组件传递：

父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值

兄弟组件之间的通信：

父组件作为中间层来实现数据的互通，通过使用父组件传递

父组件向后代组件传递：

使用context提供了组件之间通讯的一种方式，可以共享数据，其他数据都能读取对应的数据

通过使用React.createContext创建一个context；

context创建成功后，其下存在Provider组件用于创建数据源，Consumer组件用于接收数据

Provider组件通过value属性用于给后代组件传递数据

如果想要获取Provider传递的数据，可以通过Consumer组件或者或者使用contextType属性接收

非关系组件传递：

将数据进行一个全局资源管理，从而实现通信

为什么react元素有一个$$type属性？

目的是为了防止 XSS 攻击。因为 Synbol 无法被序列化，所以 React 可以通过有没有 $$typeof 属

性来断出当前的 element 对象是从数据库来的还是自己生成的。

如果没有 $$typeof 这个属性，react 会拒绝处理该元素

说说Connect组件的原理是什么？

首先传入mapStateToProps、mapDispatchToProps，然后返回一个生产Component的函数(wrapWithConnect)，然后再将真正的Component作为参数传入wrapWithConnect，这样就生产出一个经过包裹的Connect组件，该组件具有：

（1）通过props.store获取祖先Component的store

（2）props包括stateProps、dispatchProps、parentProps,合并在一起得到nextState，作为props传给真正的Component

（3）componentDidMount时，添加事件this.store.subscribe(this.handleChange)，实现页面交互

（4）shouldComponentUpdate时判断是否有避免进行渲染，提升页面性能，并得到nextState

（5）componentWillUnmount时移除注册的事件this.handleChange

说说你对fiber架构的理解？解决了什么问题？

解决的问题：

JavaScript引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待；如果 JavaScript 线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿

理解：

React Fiber 是对 React 做出的一个重大改变与优化，是对 React 核心算法的一次重新实现

主要做了：

为每个增加了优先级，优先级高的任务可以中断低优先级的任务。然后再重新，注意是重新执行优先级低的任务

增加了异步任务，调用requestIdleCallback api，浏览器空闲的时候执行

dom diff树变成了链表，一个dom对应两个fiber（一个链表），对应两个队列，这都是为找到被中断的任务，重新执行

说说你对redux中间件的理解？常用的中间件有哪些？实现原理？

理解：

中间件是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的

Redux中，中间件就是放在就是在dispatch过程，在分发action进行拦截处理

本质上一个函数，对store.dispatch方法进行了改造，在发出 Action和执行 Reducer这两步之间，添加了其他功能

常用中间件：

redux-thunk：用于异步操作

redux-logger：用于日志记录

实现原理：

所有中间件被放进了一个数组chain，然后嵌套执行，最后执行store.dispatch。可以看到，中间件内部（middlewareAPI）可以拿到getState和dispatch这两个方法

内部会将dispatch进行一个判断，然后执行对应操作

React性能优化的手段有哪些？

1.避免使用内联函数

2.使用react fragement 避免额外标记

3.使用immutable，减少渲染的次数，为了避免重复渲染，会在shouldComponentUpdate()中做对

比，当返回true，执行render方法。immutable通过is方法完成对比

4.懒加载组件

5.事件绑定方式（在constructor中使用bind绑定性能更高）

6.服务端渲染

7.组件拆分，合理使用hooks

说说你对事件循环event loop的理解？

事件循环就是事件执行顺序的概念化

同步任务直接进入主线程，异步任务进入异步队列，主线程内的任务执行完后，会去执行异步队列中的任务，异步任务又分为宏任务和微任务，先执行微任务，在执行宏任务。这一执行过程不断重复就是事件循环

前端跨域的解决方案？

jsonp
CORS
在webpack中通过配置devServer的方式跨域
通过集成环境（本地模拟服务器）跨域
使用chrome浏览器跨域
在小程序中解决跨域问题
在cli项目中解决跨域问题

数组常用方法及作用，至少15个？

push（）从末尾添加一个元素

unshift（）从开头添加一个元素

pop（）从末尾删除一个元素

shift（）从开头删除一个元素

reverse（）将数组反转

isArrary（）判断是否是一个数组

valueOf（）返回数组本身

toString（）把数组转化为字符串

join（）数组拼接

sort（）数组排序

concat（）数组合并

slice（）数组截取

indexOf（）从前往后查找元素下标

filter（）数组筛选

find（）从前往后查找数组中是否包含某元素

React render方法的原理，在什么时候会触发？

原理：

在类组件中render函数指的就是render方法；而在函数组件中，指的就是整个函数组件

render函数中的jsx语句会被编译成我们熟悉的js代码，在render过程中，react将新调用的render函

数返回的树与旧版本的树进行比较，这一步是决定如何更新 DOM 的必要步骤，然后进行 diff 比

较，更新dom树

触发时机：

类组件调用 setState 修改状态

函数组件通过useState hook修改状态

一旦执行了setState就会执行render方法，useState 会判断当前值有无发生改变确定是否执行

render方法，一旦父组件发生渲染，子组件也会渲染

说说你对vue中mixin的理解？

本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等

我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来

分类：局部混入、全局混入

for...in循环和for...of循环的区别？

for in :

• for ... in 循环返回的值都是数据结构的 键值名。
• 遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。
• for ... in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。如——例3
• 特别情况下, for ... in 循环会以看起来任意的顺序遍历键名

for of:

• for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名
• 一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。
• 例1这个对象,没有 Symbol.iterator这个属性,所以使用 for of会报 obj is not iterable
• for of 不同与 forEach, 它可以与 break、continue和return 配合使用,也就是说 for of 循环可以随时退出循环。
• 提供了遍历所有数据结构的统一接口

Js数据类型判断都有哪几种方式？至少说出5种？它们的区别是什么？

1.最常见的判断方法：typeof

typeof返回的类型都是字符串形式

2.已知对象类型:   instanceof 

instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。

3.对象原型链判断方法： prototype 通用但很繁琐

instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。

4.根据对象的构造器constructor进行判断

跟instanceof相似,但是constructor检测Object与instanceof不一样,constructor还可以处理基本数据类型的检测,不仅仅是对象类型

5.jQuery方法： jquery.type()

在使用时,一定要引入jquery文件,不然会报错

6.严格运算符:   ===

通常===出现在我们的条件判断中,比如判断一个变量是否为空,变量是否为数据等

说说你对Object.defineProperty()的理解？

Object.defineProperty定义新属性或修改原有的属性；

vue的数据双向绑定的原理就是用的Object.defineProperty这个方法，里面定义了setter和getter方法，通过观察者模式（发布订阅模式）来监听数据的变化，从而做相应的逻辑处理

说说你对webSocket的理解？

WebSocket，是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅

客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输