网络相关的面试

跨域

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对比图

先总结到这里，尿遁了
尿遁的我回来了，接着

http与HTTPS的区别

1、服务器端口不一致，https是443端口、http是80
2、HTTPS需要使用证书
3、http是超文本传输协议，是明文传输，而HTTPS是经过ssl加密的协议，传输更安全
4、https比http慢，因为https除了tcp三次握手，还有加上ssl握手的九个包

http版本之间的区别（1.0、1.1与2.0）

参考下面链接：
「进击的前端工程师」HTTP的世界观(附HTTP/3中文翻译) - 掘金
「面试题」那些年与面试官交手过的HTTP问题 - 掘金

1.1vs1.0

• 改进持久连接
  http1.1支持一个tcp连接上可以传输多个http请求，只要浏览器或者服务器没有断开连接，该tcp便会一直保持
  持久连接是默认是开启的，如果想要关闭，在请求头上加上connection:false即可
  目前浏览器对于同一个域名，默认允许同时简历6个tcp持久连接
• 客户端cookie、以及安全
  http1.1引入客户端cookie机制和安全机制
• HTTP 1.1 中新增加了 E-tag，If-Unmodified-Since, If-Match, If-None-Match 等缓存控制标头来控制缓存失效。
• HTTP 1.1 使用了虚拟网络，在一台物理服务器上可以存在多个虚拟主机（Multi-homed Web Servers），并且它们共享一个IP地址。
  

1.1缺点

2.0改进（与1.1的区别）

• 多路复用
  *一个域名只使用一个tcp长连接和消除队头阻塞的问题。引入二进制分帧，实现了http的多路复用技术
• 服务器推送
  *服务器可以将数据推送到浏览器，浏览器有权选择是否接受。
• 头部压缩
• 设置请求的优先级
  *可以设置让某些重要的数据优先被服务器处理并返回

https加密过程

看下面的文章
《大前端进阶 安全》系列 HTTPS详解（通俗易懂） - 掘金

http头部

掌握常问的那几个就行，例如与协商缓存相关的、与跨域相关的

http状态码

爱问304，与缓存相关

http三次握手

为什么需要三次？

http四次挥手

为什么需要四次？

http怎么与服务端保持链接

DNS(域名查询系统)

DNS解析 - 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客
DNS查询IP一般会花费40-120ms，所以可以优化这块

ip查询步骤：

1、浏览器缓存
2、系统缓存
3、路由器缓存（如果系统缓存中也找不到，那么查询请求就会发向路由器，它一般会有自己的DNS缓存。）
4、ISP DNS缓存（ISP是Internet Service Provider的简称,即因特网服务提供商）ISP DNS 缓存服务器
5、递归搜索（如果上面很不幸没有中）
　最无奈的情况发生了, 在前面都没有办法命中的DNS缓存的情况下,(1)本地 DNS服务器即将该请求转发到互联网上的根域（即一个完整域名最后面的那个点，通常省略不写）。(2)根域将所要查询域名中的顶级域（假设要查询ke.qq.com，该域名的顶级域就是com）的服务器IP地址返回到本地DNS。(3) 本地DNS根据返回的IP地址，再向顶级域（就是com域）发送请求。(4) com域服务器再将域名中的二级域（即ke.qq.com中的qq）的IP地址返回给本地DNS。(5) 本地DNS再向二级域发送请求进行查询。(6) 之后不断重复这样的过程，直到本地DNS服务器得到最终的查询结果，并返回到主机。这时候主机才能通过域名访问该网站。

CDN

https://juejin.im/post/5c188d06f265da615114acb0

CDN的全称是Content Delivery Network，即内容分发网络。
其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
其目的是使用户可就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。
算法：轮询或者设置权重

CDN 是构建在现有网络基础之上的网络，它依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。