2022前端面试题整理

说一说Vue2.0 双向绑定的原理与缺陷？

Vue响应式指的是：组件的data发生变化，立刻触发试图的更新。
原理：Vue采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式，通过Object.defineProperty来劫持数据的setter，getter，在数据变动时发布消息给订阅者，订阅者收到消息猴进行相应的处理。通过原生js提供的监听数据API，当数据发生变化得到时候，在回调函数中修改dom核心API：Object。defineproperty。Object.defineproperty API的作用：用来定义对象属性。特点：默认情况下定义的数据属性不能修改，描述属性和存取属性不能同时使用，使用会报错。响应式原理：获取属性值会触发getter方法，设置属性会触发setter方法，在setter方法中调用修改dom的方法。Object.defineproperty API的缺点：1、一次性递归到底开销很大，如果数据很大，大量的递归导致调用栈溢出 2、不能监听都西昂的新增属性和删除属性 3、当监听的下标对应的数据发生改变时，无法正确的监听数组的方法。

说一说Vue3.0 实现双向绑定的方法？

vue3.0是通过Proxy实现的数据双向绑定，Proxy是es6中新增的一个特性，实现的过程实在目标对象之前设置了一层‘拦截’，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。用法：

数组去重的方法

方法一：利用对象属性Key排除重复项。遍历数组，每次判断对象中是否存在该属性，不存在就存储在新数组中，并且把数组元素作为Key，设置一个值，存储在对象中，最后返回新数组。该方法的优点是效率较高，缺点是占用了较多空间，使用的额外空间有一个查询对象和一个新的数组。

let newArr = []
arr.forEach((key,index)=>{
	if(newArr.indexOf(key) === -1){
		newArr.push(key)
	}
})

方法二：利用Set类型数据五重复项。new一个Set，参数为需要去重的数组，Set会自动删除重复的元素，再将Set转为数组返回。这个方法的优点是效率更高，代码简单，思路清晰，缺点是可能会有兼容性问题。

let newArrSet = [...new Set(arr)]
console.log(newArrSet)

方法三：filter+indexof去重：这个方法和第一种方式类似，利用Array自带的filter方法，返回arr.indexOf(num)等于index的num。原理就是indexOf会返回最先找到的数字的缩影，假设数组是[1,1]，在队第二个1使用indexOf方法的时候，返回的是第一个1的索引0。这个方法的优点就是可以在去重的时候插入对元素的操作，可拓展性强。

let newArrFilter = arr.filter((item,index,self) => {
	return self.indexOf(item) === index
})
console.log(newArrFilter)

方法四：利用Map的键值对同名覆盖，再将Map转数组。

let ma = new Map()
arr.forEach(element => {
	ma.set(element,element)
});
let newMapArr = []
ma.forEach(elment => {
	newMapArr.push(elment)
})
console.log(newMapArr)

方法五：reduce+includes去重。这个方法就是利用reduce遍历和传入一个空数组作为去重后的新数组，然后内部判断新数组是否存在当前遍历的元素，不存在就插入到新数组中，这种方法耗时久，内存空间也有额外占用。

let newReduceArr = arr.reduce((ele,val) => {
	if(!ele.includes(val)){
		ele.push(val)
	}
	return ele
})
console.log(newReduceArr)

HTML语义化

html语义化就是指再使用HTML标签构建页面时，避免大篇幅得到使用无语义的标签，尽可能使用具有语义的标签。有利于页面内用结构化，利于无CSS页面可读，利于SEO，利于代码可读。
常用的语义化标签：
< h1>~< h6>标签：标题标签，h1等级最高，h6等级最低
header元素：用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框
nav元素：定义页面的导航链接部分区域
main元素：定义页面的主要内容，一个页面只能使用一次。
article元素：定义页面独立的内容，它可以有自己的header、footer、sections等
section元素：元素用于标记文档的各个部分，例如长表单文章的章节或主要部分
aside元素：一般用于侧边栏
footer元素：文档的底部信息
small元素：呈现小号字体效果
strong元素：用于强调文本

this指向

this关键词由来：在对象内部的方法中是用对象内部的属性是一个非常普遍的需求。但是JS的作用域机制并不支持这一点，基于这个需求，js又搞出来另外一套this机制。this存在的场景有三种：全局执行上下文和函数执行上下文和eval执行上下文。在全局执行环境中无论是否在严格模式下，'this’都指向全局对象。在函数执行上下文中访问this，函数的调用方式决定了this的值。在全局环境中调用函数，函数内部的this指向的是全局变量window，通过一个对象来调用其内部的额一个方法，该方法的执行上下文中的this指向对象本身。普通函数this指向：当函数被正常调用时，在严格模式下，this值是undefined，非严格模式下this指向的是全局对象window；通过一个对象调用其内部得到一个方法，该方法的执行上下文中的this指向对象本身。new关键字创建好一个新对象，并且构造函数中的this其实就是新对象本身。嵌套函数中的this不会继承外层函数二点this值。箭头函数this指向：箭头函数并不会创建其自身的执行上下文，所以箭头函数中的this取决于他的外部函数。

css尺寸设置的单位

px：pixel的缩写，绝对长度单位，他的大小取决于屏幕的分辨率，是开发网页中常常使用的单位。
em：相对长度单位，在font-size中使用是对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小。
rem：相对长度单位，相对于根元素的字体大小，根元素字体大小未设置，使用浏览器默认字体大小。
vm：相对长度单位，相对于视窗宽度的1%。
vh：相对长度单位，相对于视窗高度的1%。

未知宽高元素水平垂直居中方法

1、设置元素相对父级定位position：absolute；left:50%;top:50%，让自身平移自身高度50%transform:translate(-50%，-50%)这中方式兼容性好，被广泛使用的一种方式
2、设置元素的父级为弹性盒子display:flex，设置父级和盒子内部子元素水平垂直都居中justify-content:center;align-items:center，这种方法代码简洁，但是兼容性ie 11以上支持，由于目前ie版本都已经很好了，很多网站现在也是用这种方式实现水平垂直居中
3、设置元素的父级为网格元素display:grid，设置父级和盒子内部子元素水平垂直都剧中justify-content:center;align-items:center，这种方式代码简洁，但是兼容星 ie 10以上支持
4、设置元素的父级为表格元素display:table-cell，其内部元素水平垂直都居中justify-content:cneter;vertical-align:middle，设置子元素为行内块dispaly:inline-block，这种方式兼容性好

JS变量提升

变量提升是指JS的变量和函数声明会在代码编译器，提升到代码的最前面。变量提升成立的前提是使用var关键字进行声明的变量，并且变量提升得到时候只有声明被提升，赋值并不会被提升，同时函数的声明提升会比变量的提升优先。变量提升的结果，可以在变量初始化之前访问该变量，返回的是undefined。在函数声明前可以调用该函数。

HashRouter和HistoryRouter的区别和原理

HashRouter和History的区别：history和hash都是利用浏览器的两种特性实现前端路由，history是利用浏览历史记录栈的额API实现，hash是监听location对象hash值变化事件来实现。history的url没有#号，hash反之。相同的url，history会触发添加到浏览器历史记录栈中，hash不会触发，history需要后端配合，如果后端不配合刷新新页面会出现404，hash不需要。hashRouter的原理：通过window.onhashchange方法获取新URL中hash值，再做进一步处理。HistoryRouter的原理：通过history.pushState使用他做页面跳转不会促发页面刷新，使用window.onpopstate监听浏览器的前进和后退，在做其他处理

vue的keep-alive

作用：缓存组件，提升性能，避免重复加载一些不需要经常变动且内容较多得到组件。<keep-alive>标签对需要缓存的组件进行包裹，默认情况下被<keep-alive>标签包裹的组件都回进行缓存。区分被包裹的组件是否缓存有两种方法，第一种是给keepalive 添加属性，组件名称指的是具体组件添加的name，不是路由里面的name。include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)。exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)。第二种也是最常用的一种是，和路由配合使用：在路由中添加meta属性。 使用keepalive导致组件不重新加载，也就不会重新执行生命周期的函数，如果要解决这个问题，就需要两个属性进入时触发：activated 退出时触发：deactivated

CSRF攻击

CSRF跨站点请求伪造和XSS攻击一样，有巨大的危害性，就是攻击者盗用了用户的身份，以用户的身份发送恶意请求，但是对服务器来说这个请求是合理的，这样就完成了攻击者的目标。CSRF攻击原理：用户打开浏览器，访问目标网站A，输入用户名和密码请求登录，用户信息在同通过认证后，网站A产生一个cookie信息返回给浏览器，这个时候用户可以正常发送给请求到网站A，用户在没有退出网站A之前在同一个浏览器打开了另一个新网站B。新网站B收到用户请求之后返回一些攻击代码，并发出一个请求访问返回cookie的网站A，浏览器收到这些攻击性代码之后根据新网站B的请求在用户不知道的情况下以用户的权限操作了cookie并向网站A服务器发起了合法的请求。预防CSRF攻击主要有一下策略：1、使用验证码，在表单中添加一个随机的数字或者字母验证码，强制要求用户和应用进行直接的交互。2、HTTP中Referer字段，检查是不是从正确的域名访问过来，他记录了HTTP请求的来源地址。3、使用token验证，在HTTP请求头中添加token字段，并且在服务器端建立一个拦截器验证这个token，如果token不对，就拒绝这个请求。

XSS攻击

XSS是跨站脚本攻击，攻击者可以通过向web页面里面插入script代码，当用户浏览这个页面时，就会运行被插入的script代码，达到攻击者的目的。XSS的危害一般是泄露用户的登录信息cookie，攻击这可以通过cookie绕过登录步骤直接进入站点。XSS的分类分为反射型和存储型，反射性就是临时通过url访问网站，网站服务端将恶意代码从url中取出，凭借在html中返回给浏览器，用户就会执行恶意代码。存储型就是将恶意代码以留言的形式保存在服务器数据库，任何访问网站的人都会收到攻击。预防XSS的方案就是对数据进行演的输出编码。

浏览器如何渲染页面

浏览器拿到html，先将html转换成dom树，再将css样式转换成stylesheet，根据dom树和stylesheet创建布局树，对布局树进行分层，为每个图层生成绘制列表，再将图层分成图块，紧接着光栅化将图块转换成位图，最后合成绘制生成页面。避免整个页面渲染，把页面分成多个图层，尤其是动画的时候，把动画独立出一个图层，渲染时只渲染该图层就ok，transform，z-index等，浏览器会自动优化生成图层 光栅化目的：页面如果很长但是可视区很小，避免渲染非可视区的样式造成资源浪费，所以将每个图层又划分成多个小个子，当前只渲染可视区附近区域。

computed跟watch的区别

computed是计算属性，依赖其他属性值，并且computed值有缓存，只有他以来的属性值发生变化，下一次获取computed的时候才会计算computed的值；watch：更多的是观察的作用，支持异步，类似于默写数据的监听回调，每当监听的数据发生变化的时候都会执行回调进行后续的操作。

Vue 中 $nextTick 作用与原理？

vue在更新DOM时是异步执行的，在修改数据猴，试图不会立刻更新，而是等同一时间循环中的所有数据变化完成之后，再统一进行试图更新。所以修改完数据，立即再方法中获取dom，获取的仍然是未修改的DOM

浏览器输入URL发生了什么？

输入地址，浏览器查找域名的 IP 地址。 浏览器向 该 IP 地址的web 服务器发送一个 HTTP 请求，在发送请求之前浏览器和服务器建立TCP的三次握手，判断是否是HTTP缓存，如果是强制缓存且在有效期内，不再向服务器发请求，如果是HTTP协商缓存向后端发送请求且和后端服务器对比，在有效期内，服务器返回304，直接从浏览器获取数据，如果不在有效期内服务器返回200，返回新数据。 请求发送出去服务器返回重定向，浏览器再按照重定向的地址重新发送请求。 如果请求的参数有问题，服务器端返回404，如果服务器端挂了返回500。 如果有数据一切正常，当浏览器拿到服务器的数据之后，开始渲染页面同时获取HTML页面中图片、音频、视频、CSS、JS，在这期间获取到JS文件之后，会直接执行JS代码，阻塞浏览器渲染，因为渲染引擎和JS引擎互斥，不能同时工作，所以通常把Script标签放在body标签的底部。 渲染过程就是先将HTML转换成dom树，再将CSS样式转换成stylesheet，根据dom树和stylesheet创建布局树，对布局树进行分层，为每个图层生成绘制列表，再将图层分成图块，紧接着光栅化将图块转换成位图，最后合成绘制生成页面。

1、浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;

2、解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;

3、浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;

4、服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;

5、释放 TCP连接;

6、浏览器将该 html 文本并显示内容;

盒模型

css盒模型定义了盒的每个部分包含margin、border、padding和content。根据盒大小的计算方式分为两种不同的和模型，标准盒模型和怪异和模型。标准模型，给盒设置width盒height，实际设置的是content。怪异盒模型width、height包含了padding和border。默认情况下是标准盒模型。设置：box-sizing:content-box标准盒模型 boxm-sizing:border-box怪异盒模型

axios拦截器原理及应用

标准回答 axios的拦截器的应用场景： 请求拦截器用于在接口请求之前做的处理，比如为每个请求带上相应的参数（token，时间戳等）。 返回拦截器用于在接口返回之后做的处理，比如对返回的状态进行判断（token是否过期）。 xios为开发者提供了这样一个API：拦截器。拦截器分为 请求（request）拦截器和 响应（response）拦截器。 拦截器原理：创建一个chn数组，数组中保存了拦截器相应方法以及dispatchRequest（dispatchRequest这个函数调用才会真正的开始下发请求），把请求拦截器的方法放到chn数组中dispatchRequest的前面，把响应拦截器的方法放到chn数组中dispatchRequest的后面，把请求拦截器和相应拦截器forEach将它们分unshift,push到chn数组中，为了保证它们的执行顺序，需要使用promise，以出队列的方式对chn数组中的方法挨个执行。 加分回答 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。从浏览器中创建 XMLHttpRequests,从 node.js 创建 http 请求,支持 Promise API,可拦截请求和响应，可转换请求数据和响应数据，可取消请求，可自动转换 JSON 数据，客户端支持防御 XSRF。

vue-router实现懒加载的方法

vue-router 实现懒加载的方法有两种： ES6的impot方式、VUE中的异步组件进行懒加载方式

前端性能优化手段

前端性能优化分为两类，一类是文件加载更快，另一类是文件渲染更快。 加载更快的方法： 让传输的数据包更小（压缩文件/图片）：图片压缩和文件压缩 减少网络请求的次数：、节流防抖 减少渲染的次数：缓存（HTTP缓存、本地缓存、Vue的keep-alive缓存等） 渲染更快的方法： 提前渲染：ssr服务器端渲染 避免渲染阻塞：CSS放在HTML的head中 JS放在HTML的body底部 避免无用渲染：懒加载 减少渲染次数：对dom查询进行缓存、将dom操作合并、使用减少重排的标签 加分回答 雪碧图的应用场景一般是项目中不常更换的一些固定图标组合在一起，比如logo、搜索图标、切换图标等。 电商项目中最常用到的懒加载，一般在查看商品展示的时候通常下拉加载更多，因为商品数据太多，一次性请求过来数据太大且渲染的时间太长。

JS数据类型

number、string、null、unfinded、bigint、object、boolean、function、symbol

阻止冒泡

event.stopPropagation

阻止默认事件

event.preventDefualt

vue2.0为什么只有一个根元素

服务器渲染

服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。比如：jsp页面

好处：前端耗时少，即减少了首屏时间，占用客户端资源较少

坏处：服务器压力相对较大。

vuex和localStorage的区别

一，vuex 存储在内存

二，localstorage 以文件的方式存储在本地

三，localstorage 只能存储字符串类型的数据，储存对象需要JSON的Stringify 和 parse 方法进行处理，读取内存比读取硬盘速度要快

一，vuex 是一个专为vue.js 应用程序开发的状态管理模式，它采用集中式管理应用的所有组件状态，并以相应的规则保证

状态的以一种 可以预测的方式发生变化，vuex 用于组件之间的传值，

二，localstorage 是本地储存，是将数据存储到浏览器的方法，一般在跨页面传递数据时使用。

三，vuex能够做到数据的响应式，localstorage 不能
刷新页面时vuex存储的值会丢失，localstorage 不会，

vue生命周期

1. beforeCreate（创建前）
2. created （创建后）
3. beforeMount (载入前)
4. mounted （载入后）
5. beforeUpdate （更新前）
6. updated （更新后）
7. beforeDestroy（ 销毁前）
8. destroyed （销毁后）

父子组件生命周期

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

http和https的区别

HTTP与HTTPS介绍

    超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。

    为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL/TLS协议，SSL/TLS依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。

    HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全

    HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

HTTPS和HTTP的主要区别
1、https协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。

    2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl/tls加密传输协议。

    3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

    4、http的连接很简单，是无状态的；HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

重绘与回流

回流：当一个元素的位置、尺寸等发生改变的时候 浏览器需要重新计算该元素的几何属性并且摆放到正确的位置的过程就叫做回流。一般像页面初次渲染、带有动画的元素、添加/删除功能、图片放大缩小、浏览器窗口发生改变的时候都会触发回流。 重绘：当一个元素的外观、样式发生改变而布局不会改变，重新绘制的过程叫做重绘。 回流必定会触发重绘，而重绘则不一定会触发回流。一般来说，回流对性能的损耗更多一点

避免：使用translate替代top、使用visibility代替display:hidden、none、DOM离线后修改、使用class去修改样式、使用 absolute 或 fixed 脱离文档流 、使用GPU加速提升网站的动画渲染性能:transform、transform: translateZ(0); 或 transform: translate3d(0,0,0);不要选择table布局