2021前端最新面试题之价值30k的面试题

一、Vue响应式原理

首先回答对响应式的个理解，提出核心点是通过Object.defineProperty， Vue 在初始化数据时，会传入一个data对象，内部会默认的对data对象进行遍历，使用 Object.defineProperty 重新定义所有属性，当页面取到对应属性时。会进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通 知相关依赖进行更新操作。

二、proxy数据代理是什么

可以理解为在对象之前设置一个“拦截”，当该对象被访问的时候，都必须经过这层拦截。意味着可以在这层拦截中进行各种操作。比如你可以在这层拦截中对原对象进行处理，返回你想返回的数据结构。

ES6 原生提供 Proxy 构造函数，MDN上的解释为：Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）vue3的数据双向绑定基于此，修复了vue2的问题如：this.object.name=5 数据更新后页面不更新问题，此时要调用$set或者其他触发方式。

三、计算属性和watch的区别

computed

一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性，computed是带缓存的，只有其引用的响应式属性（属性绑定）发生改变时才会重新计算(如果引用的属性没有改变，则调用上一次缓存值)

watch

watch适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化（该数据影响别的多个数据）==当数据发生变化时，执行异步操作或较大开销操作的情况。

watch没有缓存直接执行

四、VueX的应用场景

多个视图依赖于同一状态

来自不同视图的行为需要改变同一个状态

多个组件嵌套层级较多，用$emit传递过于繁琐

state：存放公共数据的地方
getter：获取公共数据的地方
mutations：唯一修改state的方法，修改过程是同步的
action：异步处理，通过分发操作触发mutation 提交
module：将store模块分割，减少代码臃肿

五、v-for为啥要加Key

key的作用主要是为了高效的更新虚拟DOM！！！

当v-for进行数据渲染列表时，如果数据量庞大，我们对列表进行增删改时就会重新渲染列表，这样会影响性能！

如果我们加上key那么列表修改是就会根据之前的key值判断是否更新数据，如果需要则更新数据，如果不需要就复用之前的数据

六、虚拟DOM和真实的DOM的区别

1、虚拟DOM不会进行排版与重绘操作

2、虚拟DOM就是把真实DOM转换为Javascript代码

3、虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗

真实DOM频繁排版与重绘的效率是相当低的

4、虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部

• 4.1 步骤一：用JS对象模拟DOM树
• 4.2 步骤二：比较两棵虚拟DOM树的差异
• 4.3 步骤三：把差异应用到真正的DOM树上

七、基本数据类型和引用数据类型的区别

1. 基本数据类型的存储

以 栈 的形式存储, 保存与赋值指向数据本身, 用type of 来判断类型,存储空间固定.

2. 引用类型 Object

以 堆 的形式存储, 它是存放在堆中的对象，其变量是存放在栈中的一个指针（即堆内存的引用地址），其指针指向堆内存, 用instance of 来判断类型 , 存储空间不固定

八、深拷贝与浅拷贝

浅拷贝：

Object.assign()

var obj1 = {a: 1, b: 2} var obj2 = Object.assign({}, obj1)

解构赋值

var obj1 = {a: 1, b: 2} var obj2 = {…obj1}

浅拷贝是引用了对象的值时其实是引用了其地址，并非堆对象的值，当改变值时，其对象的值也会发生改变

深拷贝：

利用json.stringify

深拷贝则是在堆内存中开辟了新的地址，用来存放拷贝的对象

**九、**基本数据类型赋值和引用数据类型赋值的区别

1、基本数据类型保存与赋值指向数据本身

2、引用类型是存放在堆中的对象，其变量是存放在栈中的指针（即堆内的引用地址），其指针指向堆内存

十、为什么是js是单线程的

JavaScript作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。

如果JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

十一、小程序的生命周期

主要以 onload，onshow，的区别和使用做考点，这里不详细说明。

十二、jsonp的实现原理

jsonp本质就是我们的函数的定义和函数的调用。

script本身属于一个一次性标签，所以需要动态去创建script

请求一次就需要创建一次script 通过src动态引入我们的函数调用

函数调用的参数，将数据传递过来，当然如果说我们前端在使用的时候，我们只需要去定义函数，通过函数中的参数就可以将数据获取过来

JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务器端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了

十三、本地存储 localStorage sessionStorage cookie session

localStorage/sessionStorage H5中新增加的API，基于这个API可以把一些数据缓存到客户端本地

特性	cookie	session	localStorage	sessionStorage
数据声明周期	一般由服务器成成，可以设置过期时间	一般由服务器成成，可以设置过期时间	除非被清理,否则一直存在	页面关闭就清理
数据储存大小	4K	根据服务器大小决定	5M	5M
与服务端通信	每次都会携带在header中，服务器检查cookie，辨认用户状态	请求时携带在header中	不参与	不参与

存放位置	当前浏览器的cookie中	存放在服务端	当前浏览器本地存储	当前浏览器本地存储
是否安全	不安全	安全	不安全	不安全
实际用途	记录登录时间，购物车收藏	存储账号密码设置key	用来统计页面访问次数	记录当前进入用户的隐私数据，在关闭浏览器时删除

十四、token 和session 分别是什么有什么区别

什么是Session机制？

Session是存储在服务器端的，当浏览器第一次请求Web服务器，服务器会产生一个Session存放在服务器里（可持久化到数据库中），然后通过响应头的方式将SessionID返回给浏览器写入到Cookie中，浏览器下次请求就会将SessiondID以Cookie形式传递给服务器端，服务器端获取SessionID后再去寻找对应的Session。如果找到了则代表用户不是第一次访问，也就记住了用户。

但需要注意的是，若服务器做了负载均衡，用户的下一次请求可能会被定向到其它服务器节点，若那台节点上没有用户的Session信息，就会导致会话验证失败。所以Session默认机制下是不适合分布式部署的。

Token的出现是为了解决Session的弊端

Token我们一般称为令牌，一般通过MD5、SHA算法将密钥、公钥、时间戳等元素加密产生的加密字符串。

浏览器访问Web服务器后认证成功后生成Token并返回给客户端，客户端浏览器后续的请求都会把这个Token带到服务器端去验证，以此判定请求是否合法。

Session与Token的异同

Session和Token机制原理上差不多，都是用户身份验证的一种识别手段，它们都有过期时间的限制，但两者又有一些不同的地方。

1、Session是存放在服务器端的，可以保存在：内存、数据库、NoSQL中。它采用空间换时间的策略来进行身份识别，若Session没有持久化落地存储，一旦服务器重启，Session数据会丢失。

2、Token是放在客户端存储的，采用了时间换空间策略，它也是无状态的，所以在分布式环境中应用广泛。

3.SSESION：银行排号

2、TOKEN ：我发给你一张加密的身份证，以后你只要出示这张卡片，我就知道你一定是自己人。

十五、清除浮动8种方法

1、父级div定义 height

2、结尾处加空div标签 设置CSS样式为 clear:both

3、父级div定义 伪类:after 和 zoom

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}

4、父级div定义 overflow:hidden

5、父级div定义 overflow:auto

6、 父级div 也一起浮动

7、父级div 设置dispaly：table

8，结尾处加br标签 设置CSS样式为 clear:both

十六、浏览器内核

1、IE浏览器内核：Trident内核，也是俗称的IE内核；

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；
正常是五大浏览器及其内核，国产大多双内核

十七、居中盒子的8种方法

浮动，定位，弹性盒模型等

十八、BFC是什么？能解决什么问题？

BFC是的子元素布局是不受外界的影响的

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

1.避免外边距折叠

2.避免文字环绕

3.浮动元素不会乱跑。（包含浮动元素）

十九、Ajax状态码

0: (未初始化)还没有调用send()方法。

1: (载入)已经调用send()方法，正在派发请求。

2: (载入完成)send()已经执行完成，已经接收到全部的响应内容。

3: (交互)正在解析响应内容。

4: (完成)响应内容已经解析完成，用户可以调用。

二十、let，const，var

let

let有块级作用域{}，外界无权修改 不能声明同名变量 let没有声明提前 定义值可以修改

const

const有块级作用域{}，为常量，一单赋值，无法修改 const声明对象无法修改键名，但可以修改值 const赋值不能为空 不能声明同名变量 const没有声明提前

var

var只在函数内部function有块级作用域 有声明提前 可以修改值 能够重复定于

二一、es5和es6中的作用域分别是什么？

块级作用域

只要是有花括号的就是块级作用域

function if for {}

二二、函数作用域有哪些

全局作用域

定义的变量或者方法所有的地方都可以使用到，释放的周期，是需要等到浏览器关闭以后才会释放。

局部作用域

只能是当前函数中能够使用到，而且只要调用完成以后就会释放 性能高

闭包

子函数能够使用父函数的局部变量，直到你去释放，释放方法就是return或者是 函数为null

二三、关于this

函数中：window

方法中：当前方法属于谁就是谁

事件：当前发生事件的元素

定时器：window

new：空白构造对象本身

二四、window.onload DOMContentLoaded document.onreadstatechange 执行时机

window.onload

页面中所有的资源加载完成，图片，音频，视频

DOMContentLoaded

在页面文档加载解析完毕之后马上执行。而不会等待图片文件和子框架页面的加载

onreadstatechange 监听页面状态

DOMContentLoaded>onloadstatechange>window.onload

二五、defer和async script中

defer和async是script标签的两个属性，用于在不阻塞页面文档解析的前提下（也就是非正常内联script脚本的情况下），控制脚本的下载和执行。

script

因为script是同步的所以再HTML加载时会下载和执行script文件 这样会阻塞HTML文档解析

defer

defer会在HTML元素加载时进行下载，但会在HTML元素加载完之后，DOMContentLoaded 事件触发之前进行执行script脚本，

async

async会在HTML元素加载时进行下载，单会在HTML元素未加载完成时就进行解析script文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FM0WCARJ-1618302980224)(C:\Users\Administrator\AppData\Local\YNote\data\weixinobU7VjmEaQQ55iDsoOd6jwhS8D64\da5cd5fd5fdc42b691def691d8265a8c\defer和async.jpg)]

蓝色线代表网络读取（下载JS文件），红色线代表执行时间（执行JS文件），这俩都是针