服务器
网站的组成
- 网站应用程序主要分为两大部分：客户端和服务器端。
- 客户端：在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用 HTML、CSS、JavaScript 构建。
- 服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑。
Node 网站服务器：能够提供网站访问服务的机器就是网站服务器，它能够接收客户端的请求，能够对请求做出响应。
IP 地址：互联网中设备的唯一标识。IP 是 Internet Protocol Address 的简写，代表互联网协议地址
由于 IP 地址难于记忆，所以产生了域名的概念，所谓域名就是平时上网所使用的网址。www.baidu.com => https://182.61.200.6:443
虽然在地址栏中输入的是网址, 但是最终还是会将域名转换为 ip 才能访问到指定的网站服务器。
protocol://hostname:port/path?query#hash
- protocal：协议，选择不同的协议，会导致和服务器之间消息交互格式、连接方式不同，大部分都服务器支持 http 和 https 两种协议
- hostname：主机名，可以是 ip、域名
- port：端口号，端口号可以不写，使用默认值
- http 协议默认值 80
- https 协议默认值 443
- path: 一个普通的字符串，该字符串会交给 web 服务器处理，主要用于定位服务
- query: 一种特殊格式的字符串，该字符串会交给 web 服务器处理，主要用于向服务器某个服务传递一些信息。格式为：
属性名=属性值&属性名=属性值 - hash：一个普通的字符串，在浏览器的地址栏中，如果 url 其他位置的信息保持不变，仅变动 hash，浏览器不会重新访问服务器，因此通常用于不刷新的页面内跳转
http 协议
我们可以通过 url 地址访问服务器，但是，浏览器和服务器之间的数据到底是怎么交互的，数据的格式是什么，这取决于使用什么协议
最常见的协议，就是 http 协议。http 协议将和服务器的一次交互看作是两段简单的过程组成：请求 request 和响应 response
- 请求：客户端通过 url 地址发送数据到服务器的过程
- 响应：服务器收到请求数据后回馈数据给客户端的过程
客户端与服务端通信时传输的内容我们称之为报文。
HTTP 就是一个通信规则，这个规则规定了客户端发送给服务器的报文格式，也规定了服务器发送给客户端的报文格式。实际我们要学习的就是这两种报文。客户端发送给服务器的称为请求报文，服务器发送给客户端的称为响应报文。
报文（请求报文、响应报文）的组成：
- 报文首行
- 报文头
- 空行（仅仅作为一个分割）
- 报文体
分析 GET 请求报文(给服务器看的)
GET http://localhost:3000/meishi HTTP/1.1 Host: localhost:3000 Connection: keep-alive Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36 DNT: 1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3 Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7 空行 空行
报文首行：
GET http://localhost:3000/two HTTP/1.1
-请求类型 协议名://主机名:端口号/路由关键词 使用协议的版本
报文头：
Host: localhost:3000
--访问的主机名（地址，仅仅包含主机名+端口号）
--防盗链、广告计费
Connection: keep-alive
--告诉服务器，浏览器端支持长连接
Upgrade-Insecure-Requests: 1
--告诉服务器，浏览器端支持https协议
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
--用户代理，告知服务器你的浏览器内核以及品牌，早期的时候用于判断用户的浏览器是拿一个品牌，现在不可用了。
DNT: 1
--禁止跟踪，告知服务器禁止跟踪，并不是写了该字段服务器就一定遵守。
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
--告知服务器浏览器能接受的文件类型，q是资源的优先级，取值范围是0-1,1的权限最高，默认是1
Accept-Encoding: gzip, deflate, br
--告诉服务器浏览器能支持的文件压缩格式
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
--告诉服务器，浏览器能够接受的语言
空行：
报文体：
GET 请求没有报文体
分析 POST 请求报文(给服务器看的)
POST http://localhost:3000/demo HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Content-Length: 16
Cache-Control: max-age=0
Origin: http://localhost:63342
Upgrade-Insecure-Requests: 1
DNT: 1
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
Referer: http://localhost:63342/node/day04/1.express%E6%9C%8D%E5%8A%A1%E5%99%A8/demo.html?_ijt=tjfnb0cpos62ql8umjmm9v24ve
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: Webstorm-9af2238=09820128-3adb-43e4-8242-a6f65c9e523a
name=kobe&age=18
报文首行：
POST http://localhost:3000/demo HTTP/1.1
报文头：
Host: localhost:3000
--访问的主机名（地址，仅仅包含主机名+端口号）
Connection: keep-alive
--告诉服务器，浏览器端支持长连接
Content-Length: 16
--请求体的长度
Cache-Control: max-age=0
--用于控制强缓存
Origin: http://localhost:63342
--当前所处位置（主机位置+端口位置）
Upgrade-Insecure-Requests: 1
--告诉服务器，浏览器端支持https协议
DNT: 1
--禁止跟踪，告知服务器禁止跟踪，并不是写了该字段服务器就一定遵守。
Content-Type: application/x-www-form-urlencoded
--标识该请求是来自于一个form表单，并且以urlencoded形式进行编码
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
--用户代理，告知服务器你的浏览器内核以及品牌，早期的时候用于判断用户的浏览器是拿一个品牌，现在不可用了。
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
--告知服务器浏览器能接受的文件类型，q是资源的优先级，取值范围是0-1,1的权限最高，默认是1
Referer: http://localhost:63342/node/day04/1.express%E6%9C%8D%E5%8A%A1%E5%99%A8/demo.html?_ijt=tjfnb0cpos62ql8umjmm9v24ve
--在当前url下发出去的请求，是一个完整url，也可以做防盗链、同时也可以做广告计费
Accept-Encoding: gzip, deflate, br
--告诉服务器浏览器能支持的文件压缩格式
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
--告诉服务器，浏览器能够接受的语言
Cookie: Webstorm-9af2238=09820128-3adb-43e4-8242-a6f65c9e523a
--Webstorm帮你“种”的一个cookie
空行：
报文体：
name=kobe&age=18
--携带过去的数据，以urlencoded进行编码
分析响应报文(给浏览器看的)
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html; charset=utf-8
Content-Length: 27
ETag: W/"1b-q8c2w67PUz7P4t0CNbDw9xqw6bo"
Date: Tue, 23 Jul 2019 06:20:18 GMT
Connection: keep-alive
我是 first
报文首行：
HTTP/1.1 200 OK 协议名/协议版本 状态码
报文头：
X-Powered-By: Express -服务器所使用的框架
Content-Type: text/html; charset=utf-8 -告诉浏览器解析文件的方式；文件编码方式
Content-Length: 27 -响应体的长度
ETag: W/"1b-NFYx6TA4AihYceTsWYDlBLJferg" -协商缓存（资源唯一标识）
Date: Tue, 23 Jul 2019 06:20:18 GMT -日期
Connection: keep-alive -告诉浏览器，服务器支持长连接
空行：
报文体：
我是 first
HTTP 状态码
http 状态码的分类：
- 1xx：服务器已经收到了本次请求，但是还需要进一步的处理才可以
- 2xx：服务器已经收到了本次请求，且已经分析、处理等...最终处理完毕
- 3xx：服务器已经收到了本次请求，还需要其他的资源，或者重定向到其他位置，甚至交给其他服务器处理
- 4xx：一般指请求的参数或者地址有错误，出现了服务器无法理解的请求（一般是前端的锅）
- 5xx：服务器内部错误（不是因为请求地址或者请求参数不当造成的），无法响应用户请求（一般是后端人员的锅）
常见的几个状态码：
- 200：成功（最理想状态）
- 301：重定向，被请求的旧资源永久移除了（不可以访问了），将会跳转到一个新资源，搜索引擎在抓取新内容
- 302：重定向，被请求的旧资源还在（仍然可以访问），但会临时跳转到一个新资源，搜索引擎会抓取新的内容
- 304：请求资源重定向到缓存中（命中了协商缓存）
- 404：资源未找到，一般是客户端请求了不存在的资源
- 500：服务器收到了请求，但是服务器内部产生了错误
- 502：连接服务器失败（服务器在处理一个请求的时候，或许需要其他的服务器配合，但是联系不上其他的及服务器）
用户输入 URL 按下回车，一直到用户能看到界面，期间经历了什么？
一、DNS 解析（缓存）：
1. 找浏览器DNS缓存解析域名
2. 找本机 DNS 缓存：`ipconfig/displaydns > 盘符`
3. 找路由器 DNS 缓存
4. 找运营商 DNS 缓存（百分之 80 的 DNS 查找，到这一步就结束）
5. 递归查询
二、进行 TCP（协议）连接，三次握手（根据上一步请求回来的 ip 地址，去联系服务器）
- 第一次握手：由浏览器发给服务器，我想和你说话，你能听见吗
- 第二次握手：由服务器发给浏览器，我能听得见，你说吧
- 第三次握手：由浏览器发给服务器，好，那我就开始说话
三、发送请求（请求报文）
四、得到响应（响应报文）
五、浏览器开始解析 html
- 预解析：将所有外部的资源，以请求出去
- 解析html，生成DOM树
- 解析CSS，生成CSSDOM树
- 合并成一个render树
- js 是否操作了 DOM 或样式
- 有：进行重绘重排（不好，1.尽量避免；2.最小化重绘重排）
- 没有：null
- 最终展示界面
六、断开 TCP 连接，四次挥手（确保数据的完整性）
- 第一次挥手：由浏览器发给服务器，我的东西接受完了，你关闭吧。
- 第二次挥手：由服务器发给浏览器，我还有一些东西没接收完，你等一会，我接收好了我告诉你
- 第三次挥手：由服务器发给浏览器，我接收完了，你断开吧
- 第四次挥手：由浏览器发给服务器，好的，那我断开了
