网络相关的面试

跨域

jsonp的简易实现

function jsonp(url, callback) {
	let script = document.createElement('script)
	let src = url + '?callback=' + callback
	script.src = src
	document.getElementByTagName('head')[0].append(script)
}

可以看到，一个 JSONP 的步骤实质是：

1. 客户端发送 script 请求，参数中带着处理返回数据的回调函数的名字 (通常是 callback)，如请求 script 的 url 是： http://www.test.com?callback=foo

2. 服务端收到请求，以回调函数名和返回数据组成立即执行函数的字符串，比如：其中 callback 的值是客户端发来的回调函数的名字，假设回调函数的名字是 foo (如第一条所示)，返回脚本的内容就是：
   foo(‘I am server data’)

3. 客户端收到 JavaScript 脚本内容后，立即执行脚本，这样就实现了获取跨域服务器数据的目的

CROS:跨域资源共享

目前主流的跨域解决机制，其是一个 W3C 标准，全称是”跨域资源共享”（Cross-origin resource sharing）
背后的主要思想是自定义http头部，让浏览器与服务器通信，从而决定请求、响应是否成功，还是应该失败
例如一个简单的get、POST请求，给它附加一个额外的origin头部，其中包含了请求页面的源信息（协议、域名以及端口），以便服务器根据这个头部信息来决定是否响应
例如：Origin：’http://www.baidu.com’
如果服务器认为这个请求可以接受，会在响应头中添加Access-Control-Allow-Origin中回发相同的源信息（如果是公共资源，可以使用”*”）
如果没有这个头部，或者有这个头部但是和源信息不匹配，浏览器就会驳回请求。正常情况下，浏览器会处理

Cros中：

1. 首先浏览器判断请求是简单请求还是复杂请求，如果是复杂请求，那么在进行真正的请求之前，浏览器会先使用 OPTIONS 方法发送一个预检请求 (preflight request)，OPTIONS 是 HTTP/1.1 协议中定义的方法，用以从服务器获取更多信息。该方法不会对服务器资源产生影响，预检请求中同时携带了下面两个首部字段：

• Access-Control-Request-Method: 这个字段表明了请求的方法；
• Access-Control-Request-Headers: 这个字段表明了这个请求的Headers；
• Origin: 这个字段表明了请求发出的域。
  服务端收到请求后，会以 Access-Control-* response headers 的形式对客户端进行回复：
• Access-Control-Allow-Origin: 能够被允许发出这个请求的域名，也可以使用* 来表明允许所有域名；
  Access-Control-Allow-Methods: 用逗号分隔的被允许的请求方法的列表；
  Access-Control-Allow-Headers: 用逗号分隔的被允许的请求头部字段的列表；
  Access-Control-Max-Age: 这个preflight能被缓存的最长时间，在缓存时间内，同一个请求不会再次发出preflight请求。

使用webpack配置跨域

devserver: {
	proxy:{
		‘/api’: ‘代理的位置’
	}
}

其实，简单请求就是普通 HTML Form 在不依赖脚本的情况下可以发出的请求，比如表单的 method 如果指定为 POST ，可以用 enctype 属性指定用什么方式对表单内容进行编码，合法的值就是前述这三种。
非简单请求就是普通 HTML Form 无法实现的请求。比如 PUT 方法、需要其他的内容编码方式、自定义头之类的。

使用Nginx配置反向代理进行跨域

缓存

贴上一个学习链接
人生苦短，了解一下前端必须明白的http知识点 - 掘金
缓存分为两种，一种为强缓存，一种为协商缓存
查找顺序，先使用强缓存，如果命中，200(from cache)，否则，如果命中写上缓存，返回304，不然就200，重新返回资源

强缓存

强缓存所谓的“强”，在于强制让浏览器按照一定时间范围内来存储来自服务器的资源，有点强制的味道～，强缓存是利用Expires或者Cache-Control，不发送请求，直接从缓存中取，请求状态码会返回200（from cache）
Expires
指定缓存到期GMT的绝对时间，如果expires到期需要重新请求
Cache-Control（主要）
当Expires和Cache-Control同时存在时，Cache-Control 会覆盖Expires的配置
no-cache ：可以在本地缓存，可以在代理服务器缓存，需要先验证才可使用缓存
No-store ： 禁止浏览器缓存，只能通过服务器获取
Max-age ： 设置资源的过期时间（效果与expires一样）

协商缓存

两个标准属性：Etag或Last-Modified（优先级： etag > Last-Modified）
发送请求的时候请求头会附上if-none-match/if-modified-since，如果有etag，命中了，返回304，否则200，如果etag不存在，比较Last-Modified，如果未修改，返回304，否则200

缓存状态码

状态码200 OK（from cache

这是浏览器没有跟服务器确认，直接用了浏览器缓存，性能最好的，没有网络请求，那么什么情况会出现这种情况？一般在expires或者 Cache-Control 中的max-age头部有效时会发生

状态码304 Not Modified

是浏览器和服务器“交流”了，确定使用缓存后，再用缓存，也就是第二节讲的通过Etag或Last-Modified的第二回合中对比，对比两者一致，则意味资源不更新，则服务器返回304状态码

状态码 200

以上两种缓存全都失败，也就是未缓存或者缓存未过期，需要浏览器去获取最新的资源，效率最低。 一句话：缓存是否过期用：Cache-Control（max-age）, Expires，缓存是否有效用：Last-Modified，Etag

用户对浏览器的操作

Ctrl + F5 (强制刷新)：：request header多了cache-control： no-cache （重新获取请求）
F5 (刷新)/ctrl+R刷新：：request header多了 cache-control： max-age=0 （需要先验证才可使用缓存，Expires无效）

赋一张命中强缓存的图，from memory cache与from disk cache对比图

先总结到这里，尿遁了