VUE高频面试题_vite打包减少请求数量提升加载速度

本地存储常用方式 localStorage, sessionStorage，cookie 的区别

[cookie]

     1.兼容所有的浏览器

     2.有存储的大小限制，一般一个源（一个域下）只能存储4KB内容

     3.cookie有过期时间(当然我们自己可以手动设置这个时间)

     4.杀毒软件或者浏览器的垃圾清理都可能会把cookie信息强制清除掉

     5.在隐私或者无痕浏览模式下，是不记录cookie的

     6.cookie不是严格的本地存储，因为要和服务器之间来回传输
1
2
3
4
5
6
7
8
9
10
11

[localStorage]

     1.不兼容IE8及以下

     2.也有存储的大小限制，一个源下最多只能存储5MB左右

     3.本地永久存储，只要你不手动删除，永远存储在本地（但是我们可以基于API  removeItem/clear手动清除一些自己想要删除的信息）

     4.杀毒软件或者浏览器的垃圾清理暂时不会清除localStorage（新版本谷歌浏览器会清除localStorage等信息）

     5.在隐私或者无痕浏览模式下，是记录localStorage的

     6.localStorage和服务器没有半毛钱关系
1
2
3
4
5
6
7
8
9
10
11

  真实项目中使用本地存储来完成一些需求的情况不是很多，一般都是基于服务器的session或者数据库存储完成的（服务器的session和本地的cookie是有关联的），如果不考虑兼容，就想基于本地存储来完成一些事情，那么一般都是用localStorage的（尤其是移动端开发）

  localStorage.setItem([key],[value])：[value]必须是字符串格式的（即使写的不是字符串，也会默认转换为字符串）

  localStorage.getItem([key])：通过属性名获取存储的信息

  localStorage.removeItem([key])：删除指定的存储信息

  localStorage.clear()：清除当前域下存储的所有信息

  localStorage.key(0)：基于索引获取指定的KEY名
1
2
3
4
5
6
7
8
9
10
11

区别

localStorage和sessionStorage的相同点：

共同方法key、setItem、getItem、removeItem、clear()等方法。
都是用来存储客户端临时信息的对象。
他们均只能存储字符串类型的对象
存储大小都为5M
都遵守同源策略

不同点：

sessionStorage为临时保存，浏览器关闭则失效，localStorage为永久保存。
localStorage 在同源的不同窗口下可共享，在不同浏览器中不可共享
sessionStorage 在同源的不同窗口下不可共享。注意这里的不同窗口是指浏览器另起一窗口，并不是指页面路由跳转

什么是浏览器的同源策略？

同源策略，是浏览器对javascript施加的安全限制。所谓同源是指，域名，协议，端口均相同。

为什么会有同源策略？

1.为了防止恶意网页可以获取其他网站的本地数据。

2.为了防止恶意网站iframe其他网站的时候，获取数据。

3.为了防止恶意网站在自已网站有访问其他网站的权利，以免通过cookie免登，拿到数据。

HTTP常见状态码

各类别常见状态码：

2xx （3种）

200 OK：表示从客户端发送给服务器的请求被正常处理并返回；

204 No Content：表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）；

206 Patial Content：表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求，响应报文中包含由Content-Range指定范围的实体内容。

3xx （5种）

301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL；

302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL；

   301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）
1

303 See Other：表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源；

  302与303的区别：后者明确表示客户端应当采用GET方式获取资源
1

304 Not Modified：表示客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部）的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码；

307 Temporary Redirect：临时重定向，与303有着相同的含义，307会遵照浏览器标准不会从POST变成GET；（不同浏览器可能会出现不同的情况）；

4xx （4种）

400 Bad Request：表示请求报文中存在语法错误；

401 Unauthorized：未经许可，需要通过HTTP认证；

403 Forbidden：服务器拒绝该次访问（访问权限出现问题）

404 Not Found：表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用；

5xx （2种）

500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；

503 Server Unavailable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求；

Web前端性能优化——如何提高页面加载速度

一、减少HTTP请求

图片地图：

假设导航栏上有五幅图片，点击每张图片都会进入一个链接，这样五张导航的图片在加载时会产生5个HTTP请求。然而，使用一个图片地图可以提高效率，这样就只需要一个HTTP请求。
这里写图片描述
服务器端图片地图：将所有点击提交到同一个url，同时提交用户点击的x、y坐标，服务器端根据坐标映射响应

客户端图片地图：直接将点击映射到操作
使用图片地图的缺点：指定坐标区域时，矩形或圆形比较容易指定，而其它形状手工指定比较难

CSS Sprites

CSS Sprites直译过来就是CSS精灵，但是这种翻译显然是不够的，其实就是通过将多个图片融合到一副图里面，然后通过CSS的一些技术布局到网页上。特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。
这里写图片描述

二、使用CDN

如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。

CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如，CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。

CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力。

CDN的缺点：

1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。

2、如果CDN服务质量下降了，那么你的工作质量也将下降

3、无法直接控制组件服务器

对组件使用赖加载

es6有哪些新特性

1.新增了块级作用域（let，const）

2.提供了定义类的语法糖（class）

3.新增了一种基本数据类型（Symbol）

4.新增了变量的解构赋值

解构：分解数据结构。 赋值：为变量赋值。 解构赋值：从数组或者对象中提取值，按照对应的位置，对变量赋值（在数组解构中，只要解构的目标可以遍历，就可以实现解构赋值）。

5.函数参数允许设置默认值，引入了rest参数，新增了箭头函数。

6.数组新增了一些API，如isArray / from / of 方法；数组实例新增了 entries()，keys() 和 values() 等方法。

7.对象和数组新增了扩展运算符

8.ES6新增了模块化（import / export）

9.ES6新增了Set和Map数据结构。

10.ES6原生提供Proxy构造函数，用来生成Proxy实例

11.ES6新增了生成器（Generator）和遍历器（Iterator）

promise有几个状态

Promise的三种状态：

pending、fulfilled、rejected(未决定，履行，拒绝)，同一时间只能存在一种状态,且状态一旦改变就不能再变。promise是一个构造函数，promise对象代表一项有两种可能结果（成功或失败）的任务，它还持有多个回调，出现不同结果时分别发出相应回调。

promise.catch后 后面的.then还会执行吗

catch也会返回一个promise 所以可以继续then
从语义上也很好理解 都被捕获处理过了就不是error了 所以可以继续

Vue 组件间通信方式

闭包

闭包就是能够读取其他函数内部变量的函数
闭包基本上就是一个函数内部返回一个函数

好处

可以读取函数内部的变量
将变量始终保持在内存中
可以封装对象的私有属性和私有方法

如何解决跨域

jsonp跨域
document.domain + iframe 跨域
nodejs中间件代理跨域
后端在头部信息里面设置安全域名

常见的跨域方法的原理

1.CORS

​ CORS（跨域资源共享）使用专用的HTTP头，服务器（api.baidu.com）告诉浏览器，特定URL（baidu.com）的ajax请求可以直接使用，不会激活同源策略。

2.JSONP

​ 因为js调用（实际上是所有拥有src属性的 <\script>、<\img>、<\iframe>）是不会经过同源策略，例如baidu.com引用了CDN的jquery。所以我通过调用js脚本的方式，从服务器上获取JSON数据绕过同源策略。

只有xhr的请求方式才有可能产生跨域问题，所以不会产生跨域问题

3.nginx反向代理

​ 当你访问baidu.com/api/login的时候，通过在baidu.com的nginx服务器会识别你是api下的资源，会自动代理到api.baidu.com/login，浏览器本身是不知道我实际上是访问的api.baidu.com的数据，和前端资源同源，所以也就不会触发浏览器的同源策略。

JavaScript 深浅拷贝?

浅拷贝

Object.assign

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Object.assign(target, ...sources)    【target：目标对象】，【souce：源对象（可多个）】
举个栗子：
const object1 = {
  a: 1,
  b: 2,
  c: 3
};

const object2 = Object.assign({c: 4, d: 5}, object1);

console.log(object2.c, object2.d);
console.log(object1)  // { a: 1, b: 2, c: 3 }
console.log(object2)  // { c: 3, d: 5, a: 1, b: 2 }

注意：
1.如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性
2.Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标
对象的[[Set]]，所以它会调用相关 getter 和 setter。因此，它分配属性，而不仅仅是复制或定义新的属性。如
果合并源包含getter，这可能使其不适合将新属性合并到原型中。为了将属性定义（包括其可枚举性）复制到
原型，应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

深拷贝

针对深拷贝，需要使用其他办法，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。
let obj1 = { a: 0 , b: { c: 0}}; 
let obj2 = Object.assign({}, obj1); 
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 

obj1.a = 1; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 

obj2.a = 2; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
 
obj2.b.c = 3; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} 
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} 
最后一次赋值的时候，b是值是对象的引用，只要修改任意一个，其他的也会受影响

// Deep Clone （深拷贝）
obj1 = { a: 0 , b: { c: 0}}; 
let obj3 = JSON.parse(JSON.stringify(obj1)); 
obj1.a = 4; 
obj1.b.c = 4; 
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

说说异步编程的实现方式?

回调函数
优点：简单、容易理解
缺点：不利于维护、代码耦合高
事件监听
优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数
缺点：事件驱动型，流程不够清晰
发布/订阅(观察者模式)
类似于事件监听，但是可以通过‘消息中心’，了解现在有多少发布者，多少订阅者
Promise 对象
优点：可以利用 then 方法，进行链式写法；可以书写错误时的回调函数
缺点：编写和理解，相对比较难
Generator 函数
优点：函数体内外的数据交换、错误处理机制
缺点：流程管理不方便
async 函数
优点：内置执行器、更好的语义、更广的适用性、返回的是 Promise、结构清晰
缺点：错误处理机制

项目性能优化

减少 HTTP 请求数
减少 DNS 查询
使用 CDN
避免重定向
图片、组件懒加载
减少 DOM 元素数量
减少 DOM 操作
使用外部 JavaScript 和 CSS
压缩 JavaScript、CSS、字体、图片等
优化 CSS Sprite
使用 iconfont
多域名分发划分内容到不同域名
尽量减少 iframe 使用
避免图片 src 为空
把样式表放在 link 中
把 JavaScript 放在页面底部

什么是原型、原型链、继承？

所有的函数都有prototype属性（原型）
所有的对象都有__proto__属性
在Javascript中，每个函数都有一个原型属性prototype指向自身的原型，而由这个函数创建的对象也有一个proto属性指向这个原型，而函数的原型是一个对象，所以这个对象也会有一个proto指向自己的原型，这样逐层深入直到Object对象的原型，这样就形成了原型链。

箭头函数与普通函数的区别?

函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象
不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误
不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 Rest 参数代替
不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数

vue优点

轻量级
速度快
简单易学
低耦合
可重用性
独立开发
文档齐全，且文档为中文文档

vue父组件向子组件传递数据

props

子组件向父组件传递事件

$emit

为什么用key

给每个dom元素加上key作为唯一标识 ，diff算法可以正确的识别这个节点，使页面渲染更加迅速。

单页面优点和缺点

单页面的优点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离，页面效果会比较酷炫

单页面缺点：不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。初次加载时耗时多；页面复杂度提高很多。

防抖和节流

防抖：高频率触发的事件,在指定的单位时间内，只响应最后一次 debounce函数

节流：高频率触发的事件,在指定的单位时间内，只响应一次

防抖和节流的使用场景

防抖（debounce）
1.search搜索时，用户在不断输入值时，用防抖来节约请求资源。

节流（throttle）
1.鼠标不断点击触发，mousedown(单位时间内只触发一次)
2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

1. List item

throttle函数

CSS选择器有哪些

标签选择器
ID选择器
类选择器
通配符选择器
属性选择器
后代选择器
并集选择器