HTTP 协议通信流程
超文本
除了文本以外，还有其他数据类型的内容
HTTP 协议
指计算机网络通信中 两台计算机之间所必须遵守的规定或规则
- Hypertext Transport Protocol 超文本传输协议
是一种基于 TCP/IP 的应用层通信协议，
这个协议详细规定了 浏览器 与 万维网服务器 之间的通信规则
浏览器 发送请求 给服务器 ——request
服务器 返回响应 给浏览器 ——response
- 通信时传输的内容，我们称之为 "报文"
HTTP 规定了报文格式（使用 Fiddler 抓包工具分析，网络通信包）
请求行（request line）、请求头部（header）、空行和请求数据四个部分组成
- 请求报文 Request Header
- 响应报文 Response Header
- FIddler
All Process__切换成 WebBrowsers
Capturing__指定抓包
- Inspector---->Raw 请求报文----响应报文
- 请求报文 Request Header
- 常见的 get 请求的方式
浏览器 地址栏 输入url 地址访问
所有的标签 默认发送的都是 get 请求
form 表单 默认也是 get 请求，可以通过设置 method="post" 请求
- 请求首行（request line）
GET http://localhost:3000/?username=Ryen&password=123456 HTTP/1.1
请求方式 请求完整地址（查询字符串） 协议名/版本号
HTTP 协议版本----1.0 过去----1.1 现在常用的----2.0 最新的，兼容性不好
域名地址 / IP 地址____IP 地址不好记，所以才有了域名地址，简化记忆
所以如果输入的是 域名地址，浏览器会进行 DNS 解析，最终解析成 IP 地址去访问
http://localhost:3000 本地计算机的 IP 地址
http://127.0.0.1:3000 本地计算机的 IP 地址
- 请求头（request header）
Connection: Keep-Alive
保持一个长久连接，而不用重复进行 TCP 连接（三次握手）
Pragma: no-cache 1.1
Cache-Control: no-cache 2.0
不走强缓存，而走协商缓存
Upgrade-Inscure-Requests: 1
允许使用 https 协议
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebkit/537.36 (KHTML, like Gecko) Chremo/70.0.3538.110 Safari/537.36
用户代理，浏览器内核版本
在过去，使用这个字段来区别浏览器，区别处理
在现在，主要是为了兼容老的服务器
Accept: text/html, application/xhtml+xml, application/xml; q=0.9, image/webp, image/apng/ */*; q=0.8
浏览器允许接收的数据类型
text/html, html 文件
application/xhtml+xml, xhtml 文件
application/xml; q=0.9, xml 数据 优先级低
image/webp,image/apng/ 新的图片格式，在同清晰度情况下，体积更小
*/*; q=0.8 其他文件默认使用，优先级低
Accept-Encoding: gzip, deflate, br
浏览器运行接收的文件压缩格式
Accept-Language: zh-CN, cn;q=9.0
浏览器允许接受的语言
- 空行 空格
- 报文体 get 请求 没有报文体
- 常见的发送 post 请求的方式
目前只有 form 设置 method="post"
以后会使用 ajax
- 请求首行（request line）
POST http://localhost:3000/ HTTP/1.1
- 请求头（request header）
Content-Length: 29
请求体内容长度
Cache-Control: max-age=0
有限期为 0
Origin: http://localhost:63342
请求来源的地址
Content-type: application/x-www-form-urlencodded
请求体内容格式：from 提交的内容（key=value&key=value），采用的 urlencoded 编码
Referer: http://localhost:63342/class0920/?_ijt=dasffnjd4nfjnf4jfn4jf4f4n
请求来源的完成地址： 防盗链，减少服务器压力；防止别人盗取链接对应的资源；广告计费等等
Cookie: Webstorm-asdasdaf30=fefffdcsc-sdcs-dcs-dcs-dc-sdc
会话控制，浏览器存储技术的一种
- 空行
- 请求体 username=Ryen&pwd=123564
post 请求往往有请求体，包含请求参数（请求体参数）
- 响应请求 Response Header
- 响应首行（response line） HTTP/1.1 200 OK
协议名/协议版本 响应状态码
常见的响应状态码____告诉接收响应的浏览器，根据响应内容的状态做出处理
1xx : 基本不用
2xx : 代表响应成功的状态
200
3xx : 请求资源重定向
302 请求的资源/网址，重新定向到 新网址
304 请求的资源/网址，重新定向到 缓存中
4xx : 请求资源未找到
404 服务器没问题，资源在服务器中找不到
5xx : 服务器内部错误
500 服务器出错了
- 响应头（response header）
- X-Powered-By: Express
一般来讲，X 开头的字段，代表是自定义的字段（不是 http 协议规定的内容）
Content-Type: text/html; charset=utf-8
响应体内容的类型
Content-length: 49
响应体长度
ETag: W/"31-TNprVsD5wSGk8shE21bcRfKPzNg"
协商缓存
Date: Fri, 21 Dec 2018 02:41:40 GMT
响应时间戳
Connection: Keep-Alive
长连接
- 空行
- 响应体 <h2>Hello Node Express</h2>
response 响应体 代表浏览器要显示的内容
面试题： 从浏览器输入 url 地址，到最终页面渲染完成，中间发生了什么
1. DNS 解析____将 域名地址 解析成 IP 地址
2. TCP 连接（TCP 三次握手）
第一次握手： 浏览器 发送给 服务器
告诉服务器，将要发送请求
第二次握手： 服务器 发送给 浏览器，确定可以接受数据
告诉浏览器，可以发送请求
第三次握手： 确定发送还是不发送
告诉服务器，将要发送数据
3. 浏览器发送请求报文
4. 浏览器接受响应报文
5. 浏览器解析响应报文，渲染页面
html____调用 html 解析器，将 html 的 DOM 结构 解析为 DOM 树
css____调用 css 解析器，将 css 样式 解析为 CSSOM 树
将 DOM 树 和 CSSOM 树 组合到一起，形成 render 树
先布局 layout ，在渲染 render
js____调用 js 引擎，解析 js 代码
如果 js 有操作 DOM，则修改 DOM 树
如果 js 有操作 CSS，则修改 CSSOM 树
再组合 DOM 树 和 CSSOM 树
最后布局 layout，渲染 render____重排 和 重绘
6. 断开连接：TCP 四次挥手（断开浏览器发送请求的连接；断开浏览器接受响应的连接） （因为长连接的存在）
第一次挥手： 浏览器 发送给 服务器，告诉服务器，请求报文发完了，准备关闭连接
第二次挥手： 服务器 发送给 浏览器，告诉浏览器，请求报文接收完了，可以关闭连接了
第三次挥手： 服务器 发送给 浏览器，告诉浏览器，响应报文发送完了，准备关闭连接
第四次挥手： 浏览器 发送给 服务器，告诉服务器，响应报文接收完了，可以关闭连接了
数据结构： 二叉树，红黑树
算法： 二叉查找法，快速排序，希尔排序。