HTTP协议

HTTP协议

简介

• HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写，主要用于网页的传输，现在也常应用网络API的开发（Restful API)

• HTTP是一个TCP/IP通信协议的最上层的协议之一（HTML 文件, 图片文件, 查询结果等）

• HTTPS相对于HTTP添加了数字证书加密功能

基本工作原理

• HTTP是浏览器或者其他客户端（如手机App）和网站服务器之间沟通的协议

• 浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求

• 常用的Web服务器有：Nginx，Apache，IIS服务器（微软的产品）等

• Web服务器接收到的请求后，向客户端发送响应信息

• HTTP默认端口号为80，但是你也可以改为8080或者其他端口

HTTP三个要点

• HTTP是无连接： 无连接的含义是限制每次连接只处理一个请求，服务器处理完客户的请求，并收到客户的应答后，即断开连接，采用这种方式可以节省传输时间
• HTTP是媒体独立的： 这意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送，客户端以及服务器指定使用适合的MIME-type内容类型
• HTTP是无状态： HTTP协议是无状态协议，无状态是指协议对于事务处理没有记忆能力，缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大，另一方面，在服务器不需要先前信息时它的应答就较快

请求和响应的主要流程和概念

• 请求

• • 地址和动词：例如 GET https://www.baidu.com
  • 请求头（header)：用来描述请求和发送者的一些信息
  • 请求参数：以百度为例，要搜索的关键词。

• 相应

• • 响应代码：200表示成功，404表示不存在等
  • 响应头（header)：描述相应内容的一些信息
  • 响应内容：HTML, JSON, 图片等

请求和响应实例

客户端请求：

GET /hello.txt HTTP/1.1
User-Agent: curl/7.16.3 libcurl/7.16.3 OpenSSL/0.9.7l zlib/1.2.3
Host: www.example.com
Accept-Language: en, mi

服务端响应:

HTTP/1.1 200 OK
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache
Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
ETag: "34aa387-d-1568eb00"
Accept-Ranges: bytes
Content-Length: 51
Vary: Accept-Encoding
Content-Type: text/plain

响应内容：

Hello World! My payload includes a trailing CRLF.

完整的网页请求过程

从浏览器地址栏输入url到显示页面的步骤

概述

• 浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求

• 三次握手建立连接，服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等），数据传输完成后四次挥手断开连接

• 浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建⽴相应的内部数据结构（如 HTML 的 DOM ）

• 载⼊解析到的资源⽂件，渲染⻚⾯，完成

URL解析

• URL（Universal Resource Locator）统一资源定位符，俗称网页地址或者网址，用来表示某个资源的地址

• 组成部分

  传输协议

  服务器类型

  域名

  端口

  虚拟目录

  文件名

  锚

  参数

DNS域名解析

• 查询浏览器缓存

  浏览器会缓存之前拿到的DNS

• 检查系统缓存

  检查hosts文件，这个文件保存了一些以前访问过的网站的域名和IP的数据，它就像是一个本地的数据库

• 检查路由器缓存

  路由器有自己的DNS缓存

• 查询ISP DNS 缓存

  ISP服务商（移动联通电信等）DNS缓存（本地服务器缓存）

• 递归查询

  从根域名服务器到顶级域名服务器再到极限域名服务器依次搜索对应目标域名的IP

通过以上的查找，就可以获取到域名对应的IP了。接下来就是向该IP地址定位的HTTP服务器发起TCP连接

浏览器与网站建立TCP连接（三握四挥）

SYN=1 请求连接的标志

ACK=1 收到确认的标志

• 第一次握手

  客户端向服务器端发送请求（SYN=1）等待服务器确认

• 第二次握手

  服务器收到请求并确认，回复一个指令（SYN=1，ACK=1）

• 第三次握手

  客户端收到服务器的回复指令并返回确认（ACK=1）

通过三次握手，建立了客户端和服务器之间的连接，现在可以请求和传输数据了

FIN=1 断开连接的标志

• 第一次挥手

  客户端向服务器端发送断开请求（FIN=1， ACK=1）等待服务器确认

• 第二次挥手

  服务器收到请求并确认，回复一个指令（ACK=1）

服务器等待数据传输完毕后发起第三次挥手

• 第三次挥手

  服务器向客户端发起确认断开的请求（FIN=1，ACK=1）

• 第四次挥手

  客户端收到请求并确认，回复一个指令（ACK=1）

客户端在回复后2MSL后（4分钟）关闭连接

如果没有2MSL的等待，当客户端最后一次报文丢失时，服务器就会因收不到客户端的确认而不断进行超时重发

浏览器渲染页面

客户端拿到服务器端传输来的文件，通过渲染引擎处理HTML文件

• 浏览器会解析html源码，然后创建一个 DOM树

  每个HTML标签都对应一个节点

• 浏览器解析CSS代码，计算出最终的样式数据，形成css对象模型CSSOM

  忽略非法的CSS代码，之后按照浏览器默认设置——用户设置——外联样式——内联样式——HTML中的style样式顺序进行渲染

• 利用DOM和CSSOM构建一个渲染树

  渲染树和DOM树是有区别的，渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等

• 浏览器就根据渲染树直接把页面绘制到屏幕上

JavaScript会阻塞DOM树的解析

JavaScript的加载、解析与执行会阻塞DOM的构建，也就是说，在构建DOM时，HTML解析器若遇到了JavaScript，那么它会暂停构建DOM，将控制权移交给JavaScript引擎，等JavaScript引擎运行完毕，浏览器再从中断的地方恢复DOM构建

JavaScript也会导致CSSOM阻塞DOM树的解析

原本DOM和CSSOM的构建是互不影响，井水不犯河水，但是一旦引入了JavaScript，CSSOM也开始阻塞DOM的构建，只有CSSOM构建完毕后，DOM再恢复DOM构建

因为JavaScript不只是可以改DOM，它还可以更改样式，也就是它可以更改CSSOM，因为不完整的CSSOM是无法使用的，如果JavaScript想访问CSSOM并更改它，那么在执行JavaScript时，必须要能拿到完整的CSSOM，所以就导致了，如果浏览器尚未完成CSSOM的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟脚本执行和DOM构建，直至其完成CSSOM的下载和构建，也就是说，浏览器会先下载和构建CSSOM，然后再执行JavaScript，最后在继续构建DOM