前端面试题

前端面试题

vue2和vue3的区别

1.生命周期不一样：
before-create->setup
created->setup
before-mount->onbeforemount
mounted->onMounted
before-update->onBeforeUpdate
updated->onupdated
before-activate
activated
before-destroy->onbeforeunmount
destroyed ->onunmounted
异常捕获：errorCaptured -> onErrorCaptured
2.API不一样：在vue2中采用选项式API，将数据和函数集中起来处理，将功能点切割了当逻辑复杂的时候不利于代码阅读。
在vue3中采用组合式API，将同一个功能的代码集中起来处理，使得代码更加有序，有利于代码的书写和维护。
3.在vue2中v-for的优先级高于v-if，可以放在一起使用，但是不建议这么做，会带来性能上的浪费
在vue3中v-if的优先级高于v-for，一起使用会报错。可以通过在外部添加一个标签，将v-for移到外层
4.虚拟dom是js中的普通对象，将html中的dom转换为对象来保存，有利于实时更新dom中的数据；diff算法是比较新旧dom的区别，并进行更新dom; diff算法：vue2会遍历每一个虚拟结点，并进行比较，使用patch函数比较结点的不同并更新，返回更新后的结点，使用的先序深度遍历；使用patch依次比较来更新dom，这样对于未更新的节点来说就浪费时间；
vue3在初始化节点的时候为每一个结点添加了patchflags；只会比较patchFlags发生变化的节点，进行识图更新。而对于patchFlags没有变化的元素作静态标记，在渲染的时候直接复用.
5.响应式原理不同:vue3使用了proxy代替了vue2的definedProperty()；definedProperty()需要遍历属性来查看是否变化；而proxy不需要遍历，会自动监听所有属性，有利于性能的提升；

vue和react的区别

1.响应方式不一样：Vue依赖收集，自动优化，数据可变。Vue递归监听data的所有属性,直接修改。当数据改变时，自动找到引用组件重新渲染。 react React基于状态机，手动优化，数据不可变，需要setState驱动新的state替换老的state。
2.vue推荐以template组件的方式来建立逻辑；而react使用jsx模板；
3.diff算法：vue对比节点。当节点元素相同，但是classname不同，认为是不同类型的元素，删除重建，而react认为是同类型节点，只是修改节点属性。
4.vue是双向数据绑定；react是单向的。

vue的双向数据绑定

vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

当监听者监听到属性发生变化时，就给订阅者发送信息，订阅者根据信息执行相应的处理函数，并更新视图。

js的作用域

全局作用域，局部作用域，块级作用
1.全局作用域：windows对象、最外层的变量、在函数里未声明直接赋值的变量；
2.局部作用域：又指函数作用域，指函数内部的空间，函数内部的变量，外部无法访问；
3.块级作用域：正是es6,let的出现让javascript拥有了块级作用域；let有块级作用域，var没有；var可以重复声明，有变量提升（变量覆盖，可能导致作用域改变），let没有；

var let const区别

instanceof typeof

instanceof 运算符用于检查对象是否是特定类的实例
typeof得到数据类型

闭包

懒加载

等到合适的时机再将src属性赋值，一开始使用其他属性如data-src将图片的地址保存，等需要加载时(如监听document.addEventListener某种变化时或者事件响应（点击按钮等）)将datasrc赋值给src，请求图片。

jpeg png

压缩算法：

JPEG 使用有损压缩算法，这意味着在压缩图像时会丢失一些细节，但可以显著减小文件大小。这使得 JPEG 适合用于照片和复杂图像，因为它们可以以相对较小的文件大小保存。
PNG 使用无损压缩算法，保留了图像的所有细节，因此文件大小通常比 JPEG 大。PNG 适合保存图像中的文本、图标和线条等，因为它们需要保持清晰度和细节。
透明度支持：

PNG 支持透明度，并且可以保存 alpha 通道信息，这意味着图像可以具有部分透明效果。
JPEG 不支持透明度，它只能保存不透明的图像。
色彩空间：

JPEG 适合保存彩色照片，因为它支持 RGB 色彩空间，并且能够实现高质量的色彩渐变。
PNG 也支持 RGB 色彩空间，但它还支持索引色彩模式和灰度模式。
适用场景：

由于 JPEG 具有较高的压缩比和较小的文件大小，因此适用于 Web 上的照片展示、社交媒体分享等场景。
由于 PNG 保留了图像的所有细节和透明度信息，因此适用于图标、线条、文本等需要保持清晰度的场景，以及需要透明背景的场景。

http和https的区别

HTTP 是一种不安全的传输协议，它的数据传输是明文的，容易被窃听和篡改。
HTTPS 则是在 HTTP 的基础上加入了 SSL/TLS 协议，通过加密数据传输和建立安全的通信信道来保护数据的安全性。
http是80端口 https是443端口
HTTP 没有提供身份验证的机制，任何人都可以发送 HTTP 请求。
HTTPS 在 SSL/TLS 握手阶段使用数字证书对服务器和客户端进行身份验证，确保通信双方的身份是合法的，防止中间人攻击。

z-index

用于控制元素在堆叠顺序（层叠顺序）中的位置.
z-index: 2; /* 蓝色盒子的 z-index 为 2，高于红色盒子 */
z-index 只在定位元素（即 position 属性值为 relative、absolute 或 fixed 的元素）上才有效.
元素必须处于同一个层叠上下文中。如果元素处于不同的层叠上下文中，即使一个元素的 z-index 值比另一个元素的 z-index 值高，也不一定会优先显示在上面。

MVVC（异步通信为主） MVC（同步为主）

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

mvc

ES5 ES6

es6新增了类，构造函数，块级作用域（let const），箭头函数；

原型和原型链（继承）

在 JavaScript 中，每个对象都有一个关联的原型对象（prototype object）。原型对象是一个普通的对象，它包含了共享的属性和方法。

TCP UDP

TCP（传输控制协议）和UDP（用户数据报协议）是两种不同的网络传输协议，它们有以下区别：

可靠性：

TCP 提供可靠的数据传输，通过序列号、确认应答和重传机制来确保数据的完整性和可靠性。
UDP 不提供可靠性保证，它只是简单地将数据包发送到目标地址，不会进行重传或确认。因此，UDP 的传输速度更快，但不可靠。
连接性：

TCP 是面向连接的协议，通信双方在传输数据之前必须先建立连接，然后再释放连接。
UDP 是无连接的协议，通信双方之间不需要建立连接，直接发送数据包即可。
传输方式：

TCP 采用流式传输方式，将数据划分为数据段进行传输。
UDP 采用数据报传输方式，将数据封装为数据报进行传输。
应用场景：

TCP 适用于需要可靠传输和数据完整性的应用，如网页浏览、文件传输、电子邮件等。
UDP 适用于实时性要求高、数据量较小且对可靠性要求不高的应用，如视频流、音频通话、在线游戏等。
关于 MAC 地址、IP 地址、端口和子网掩码的作用：

MAC 地址（Media Access Control Address）：

MAC 地址是网络设备（如网卡）的唯一标识符，由厂商预先分配给设备。
它用于在局域网中唯一标识网络设备，以便在数据链路层（OSI 模型的第二层）进行通信。
IP 地址（Internet Protocol Address）：

IP 地址是用于在网络中唯一标识设备的地址，它定义了设备在网络上的位置。
IP 地址用于在网络层（OSI 模型的第三层）进行通信，它标识了设备所在的网络和主机。
端口：

端口是在主机上标识应用程序或服务的数字标识，用于在主机上区分不同的网络服务。
在传输层（OSI 模型的第四层），端口号用于将数据传输到正确的应用程序或服务。
子网掩码（Subnet Mask）：

子网掩码是用于划分网络中子网的地址掩码，它确定了网络中哪些部分是主机位，哪些部分是网络位。
子网掩码与 IP 地址结合使用，用于将 IP 地址分成网络地址和主机地址两部分，以便进行路由和网络通信。

https连接

建立 HTTPS 连接并确保安全性涉及多个步骤和安全机制：

1. 建立连接：

   • 客户端（如浏览器）向服务器发起连接请求。
   • 服务器返回包含公钥的数字证书。

2. 验证证书：

   • 客户端验证证书的有效性，包括是否由受信任的证书颁发机构（CA）签发，是否在有效期内，以及是否与服务器域名匹配。
   • 如果验证成功，客户端生成一个随机的加密密钥，使用服务器的公钥加密，并发送给服务器。

3. 建立安全连接：

   • 服务器使用自己的私钥解密客户端发送的加密密钥。
   • 之后，客户端和服务器都拥有了相同的加密密钥，可以使用对称加密算法进行后续通信，保证通信的机密性。

4. 加密通信：

   • 客户端和服务器使用协商好的对称加密密钥对通信数据进行加密和解密。
   • 通信数据经过加密后在网络上传输，提供了机密性保护。

5. 数据完整性：

   • 使用消息摘要算法（如SHA-256）对通信数据进行摘要计算，生成消息摘要。
   • 消息摘要与数据一起发送到接收方，接收方使用同样的算法重新计算消息摘要，并与接收到的消息摘要进行比较，以验证数据的完整性。

数字证书是确保 HTTPS 安全连接的核心组成部分，它是一种由可信任的证书颁发机构（CA）签发的电子文件，用于验证网站身份和加密通信。数字证书包含了网站的公钥、网站信息以及证书颁发机构的数字签名等信息。数字证书的具体机制包括：

• 证书请求：

  • 网站向证书颁发机构提交证书请求，请求签发数字证书。证书请求包含了网站的公钥和相关信息。

• 证书签发：

  • 证书颁发机构验证网站的身份和信息，然后使用自己的私钥对证书信息进行签名，生成数字证书。

• 证书验证：

  • 客户端在建立 HTTPS 连接时收到服务器返回的数字证书。
  • 客户端使用内置的信任的根证书（Root Certificate）或者中间证书（Intermediate Certificate）验证数字证书的有效性，包括颁发机构的合法性、证书是否在有效期内、证书是否被吊销等。

• 安全通信：

  • 如果数字证书验证通过，客户端就可以信任服务器的公钥，使用该公钥进行加密通信，并确保通信的安全性和机密性。

事件循环

js是单线程的，只能同步，即在同一时间只能执行一个任务，而事件循环机制允许 JavaScript 在执行同步任务的同时处理异步任务，以保持响应性。事件循环机制的基本流程如下：
1.执行同步代码，将同步任务添加到执行栈中依次执行。
2.如果遇到异步任务（如定时器、网络请求、事件监听等），则将其交给相应的宿主环境（浏览器、Node.js 等）处理，并将其回调函数注册到消息队列中。
3.当执行栈为空时，事件循环会检查消息队列中是否有待处理的任务。
4.如果消息队列中有任务，则将其中的任务移动到执行栈中执行。
重复上述步骤，直到消息队列为空。

组件通信

ParentComponent 使用 Props 将名字传递给 ChildComponent，然后监听 ChildComponent 发送的 buttonClick 事件，并在事件触发时调用 handleButtonClick 方法。ChildComponent 在按钮点击时触发 buttonClick 事件，并通过 $emit 方法通知父组件。
通过在子组件的声明中使用 props 属性，可以指定子组件需要接收的数据的名称和类型。然后，在父组件中使用子组件时，可以将数据通过属性的形式传递给子组件。

vuex状态管理

浏览器错误代码

404 Not Found：

表示请求的资源未找到，通常是因为输入的 URL 地址错误或者请求的资源不存在。
403 Forbidden：

表示服务器拒绝访问请求的资源，通常是因为缺乏权限或者访问被拒绝。
500 Internal Server Error：

表示服务器在处理请求时发生了内部错误，通常是服务器端的代码出现了问题。

html页面结构

文档类型 doctype
html标签 定义css、js链接，title.
body

http的缓存机制

强缓存和协商缓存
浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把文件、文件的返回时间、response header一并缓存
等第二次如果请求文件，如果没有命中缓存或者过期，则请求服务器，服务器根据Etag查看文件是否被修改，如果没有就返回304（服务器收到了浏览器的请求，但资源未被修改，因此不会重新发送资源，而是告诉浏览器直接使用缓存中的资源）,让客服端使用本地缓存（协商缓存）

css中引起浏览器重绘重排

修改元素的几何属性：

修改元素的宽度、高度、位置、边距、填充等属性会触发重绘和重排。
修改元素的显示属性：

修改元素的 display、visibility、opacity 等属性会触发重绘和重排。
修改元素的背景属性：

修改元素的背景颜色、背景图片等属性会触发重绘。
修改文本属性：

修改元素的字体、字号、字重、颜色等属性会触发重绘。
添加或删除元素：

添加或删除元素、修改元素的内容会触发重绘和重排。
修改元素的样式表：

修改元素的样式表，包括内联样式、外部样式表、JavaScript 动态修改的样式表会触发重绘和重排。
调整窗口大小：调整浏览器窗口大小会触发重绘和重排。

js的promise

实现异步进行回调操作。它是一个类，可以实例化，需要传入两个参数resolve和reject函数，表示，成功就执行resolve;失败执行reject;
它有两个方法，then和catch，then是表示执行成功进行调用；如果失败调用catch，显示失败的原因。
all（）和race（）方法，all是将几个promise实例组合在一起，只有一个实例失败，就会执行总体的失败回调函数；全部实例成功才执行总体的回调函数；race是只有有一个成功就会执行回调函数；

object.defineproprty给对象添加set和get属性，实时更新前端的内容

回调地狱 回调函数层层嵌套

async await关键字

给函数加上async关键字表示该函数是异步执行，返回一个promise对象，可以使用then和catch方法
await关键字只能放到async函数里面，await不仅仅用于等Promise对象，还可以等任意表达式，所以await后面实际是可以接普通函数调用或者直接量的，不过我们更多的是放一个返回promise 对象的表达式。他等待的是promise对象执行完毕，并返回结果。
解决异步的代码可以向写同步代码一样简单明了。

实战面试

面试美团，编程题是用js将树形数组一维化。八股文较少，问场景题较多，比如使用vue制作表单的整个过程是什么样的、微信小程序怎么获取登录权限的、后端怎么解析前端发过来的网址。