浏览器输入网址中间经历的过程：
【HTTP请求阶段：向服务器发送请求】
1、浏览器首先向 DNS 域名解析服务器发送请求
2、DNS 反解析：根据浏览器请求地址中的域名，到 DNS 服务器中找到对应的服务器外网 IP 地址
3、通过外网 IP 向对应服务器发送请求（首先访问的服务器 Web 站点管理工具，准确来说先基于工具在服务器上面创建很多服务，当有客户访问的时候，服务器会匹配出具体是请求哪个服务 ）
4、通过 URL 中携带的端口号找到服务器上对应的服务，以及服务所管理的项目源文件
【HTTP相应阶段：服务端把客户端需要的内容准备好，并且响应给客户】
5、服务器端根据请求地址中路径名称，问号传参或者哈希值，把客户端需要的内容进行准备和处理
6、把准备的内容响应给客户端（如果请求的是 html 或 css 等这样的资源文件，服务器返回的是资源文件中的源代码[不是文件本身]）
【浏览器渲染阶段】
7、客户端浏览器接收到服务器返回代码，基于自己渲染引擎开始进行绘制和渲染
a、首先计算 DOM 结构，生成 DOM TREE
b、自上而下运行代码，加载 CSS 等资源内容
c、根据获取的 CSS 生成带样式的 RENDER TREE
d、开始渲染
一次完整的请求 + 响应 称之为“HTTP事务”，两者缺一不可
一个页面完全加载完成，需要向服务器发起很多次HTTP事务操作。一般情况：首先把HTML源代码拿回来，加载HTML时，遇到 link / script / img[src] / iframe / video / audio 都会重新和服务器端建立 HTTP 事务交互。特殊情况：如果做了资源缓存处理（304），而且即将加载的资源在之前已经加载过，这样的操作和传统的HTTP事务不一样，是从服务器和浏览器缓存中读取数据。
HTTP报文：客户端向服务端发送请求，以及服务器把内容响应给客户端的时候，中间相互传了很多内容，传递的内容统称为“HTTP报文”
一个URL的组成
URI = URL + URN
URI：统一资源标识符
URL：统一资源定位符
URN：统一资源名称
http://www.yyhvr.cn/vr17.php
【传输协议】
用来传输客户端和服务端交互信息
HTTP：超文本传输协议（普通文本，文件流，进制编码等）端口号80
HTTPS：基于SSL加密的HTTP传输协议，比HTTP更安全（一般涉及支付都基于HTTPS完成）端口号443
FTP：文件传输协议，一般用来实现资源文件在服务器的上传下载，端口号21
【域名】
一级域名（顶级域名）www.qq.com
二级域名 sports.qq.com ....
【端口号】
用域区分同一台服务器上不同服务标识（基于 Web 服务管理创建服务的时候创建，不同服务之间一般不能使用相同端口号），当网站采用协议对应的默认端口号，用户输入网址可以不指定端口号，浏览器会把默认端口传递给服务器
一台服务器端口号范围0-65535
【请求路径名称】
一般都是请求当前服务对应项目目录中，特殊情况会采用“伪URL重写”，看到的URL请求不是真实请求
【问号传参及哈希值】
?xxx=xxx#xxx
在HTTP事务中，?传参是客户端把信息传递给服务器的一种方式，也可能是跳转到某一个页面，把参数值传递给页面用来标识的
哈希值一般跟客户端服务端交互没关系，主要用于页面中锚点定位和HASH路由切换
HTTP报文：
客户端向服务端发送请求，以及服务器把内容响应给客户端的时候，中间相互传了很多内容，传递的内容统称为“HTTP报文”
起始行：请求起始行，响应起始行
首部（头）： 请求头、响应头、通用头
主体：请求主题、响应主体
Gemeral 通用头
Request URL: 请求地址
Request Method：请求方式（get / post / delete / put / head / option）
Status Code：响应的 HTTP 状态码
Remote Address：主机地址（服务器外网 IP 地址）
Referrer Policy：推荐人
Request Headers 请求头 客户端设置服务端接收
Response Headers 响应头 服务器端设置，客户端获取
HTTP/1.1 200 OK 响应起始行
Date: Thu, 26 Mar 2020 08:19:55 GMT 服务器响应内容时候的“服务器端时间”
Server: Apache 管理 web 服务工具
Response 响应主体，服务器返回的是什么就是什么
Request Payload / Form Data 请求主体，客户端传递给服务器内容
客户端和服务器端信息交互的方式：
客户端窗体给服务器：
问号传参，请求的 URL 地址末尾通过问号传参方式，把一些信息传递给服务器
设置请求头，客户端把需要传递给服务器的内容设置到请求头信息中，服务器可以通过接受请求头信息把内容得到
设置请求主体，xhr.send(Ajax send 中传递内容就是客户端设置的请求主体内容)
服务器返回给客户端：
设置响应头信息，客户端获取响应头信息，响应头返回速度优先于响应主体
设置响应主体，主要返回信息都在响应主体中
网友评论