网络基础问题

一、输入地址到页面渲染完成的过程

1. 浏览器（客户端）进行地址解析。
2. 将解析出的域名进行dns解析。
3. 通过ip寻址和arp，找到目标（服务器）地址。
4. 进行tcp三次握手，建立tcp连接。
5. 浏览器发送数据，等待服务器响应。
6. 服务器处理请求，并对请求做出响应。
7. 浏览器收到服务器响应，得到html代码。
8. 渲染页面。

在浏览器地址栏输入地址到页面渲染完成发生了什么？（超详细）（上）
在浏览器地址栏输入地址到页面渲染完成发生了什么？（超详细）（下）

二、http协议，http1.0/1.1/2.0

1. HTTP（超文本传输协议，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。

2. HTTP1.0

   • 不支持持久链接——HTTP1.0规定浏览器与服务器只保持短暂的连接，浏览器的每次请求都需要与服务器建立一个TCP连接，服务器完成请求处理后立即断开TCP连接
   • 线头阻塞（Head of Line (HOL) Blocking）——如果请求队列的第一个请求因为服务器正忙（或请求格式问题等其他原因），导致后面的请求被阻塞。

3. HTTP1.1

   • 支持持久链接——HTTP1.1 可以通过keep-alive保持与服务器的连接避免。提升了性能。
   • 支持http管道——管道可以让我们把 FIFO 队列从客户端（请求队列）迁移到服务器（响应队列），即客户端可以并行，服务端串行。客户端可以不用等待前一个请求返回，发送请求，但服务器端必须顺序的返回客户端的请求响应结果。
   • 使用多个TCP连接——浏览器允许我们打开N个TCP链接，使得可以并发请求提高效率，大多数浏览器最多支持6个TCP链接。

4. HTTP2.0
   HTTP 2.0把解决性能问题的方案内置在了传输层，通过多路复用来减少延迟，通过压缩 HTTP首部降低开销，同时增加请求优先级和服务器端推送的功能。

   • 支持多路复用——多路复用允许同时通过单一的 HTTP 2.0 连接发起多重的请求-响应消息，即所有HTTP 2.0 连接都是持久化的，而且客户端与服务器之间也只需要一个连接即可。
   • 首部压缩——通过支持DEFLATE和HPACK 算法的压缩请求头，提高性能。
   • 服务端推送——服务器可以对客户端的一个请求发送多个响应。
   • 请求优先级——HTTP 2.0 使用一个31比特的优先值,0表示最高优先级, 2(31)-1表示最低优先级，服务器端就可以根据优先级，控制资源分配。

如何优雅的谈论HTTP／1.0／1.1／2.0
http 1.0/1.1/2.0的区别详解

三、跨域问题的产生原因和解决办法

1. 产生原因
   同源策略是一个重要的安全策略，如果两个 URL 的 protocol(协议)、port(端口) (如果有指定的话)和 host(域名) 都相同的话，则这两个 URL 是同源。
   如果两个url非同源，则无法相互进行交互。但有时，开发过程中需要跨域，所以有相应的解决办法。

2. 解决办法
   2.1 JSONP
   - 网页通过script标签向服务器请求json数据，实现跨域。只支持get。

   2.2 CORS
   - 前端ajax请求中使用withCredentails=true属性启用跨域申请，在后台也做相应跨域处理，实现跨域。支持所有类型的HTTP请求。

   2.3 Vue中的处理
   - 在proxy代理中添加changeOrigin=true属性启用跨域申请。

参考文章：
① 在Vue.js中解决跨域问题
② MDN浏览器的同源策略
③ 跨域资源共享 CORS 详解