前端面试题总结！

2 篇文章0 订阅

订阅专栏

1.说说你对react的理解？有哪些特性？

React，用于构建用户界面的 JavaScript 库，

Jsx语法，单项数据绑定，虚拟dom,声明式编程

2.说说Real DOM和Virtual DOM的区别？优缺点？

虚拟 DOM 不会进行排版与重绘操作，而真实 DOM 会频繁重排与重绘 虚拟 DOM 的总损耗是“虚拟 DOM 增删改+真实 DOM 差异增删改+排版与重绘”，真实 DOM 的总损耗是“真实 DOM 完全增删改+排版与重绘”

真实dom优点是：易用。缺点，效率低，解析速度慢，占用内存高，性能差

虚拟dom优点：方便简单，维护困难，性能提高，跨平台，缺点：无法针对性的极致优化，首次渲染慢

3.说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？

（1）挂载阶段:

constructor() 在 React 组件挂载之前，会调用它的构造函数。

componentWillMount: 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。

componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用

（2）更新运行阶段:

componentWillReceiveProps: 在接受父组件改变后的props需要重新渲染组件时用到的比较多，外部组件传递 频繁的时候会导致效率比较低

shouldComponentUpdate():用于控制组件重新渲染的生命周期，state发生变化，组件会进入重新渲染的流 程，在这里return false可以阻止组件的更新

render(): render() 方法是 class 组件中唯一必须实现的方法。

componentWillUpdate()*: shouldComponentUpdate返回true以后，组件进入重新渲染完成之前进入这个函 数。

componentDidUpdate(): 每次state改变并重新渲染页面后都会进入这个生命周期

（3）卸载或销毁阶段：

componentWillUnmount ()： 在此处完成组件的卸载和数据的销毁。

4.说说React中setState执行机制？

一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state, 当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用

setState第一个参数可以是一个对象，或者是一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据

在使用setState更新数据的时候，setState的更新类型分成：同步更新，异步更新

在组件生命周期或React合成事件中，setState是异步

在setTimeout或者原生dom事件中，setState是同步

对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果

5.说说react的事件机制？

React基于浏览器的事件机制自身实现了一套事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等 在React中这套事件机制被称之为合成事件

6.React组件之间如何通信？

父组件向子组件通信，可以通过 props 方式传递数据；也可以通过 ref 方式传递数据；

子组件向父组件通信，通过回调函数方式传递数据；

父组件向后代所有组件传递数据，如果组件层级过多，通过 props 的方式传递数据很繁琐，可以通过 Context.Provider 的方式；

一个数据源实现跨组件通信，通过指定 contextType 的方式来实现；

多个数据源实现跨组件通信，使用 Context.Consumer 方式实现；

7.说说你对受控组件和非受控组件的理解？应用场景？

受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据

非受控组件，简单来讲，就是不受我们控制的组件一般情况是在初始化的时候接受外部数据，然后自己在内部存储其自身状态

受控组件来实现表单

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

React Fiber 是 Facebook 花费两年余时间对 React 做出的一个重大改变与优化，是对 React 核心算法的一次重新实现 。增加了优先级优先级高的任务会终端优先级低的任务，再重新执行优先级低的任务，增加了异步任务，dom diff树变成了链表

解决了页面长时间不更新导致的页面响应度差，用户感觉到卡顿的问题

9.说说react diff的原理是什么？

第一次render在执行的时候会将第一次的虚拟dom做一次缓存，第二次渲染的时候会将新的虚拟dom和老的虚拟dom进行对比。这个对比的过程其实就是diff算法。

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

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

redux-thunk ：用于异步操作

redux-logger：用于日志记录

中间件内部（middlewareAPI）可以拿到getState和dispatch这两个方法

11.如何使用css实现一个三角形？

css做三角形的方法：首先创建一个div元素，设置div的width和height为0，只用边框宽来填充，边框样式设置为实线“solid”；然后顶部边框设置颜色，剩下的三个边框的颜色设置为透明“transparent”值即可。

12.什么是强缓存和协商缓存？

12.1 浏览器缓存(Brower Caching)：

是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力 HTTP 1.0协议中的。简而言之，就是告诉浏览器在约定的这个时间前，可以直接从缓存中获取资源而无需跑到服务器去获取。 http缓存机制主要在http响应头中设定，响应头中相关字段为Expires、Cache-Control、Last-Modified、Etag

12.2强缓存：

浏览器不会像服务器发送任何请求，直接从本地缓存中读取文件并返回Status Code: 200 OK

12.3协商缓存

协商缓存: 向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；

13.说说React jsx转换成真实DOM的过程？

使用React.createElement或JSX编写React组件 ReactDOM.render将生成好的虚拟DOM渲染到指定容器上，

14.说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

React-redux是官方react UI绑定层，允许React组件从redux存储中读取数据，并将操作分派到存储以更新的状态。提供了connect,Provider等API，帮助我们连接react和redux，实现的逻辑会更加的严谨高效。

@reduxjs/tookit是对Redux的二次封装，开箱即用的一个高效的Redux开发工具，使得创建store，更新store

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

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

类组件调用 setState 修改状态：

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

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

组件卸载前进行清理操作

shouldComponentUpdate

React.memo

使用组件懒加载

不要使用内联函数定义

17.如何通过原生js实现一个节流函数和防抖函数？

18.说说webpack中常见的loader？解决了什么问题？

loader 用于对模块的"源代码"进行转换，在 import 或"加载"模块时预处理文件

loader进行文件内容的解析

19.说说如何借助webpack来优化前端性能？

JS代码压缩

CSS代码压缩

Html文件代码压缩

文件大小压缩

图片压缩

Tree Shaking

代码分离

内联 chunk

20.说说javascript内存泄漏的几种情况？

1.script 中存在对DOM/BOM 对象的引用导致

2.Javascript 对象泄漏

通常由闭包导致，

定时器

21.为什么虚拟 dom 会提高性能?

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

用Js对象表示真实的DOM结构，当状态变化的时候在重新创建一个虚拟DOM树结构，然后用新的树和旧的树进行比较，记录两棵树差异，把所记录的差异应用到所构建的真正的 DOM 树上，视图就更新了。

22.setState同步和异步

在React18之前 setState本身是同步的，但是在react中对事件处理做了批处理的优化操作，所以执行起来是一个异步操作

在React18之后 setState本身是同步的 所有的setState都做了批处理优化操作 所以所有的setState都是异步的

使setState从异步变成同步的方法

react18之前 ： setState的第二个参数（回调函数）拿到setState之后的结果、通过在settimeout中 执行setState 拿到结果

react18之后 ： setState的第二个参数（回调函数）拿到setState之后的结果、通过 flushSync 执行setState操作 随后就可以立马拿到结果

22.1批处理的好处

合并不必要的更新，减少更新流程调用次数

状态按顺序保存下来，更新时不会出现「竞争问题」

最终触发的更新是异步流程，减少浏览器掉帧可能性

23. 说说你对react hook的理解？

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

24.说说Connect组件的原理是什么

25.说说react 中jsx语法糖的本质？

jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力

JSX就是用来声明React当中的元素，React使用JSX来描述用户界面

JSX语法糖允许前端开发者使用我们最熟悉的类HTML标签语法来创建虚拟DOM在降低学习成本

26.说说AMD、CMD、commonJS模块化规范的区别？

CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。

ADM、异步加载：因为面向浏览器端，为了不影响渲染肯定是异步加载。依赖前置：所有的依赖必须写在最初的依赖数组中，速度快，但是会浪费资源，预先加载了所有依赖不管你是否用到

CMD、需要的时候去请求而不是先加载再请求

27.说说package.json中版本号的规则？

主号.次号.修补号

1.指定版本号

2.大于version 版本号

3.大于等于version版本号

4.小于version版本号

5.小于等于version版本号

6.~version 右侧任意

7.^version 从左向右，第一个非0号的右侧任意

28.说说你对koa中洋葱模型的理解？

在洋葱模型中，每一层相当于一个中间件，用来处理特定的功能， 也就是说每一个中间件都有两次处理时机

29.说说你对webSocket的理解？

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

30.Vue中自定义指令的理解，应用场景有哪些？

31.大文件如何做断点续传？

断点续传指的是在下载或上传时，将下载或上传任务人为的划分为几个部分，每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上传下载未完成的部分，而没有必要从头开始上传下载。用户可以节省时间，提高速度

32.原生js如何实现上拉加载下拉刷新？

上拉加载：

获取滑动内容外部盒子高度：document.querySelector(".container").clientHeight

获取整个内容的高度：document.querySelector(".ul").scrollHeight

获取卷曲出去的高度：let tops = document.querySelector(".container").scrollTop

外部盒子高度+卷曲出去的高度>=内容的高度 - 离底部距离高度（自定义）

监听滑动事件scroll 当满足以上条件时执行异步请求，这里需要加一个节流，当触发是禁止再次触发，等到异步事件加载完毕后，才允许再次上拉触发。

下拉刷新：

监听touchstart、touchmove、touchend三个事件

通过touchstart记录手指触摸时位置

通过touchmove记录向下滑动的距离，同时通过设置transform：translateY（x）来设置内容向下移动，控制滑动距离到达某个值时，禁止页面再做滑动

通过touchend记录手指离开事件，对滑动距离达到限定值时，做刷新请求数据处理，未到限定值时自动回弹translateY（0px）,并添加过渡动画

33.说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别？

CSS像素（css pixel, px）: 适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位

设备像素（device pixels），又称为物理像素指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已

设备独立像素（Device Independent Pixel）：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素

dpr（device pixel ratio），设备像素比，代表设备独立像素到设备像素的转换关系，

ppi （pixel per inch），每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像

区别：

无缩放情况下，1个CSS像素等于1个设备独立像素

设备像素由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变

PC端中，1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下）

在移动端中，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素

设备像素比（dpr） = 设备像素 / 设备独立像素

每英寸像素（ppi），值越大，图像越清晰

34.谈谈你对BFC的理解？

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则 BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

35.说说TCP为什么需要三次握手和四次握手？

防止旧的重复连接引起连接混乱问题

36.react新出来两个钩子函数是什么？和删掉的will系列有什么区别

新生命周期中新增了两个钩子，分别为getDerivedStateFromProps（从props中得到衍生的state）和getSnapshotBeforeUpdate。

区别

1、componentWillMount中可能需要做的事(一些数据初始化的操作就应该放在这个钩子中处理)，constructor与componentDidMount也能做，甚至做的更好，此方法被废弃。

2、componentWillReceiveProps实际行为与命名并不相符，由于不稳定性已由getDerivedStateFromProps代替；

3、而componentWillUpdate同等理由被getSnapshotBeforeUpdate代替

37.最少说出三种前端清除浮动的方法？

额外标签法：在需要清除浮动的元素前面加空 div 并设置 clear 为 both

浮动引起的父元素高度塌陷时，设置父元素 overflow 属性为hidden或auto

after 伪元素清除法浮动

38.说说你对git rebase 和git merge的理解？区别

1、rebase把当前的commit放到公共分支的最后面，merge把当前的commit和公共分支合并在一起；

2、用merge命令解决完冲突后会产生一个commit，而用rebase命令解决完冲突后不会产生额外的commit。

39.在使用redux过程中，如何防止定义的action-type的常量重复？

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。Symbol函数前不能使用new命令，否则会报错。这是因为生成的Symbol是一个原始类型的值，不是对象Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

40.调和阶段setState干了什么？

React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程。 经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；

41.props和state相同点和不同点？

props：

props是一个从外部传进组件的参数，由于React具有单向数据流的特性，所以他的主要作用是从父组件向子组件中传递数据，它是不可改变的，如果想要改变它，只能通过外部组件传入新的props来重新渲染子组件，否则子组件的props和展示形式不会改变，props除了可以传字符串，数字，还可以传递对象，数组甚至是回调函数

state：

state主要作用是用于组件保存，控制及修改自己的状态，它只能在constructor中初始化，state是可以被改变的，state放改动的一些属性，比如点击选中，再点击取消，类似这种属性就放入带state中，注意：没有state的叫做无状态组件，多用props少用state，多写无状态组件，注意：修改state的值时，必须通过调用setState方法，当我们调用this.setState方法时,React会更新组件的数据状态，并且重新调用render方法

42.shouldComponentUpdate有什么作用？

shouldComponentUpdate () 的返回值用于判断 React 组件的输出是否受当前 state 或 props 更改的影响，当 props 或 state 发生变化时，shouldComponentUpdate () 会在渲染执行之前被调用。

43.在虚拟dom计算的时候diff和key之间有什么关系？

key 当同一层级的某个节点添加了对于其他同级节点唯一的key属性，当它在当前层级的位置发生了变化后。react diff算法通过新旧节点比较后，如果发现了key值相同的新旧节点，就会执行移动操作（然后依然按原策略深入节点内部的差异对比更新），而不会执行原策略的删除旧节点，创建新节点的操作。

44.React的props.children使用map函数来遍历会收到异常显示，为什么？应该 如何遍历？

在reactJS中props.children不一定是数组

有三种可能 ：

1当前组件没有子节点数据类型就是undefined，

2有一个子节点数据类型就是object 。

3 有多个子节点的时候才会是array ,只有在多个节点的时候才可以直接调用map方法，react资深提供了一个react.children.map()方法，可以安全遍历子节点对象。

45.谈谈你对immutable.js的理解？

Immutable.js采用了 持久化数据结构 ，保证每一个对象都是不可变的，任何添加、修改、删除等操作都会生成一个新的对象，且通过 结构共享 等方式大幅提高性能。

46.redux中同步action与异步action最大的区别是什么？

同步： Redux的教程中反复使用todo列表的例子，那就是个典型的同步action，每当disptach action时，state就会被立即更新[当然setState是异步的]

异步： 一般异步处理都会使用中间件，比如redux-thunk或者redux-saga，他们做的事情是包装dispatch，request action由view触发，receive action由这些中间件触发

47.redux-saga和redux-thunk的区别与使用场景？

redux-thunk：通过执行action中的函数实现业务逻辑，没有拓展API

redux-saga：通过定义saga函数进行监控，同时提供一些常用的API

redux-thunk将部分异步处理业务逻辑写在action中，redux-sagasaga则是放在监控的函数中。

48.CDN的特点及意义？

cdn 内容分发网络。

CDN的功能特点：

(1)节省骨干网带宽，减少带宽需求量；

(2)提供服务器端加速，解决由于用户访问量大造成的服务器过载问题；

(3)服务商能使用Web

Cache技术在本地缓存用户访问过的Web页面和对象，实现相同对象的访问无须占用主干的出口带宽，并提高用户访问因特网页面的相应时间的需求；

(4)能克服网站分布不均的问题，并且能降低网站自身建设和维护成本；

(5)降低“通信风暴”的影响，提高网络访问的稳定性

意义

使用CDN可以获取一些好处，无论它们是公有CDN还是提供静态内容的私有CDN，你的里程可能会有所不同，具体取决于通过CDN传递的流量以及你产生的流量。

49.![] == ![]，![] == []，结果是什么？为什么？

①、根据运算符优先级 ，！ 的优先级是大于 == 的，所以先会执行 ![]

②、根据上面提到的规则（如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false转换为0，而true转换为1），则需要把 false 转成 0

③、根据上面提到的规则（如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf()方法，用得到的基本类型值按照前面的规则进行比较，如果对象没有valueOf()方法，则调用 toString()）

④、根据上面提到的规则（如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值）

50.什么是闭包，应用场景是什么？

闭包就是能够读取其他函数内部变量的函数，说白了闭包就是个函数，只不过是处于其他函数内部而已。

1.访问函数内部的变量

2.防止函数内部的变量执行完城后，被销毁，使其一直保存在内存中。

51.谈谈你是如何做移动端适配的？

[flex弹性布局]

[百分比]

[用框架搭建页面]

[viewport适配]

[媒体查询media]

[rem+viewport缩放（也成为1px适配）]

52.移动端1像素的解决方案？

移动端1像素的解决方案？

伪类+transform

viewport + rem

border-image

background-image

postcss-write-svg

总结

0.5px，相信浏览器肯定是会慢慢支持的，目前而言，如果能用的话，可以hack一下。

对于老项目，建议采用transform+伪类。

新项目可以设置viewport的scale值，这个方法兼容性好。

postcss-write-svg简单易用，仅适合直线，圆角建议用transform+伪类实现

53.弹性盒中的缩放机制是怎样的？

弹性盒中的项目设置flex-grow属性定义项目的放大比例，默认值为0，值越大，放大越厉害，且不支持负值； 而flex-shrink属性定义项目的缩小比例，默认值为1，数值越大，缩小越厉害，同样不支持负值；

————————————————

版权声明：本文为CSDN博主「可别390」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_72127453/article/details/129063879