2023.12.07

1. 浏览器缓存

浏览器缓存策略

• 根据是否需要向服务器端发起请求，分为强缓存和协商缓存；
• 缓存策略都是从第二次请求开始；第一次请求资源，服务端返回资源，并在请求头中添加使用的请求策略，第二次请求资源：根据请求参数，击中强缓存，直接返回200并使用缓存数据，否则将缓存标志数据添加到请求头中去请求服务器看是否击中协商缓存，击中则返回304，否则服务器返回新的资源。

强缓存

• 在缓存数据没有失效的情况下，直接从浏览器中获取数据，不请求服务端。
• 在请求资源时，服务端在响应头上添加对应的字段来告诉客户端此时缓存的有效性；
• HTTP1.0 Expires 绝对时间，表示在这个时间之前都可以直接使用资源，无需请求服务端，因为存的是服务端时间，可能跟客户端时间出现误差，且如果在到期之前修改了资源内容，客服端是不知道的。
• HTTP1.1 Cache-Control 相对时间，表示在上次修改资源后的多长时间内可以使用缓存。常用的属性值：max-age：当前缓存的最大有效时间，no-store：不缓存，no-cache：不使用强缓存，要请求服务端去验证当前资源的有效性，private：只有客户端可以进行缓存，代理服务器不能进行缓存，public：所有的内容都可以被缓存。在有效期内修改资源后，客户端无法知道。

协商缓存

• 协商缓存是让客户端带着一些参数去请求服务端，让服务端决定是否有缓存，有缓存时从浏览器获取资源，状态码返回304，没有缓存时则通过服务端返回资源，状态码为200。
• 在第一次请求资源时，响应头会设置两组参数，在后续请求时会通过请求头携带来判断是否有缓存。
• Last Modified：表示服务器的最后修改时间，客户端再次请求通过If-Modified-Since携带该参数进行请求，只要资源被修改，就算是没有实质性的改变，都会更新。
• Etag：表示服务器资源的唯一标识，客户端再次请求通过If-None-Match携带该参数进行请求，可以更加精确的判断当前资源是否被修改，如果Etag的计算方式不一样，会导致浏览器从一台服务器获取的资源Etag和从另一台获取的不一样。

2. 跨域

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略（协议、域名、端口号）造成的，是浏览器对JavaScript实施的安全限制。

同源策略限制了以下行为：

• Cookie、LocalStorage 和 IndexDB 无法读取
• DOM 和 JS 对象无法获取
• Ajax请求发送不出去

jsonp跨域

script标签天然支持跨域，可以通过在html文件中引入script标签从不同的域名获取资源。因此可以通过这种方式进行跨域获取资源，动态创建script标签，携带参数，参数包含一个回调函数的执行，进而获取数据。最大的缺陷是只能支持get请求。

iframe跨域

postMessage（H5提出）
```
// 发送信息
otherWindow.postMessage(message,targetOrigin);
// 接收信息
if(typeof window.addEventListener != 'undefined'){
	window.addEventListener('message',onmessage,false);
}else if(typeof window.attachEvent != 'undefined'){
	window.attachEvent('onmessage', onmessage);
}
```

跨域资源共享（CORS）

• 允许浏览器向服务器发送XHR请求，克服同源限制；
• 整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。 因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
• 分为两种请求：简单请求和非简单请求，
• 简单请求：GET、POST、HEAD；对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。 告诉浏览器本次请求是来自于哪个源，由服务端判断是否同意本次请求。如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。 浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

Access-Control-Allow-Origin: http://api.bob.com
   Access-Control-Allow-Credentials: true
   Access-Control-Expose-Headers: FooBar
   Content-Type: text/html; charset=utf-8

• 非简单请求：请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
• 非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。
• Access-Control-Allow-Origin
  必填字段，取值可以是请求时Origin字段的值，也可以是*，表示接受任意域名的请求。

Access-Control-Allow-Methods
必填字段，取值是逗号分隔的一个字符串，设置服务器支持的跨域请求的方法。

Access-Control-Allow-Headers
可选字段，CORS请求时默认支持6个基本字段：
Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma

Access-Control-Allow-Credentials
可选字段，布尔值类型，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中；如果设为true，即表示服务器允许在请求中包含Cookie，一起发给服务器。

Access-Control-Max-Age
可选字段，用来指定预检请求的有效期，单位为秒，在此期间不用发出另一条预检请求，不指定时即使用默认值，Chrome默认5秒。

Nginx反向代理

• 利用nginx把跨域反向代理为不跨域，支持各种请求方式
• 可以将前端项目部署到和接口同源的当前本地的服务器上。

3. http与https（对称加密、非对称加密）

• HTTP：超文本传输协议，
• HTTPS：是以安全为目标的HTTP通道，在HTTP的基础上通过身份认证和传输加密阶段保证了传输过程的安全性。在HTTPS数据传输的过程中，需要用TLS/SSL对数据进行加密，然后通过HTTP对加密后的密文进行传输
• HTTP协议采用明文传输信息，存在信息窃听、信息篡改和信息劫持的风险，而协议TLS/SSL具有身份验证、信息加密和完整性校验的功能，可以避免此类问题发生。默认端口从80调整为443。
• 对称加密：在对称加密中，使用相同的密钥进行加密和解密。这意味着在通信双方之间共享一个密钥。通信双方使用该密钥加密和解密数据，以便只有知道密钥的人才能够解密和查看数据。速度快但不够安全
• 与对称加密算法不同，公钥加密使用了两个密钥，一个是公钥，另一个是私钥。公钥可以公开，私钥只有密钥的持有者可以访问。在公钥加密中，发送方使用接收方的公钥对消息进行加密，只有接收方拥有与之匹配的私钥才能解密该消息。因此，公钥加密可以提供更高的安全性，因为即使攻击者截获了加密的消息，他们也无法解密它。

4. setTimeout 与 setInterval

• setTimeout定时器，他的特点就是只能用一次，也称为一次性定时器。
• setInterval定时器，他的特点就是可以重复执行给定的函数。

5. 防抖、节流

function debounce(fn, delay) {
	let timer = null;
	return function(args) {
		if(timer) {
			clearTimeout(timer);
		}
		tmier = setTimeout(() => {
			fn.apply(this, [...args])
		}, delay)
	}
}

function throttle(fn, delay) {
	let flag = true;
	return function(args) {
		if(flag) {
			setTimeout(() => {
				fn.apply(this, [...args])
				flag = true;
			}, delay)
		}
		flag = false;
	}
}

6. vue3

• 采用组合式API（Componsition API），逻辑集中在一起，便于后期维护，可读性可维护性更高；

7. 组件间通信

• 父子组件：props =====> this.$emit
• 父组件$refs获取子组件数据
• 子组件$parent获取父组件数据
• 事件总线event-bus
• vue-router传值
• slot作用域传值，作用域插槽在slot上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件slot-scope接受的对象上。绑定时用的key，就是父组件获取数据的键。

8. Vuex

组件间传值对于多层嵌套过于麻烦，vuex就是把组件共享状态抽取出来以一个全局单例模式管理，把共享的数据函数放进vuex中，任何组件都可以进行使用。

• State：提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data
• Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
• Action：进行异步操作，Action和Mutation相似，一般不用Mutation 异步操作，若要进行异步操作，使用Action。原因：为了方便devtools打个快照存下来，方便管理维护。所以说这个只是规范，而不是逻辑的不允许，只是为了让这个工具能够追踪数据变化而已。（dispatch触发）
• Modules：当遇见大型项目时，数据量大，store就会显得很臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

9. slot

插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式。

• 默认插槽、具名插槽、作用域插槽

10. 实现一个批量请求函数multiRequst(urls, maxNum)，要求如下：1.要求最大并发数maxNum；2.每当有一个请求返回，就留下一个空位，可以增加新的请求；3.所有请求完成后，结果按照urls

function multiRequst(urls,maxNum){
    maxNum = maxNum || 5; //限制并发的数量
    let results = [];
    let running = 0; // 当前运行个数
    let resultsLength = urls.length; // 用来判断最后的是否全部成功
    return new Promise((resolve,reject)=>{
        next();
        function next(){
            while(running < maxNum && urls.length){ // 这个wile循环保证 一直有pool个请求在进行
	            running++;
	            let task = urls.shift();
	            task().then(result => {
	                results.push(result);
	            }).finally(()=>{
	                running--;
	                next();
	            })
            }
            if(results.length === resultsLength) { // 全部执行结束
                resolve(results);
            }
        }
    })
}