2023前端面试题 （持续更新）_前端面试题2023

1.对于模块化你的理解是什么？

降低软件的复杂性，使其可控，可维护，可拓展。

一个功能就是一个模块，多个模块可以组成完整的应用，抽离一个模板不会影响应用其他功能的运行

---

2.Node是什么？

Node是一个基于ChromeV8引擎的JavaScript代码运行环境；

浏览器能运行JavaScript代码，浏览器就是JavaScript代码的运行环境；

Node能够运行JavaScript代码，Node就是JavaScript代码的运行环境。

---

3.谈谈对Vue组件化的理解？

Vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多个协同开发。

---

4.单页面是什么及其原理？单页面与多页面比较的优缺点又是什么？

SPA单页面应用，指只有一个主页面的应用，一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。

原理：

用js监听url中hash值的变化，onhashchange事件在当前URL的锚部分发生改变时触发。哈希值的变换并不会引发页面的刷新和跳转，当监听到hash变化，就可以动态的切换组件，就可以实现无刷新切换页面技术。

MPA多页面应用，指有多个独立页面的应用，每个页面必须重复加载js、css等相关资源，多页应用跳转，需要整页资源刷新。

---

5.谈谈函数防抖与节流？

防抖：在n秒内只执行一次该事件，如果在这过程中又触发了该事件，则重新计算时间

节流：在n秒内只执行一次该时间，如果在时间内又触发了该事件，只有一次生效

---

6.声明式导航与编程式导航的区别？

声明式导航：声明式导航是直接渲染到页面的，比如a链接

编程式导航：是用js处理逻辑后需要页面跳转，比如点击button按钮跳转

---

7.你是怎么样解决跨域问题的？

跨域：浏览器为了安全作出的限制策略；浏览器必须遵循同源策略，即同域名、同端口、同协议。

解决方法： CORS跨域

JSONP：利用<script>标签不受同源策略的限制，可以用来作为请求，后端接受请求后返回一个回调函数callback，调用前端已经定义好的函数，从而实现跨域请求。

Nginx反向代理接口跨域：服务器端调用HTTP接口只是使用HTTP协议，不需要同源策略，也不存在跨域问题

---

8.说一说块级作用域

任何一对花括号中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，这就是块级作用域

---

9.说一说箭头函数

• 箭头函数比普通函数更加简洁

               没有参数，就直接写一个空括号

                有一个参数，可以省略参数的括号

                有多个参数，用逗号分割

                函数体的返回值只有一句，可以省略大括号

• 箭头函数没有自己的this
• 箭头函数只会继承自己作用域的上一层继承的this。所以箭头函数中this的指向 在它定义的时候就已经确定了，之后不会改变
• 箭头函数继承来的this指向永远不会改变
• Call() apply() bind()等方法不能改变箭头函数中this的指向
• 箭头函数不能作为构造函数使用
• 箭头函数没有自己的arguments
• 箭头函数没有prototype
• 不能用作Gennerator函数，不能使用yield关键字
• 箭头函数没有super

---

10.说一说Vuex

Vuex是一个状态管理工具，所谓状态就是数据，采用集中式存储管理所有组件的状态，是为了大型项目一个数据共享的问题。Vuex可以将数据保存到本地，数据是响应式的，能够保持数据页面的共享，提高开发效率

好处：能够在vuex中集中管理共享的数据，易于开发和后期的维护可以做状态管理、采用localstorage保存信息、数据一直存储在用户的客户端中 存储在vuex中的数据是响应式的，能够实时保持数据与页面的同步，能够高效的实现组件之间的数据共享，提高开发效率

Vuex核心：

State：vuex的基本数据，数据源存放地，用于定义共享的数据

Getter：从基本数据派生的数据，相当于state的计算属性

Mutation：提交更新数据的方法，唯一一个可以操作state中数据的方法，必须是同步的，第一个参数是state，第二个参数是commit传过来的数据

Action：action是用来做异步操作的，一般用来发送请求，在action中写入函数，然后页面中用dispatch调用，然后在action中通过commit去调用 mutation通过mutation去操作state

Modules：模块化vuex，可以让每一个模块拥有自己的state、getter、mutation、action、使得结构非常清晰，方便管理

Vuex的运行机制：

Vuex提供数据（state），来驱动视图，视图通过dispatch派发action，在action中可以进行做一些异步操作，然后通过commit提交给mutation，由mutation去最终更改state。为什么要经过mutation？这是因为我们要在vue调试工具中记录数据的变化，这样可以通过插件去进行进一步的调试。所以说mutation中只能是纯同步的操作，如果是有异步操作，那么就需要在action中进行处理。如果没有异步操作，那么可以直接由组件进行commit操作mutation

---

11.Vue组件间通信的方法有那些

---

12.什么是npm？Npm的使用场景

Npm是随同Nodejs一起安装的包管理工具，能解决Nodejs代码部署上的很多问题。

使用场景：

a:允许用户从npm服务器下载别人编写的第三方包到本地使用。

b:允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用

c:允许用户将自己编写的包或者命令行程序上传到npm服务器供别人使用

---

13.使用基于token的登录流程

1. 客户端使用用户名跟密码请求登录
2. 服务端收到请求，去验证用户名与密码
3. 验证成功后，服务端会签发一个token，再把这个token发送给客户端
4. 客户端收到token以后可以把他存储起来，比如存储再cookie和Local storage里
5. 客户端每次向服务端请求资源的时候需要带着服务端签发的token
6. 服务端收到请求，然后去验证客户端请求里面的token，如果验证成功，就向客户端返回请求的数据

---

14  computed和watch的区别

Computed:是计算属性，依赖于其他属性，computed能缓存，当其依赖的属性发生改变，下一次计算computed的值时会重新计算computed的值

Watch：更多的是观察作用，相当于数据的监听回调，当监听的数据发生改变时，会执行回调并进行后续的操作

---

15. v-if和v-show区别

v-show无论是true/false都会被渲染，由display：none来控制显示

v-if true时显示，fasle时隐藏

v-show适合使用在切换频繁显示/隐藏的元素上（因为他的初始化渲染高）

v-if适合使用在切换不频繁、内容多，渲染一次消耗高的元素上(它的切换频率高）

v-show通过判断条件来动态的显示何隐藏元素、

v-if通过判断条件来动态的增删DOM元素

v-show 的性能比v-if更高

16.css中的四种定位

静态定位、相对定位、绝对定位、固定定位

静态定位：static是position属性的默认值，表示没有定位，使用静态定位的元素会按照元素正常的位置显示，并不会受到top、bottom等属性的影响

相对定位：元素相对于自己默认的位置进行位置上的调整，可以通过top、bottom、left、right四个属性的组合来设置元素相对于默认位置不同方向的偏移量

绝对定位：元素相对于第一个非静态定位的父级元素进行定位，如果找不到符合条件的父级元素则会与浏览器窗口来进行定位

固定定位:将元素相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器窗口的滚动而滚动，就像固定在了页面上一样

粘性定位：他像是相对定位和固定定位的结合体，当滚动页面的时它的效果与相对定位相同，当元素滚动到一定程度时它又会呈现出固定定位的效果

---

17.js中的变量提升

变量提升是指JS的变量和函数声明会在代码编译器，提升至代码的最前面

变量提升成立的前提是使用var关键字进行声明的变量，并且变量提升的时候只有声明被提升，赋值并没有被提升，同时函数的提升比变量的提升优先

变量提升的结果，可以在变量初始化之前访问该变量，返回的值是undefined，在函数声明前可以调用该函数

---

18.什么是BFC：

块级格式上下文  是一个独立的渲染区域，只有（Block-level box）块级盒子参与，BFC规定了内部盒子如何布局，以及盒子之间的关系和作用

BFC触发条件：

　　【1】根元素，即HTML元素

　　【2】float的值不为none

　　【3】overflow的值不为visible

　　【4】display的值为inline-block、table-cell、table-caption

　　【5】position的值为absolute或fixed 

BFC布局规则：
1.内部的Box会在垂直方向，一个接一个地放置（不设置浮动，设置浮动那肯定是 左右一行排列了）。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（正常的不设置浮动，两个块元素margin重叠,仅仅是垂直方向，左右不是这个样子的）

3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。（不设置浮动，不设置左边距，块级子元素，一律靠左竖直向下排列，内联子元素一律从左向右排列，想想，正常写代码，都是这样，设置左浮动的靠近父元素的左边，设置右浮动，靠近父元素的右边。）

4.BFC的区域不会与float box重叠。BFC区域的子元素不受外面的影响，外面的也不受BFC区域里面的影响（这个挺重要的，设置的浮动的元素，脱离了文档流，正常的相邻的元素会跑到它下面（靠左）。设置成BFC，自己独成一块，不会跑到它下面，而是保持洁身自好，自己依然占一块。）

6.计算BFC的高度时，浮动元素也参与计算（就是子元素设置浮动，脱离文档流，父元素高度塌陷，给父元素设置BFC，那么父元素高度就不会忽略浮动的子元素，从而高度就不会塌陷，这样理解，好像是BFC又把脱离文档流的元素，又拉回来了，但保持了浮动的特点。）

---

19.说一说变量提升

变量提升是指JS的变量和函数声明会在代码编译期，提升到代码的最前面

变量提升的前提是使用var关键字进行声明的变量并且变量提升的时候只有声明被提升，赋值并不会被提升，同时函数的声明提升比变量提升优先

变量提升的结果，可以在变量初始化之前访问，该变量的值为undefined，在函数声明前可以条用该函数。

---

20.原型链与作用域链的区别

原型链

当访问一个对象的属性时，会在这个对象的属性上去找，如果没有找到就会在这个对象的__proto__上去找，即构造函数的prototype上找，如果没有会一直在__proto__上找，知道最顶层，找不到即为undefined。这样一层一层地向上，就仿佛一条链串起来，所以就叫原型链

作用域链

变量取值会到创建这个变量的函数的作用域中取值，如果找不到，就会向上级作用域去查，直到查到全局作用域，这么一直查找的过程形成的链条叫作用域链

区别：

作用域链是相对于变量而言，原型时相对于属性而言

作用域最顶层时window，原型链最顶层时Object

---

21.New操作符做了那些事情

·首先创建一个新的空对象

·设置原型，将对象的原型设置为函数的prototype对象

·将新创建的对象作为this的上下文

·判断函数的返回值类型，如果是值类型，返回创建的对象，如果是引用类型，就返回这个引用类型的对象（如果该函数没有返回的对象，则返回this）

---

22.重绘和重排的区别

重排：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在队列中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素

重绘：当一个元素的外观发生改变，但没有发生布局改变，重新把元素的外观绘制出来的过程叫做重绘。表现为某些元素的外观没有发生改变

重绘和重排的代价是高昂的，他们会破坏用户的体验，使UI展示非常的缓慢，二者相比之下，重排的性能影响更大，在两种无法避免的情况下，我们可以选择代价更小的重绘

重绘不一定出现重排，但重排一定会出现重绘

---

23.简单说一下三次握手、和四次挥手

1. 三次握手
   • 客户端向服务器端发送一个SYN同步标志数据包，表示请求建立连接
   • 服务器端收到客户端的请求，并发送一个SYN/ACK同步确认标志数据包，表示同意建立连接
   • 客户端收到服务端的回复，并发送一哥ACK确认标志数据包，表示确认建立连接
2. 四次挥手
   • 客户端向服务器发送一个FIN结束标志数据包，表示请求断开连接
   • 服务端收到客户端的请求，发送一个ACK标志数据包，表示收到断开连接请求
   • 服务端向客户端发送一个FIN标志数据包，表示同意断开连接
   • 客户端向服务端发送一个ACK确认数据包，表示收到服务端断开连接确认