前端程序员必须掌握的HTTP协议、TCP网络协议、浏览器主要组成部分和渲染流程

本文未经允许,禁止转载 持续更新中......

HTTP协议

src=http___pic4.zhimg.com_v2-285111e97deb27c67bfe83fc9ec1b7e2_1200x500.jpg&refer=http___pic4.zhimg.jpg 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规则或约定.通俗理解: 通信双方采用约定好的格式来发送和接受消息(就是事先预定好的通信格式)

客户端和服务器之间要实现网页内容的传输, 则双方必须遵守网页内容的传输协议.

网页内容又叫做超文本, 因此网页内容的传输协议又叫做超文本传输协议(Hypertext transfer protocol), 简称HTTP协议.它是一个简单的请求-响应协议，通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应

Http协议分为请求和响应两个部分组成，客户端发起请求，服务器接收到客户端的请求给出响应。

请求 Request

客户端向服务器发出一个请求，请求格式为: 请求行、请求头和请求体

get请求

//--------------------------请求行--------------------------------
GET /day02/01.php?username=lw&password=123456 HTTP/1.1
// GET  请求方式
// /day02/01.php?username=lw&password=123456    请求路径+参数（注意点）
// HTTP/1.1 HTTP的版本号

//--------------------------请求头--------------------------------
// Host:主机地址
Host: www.study.com
// HTTP1.1版本默认开启，建立过连接后，TCP连接不会断开，下次连接可以继续使用
Connection: keep-alive
//chrome浏览器自己增加的，不用管
Upgrade-Insecure-Requests: 1
//浏览器的代理字符串（版本信息）
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36
//浏览器端可以接受的类型。
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,`*/*`;q=0.8
//从哪个页面发出的请求
Referer: http://www.study.com/day02/01-login.html
//检查浏览器支持的压缩方式
Accept-Encoding: gzip, deflate, sdch
//浏览器支持的语言，优先中文。
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6

//----------------------------请求体-------------------------------------
//get请求没有请求体，但是参数会拼接到请求行中

post请求

//-----------------------请求行---------------------------------------------
POST /day02/01.php HTTP/1.1

//-----------------------请求头--------------------------------------------
Host: www.study.com
Connection: keep-alive
//传递的参数的长度。
Content-Length: 29
Cache-Control: max-age=0
Origin: http://www.study.com
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36
//内容类型：表单数据，如果是post请求，必须指定这个属性。
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,`*/*`;q=0.8
Referer: http://www.study.com/day02/01-login.html
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6

//------------------------请求体------------------------------------------
username=lw&password=123456

GET与POST请求对比:

GET 请求没有请求体，因为 GET 请求的参数拼接到地址栏中了
POST 请求有请求体，就是传递的参数
POST 请求需要指定 content-type 属性。

响应Response

//---------------------状态行（响应行）-------------------------------
HTTP/1.1 200 OK
//HTTP/1.1  HTTP版本
//200 响应的状态
	//200表示成功
	//404表示找不到资源
	//500表示服务端错误


//----------------------响应头-----------------------------------------------
Date: Thu, 22 Jun 2017 16:51:22 GMT
Server: Apache/2.4.23 (Win32) OpenSSL/1.0.2j PHP/5.4.45
X-Powered-By: PHP/5.4.45
Content-Length: 18
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
//内容类型，告诉浏览器该如何解析响应结果
Content-Type: text/html;charset=utf-8

//-----------------------响应体------------------------------------------------
用户登录成功

HTTP 请求常见的状态码

1xx: 临时回应。表示请求已接收，客户端请继续
2xx: 表示请求成功
3xx: 表示请求的目标有变化，希望客户端进一步处理
- 301 资源被永久转移
- 302 资源被临时转移
- 304 客户端缓存没有更新
4xx: 客户端请求错误
- 400 客户端请求有语法错误，服务器无法理解
- 401 请求未授权，要求验证身份，一般为token失效了
- 403 服务器接收请求，但是拒绝执行。一般为权限不足
- 404 请求资源不存在
5xx: 服务器端发生错误

HTTP常见的请求方法

get请求一般是访问一个页面拿数据
post请求一般是表单提交
HEAD 类似于get请求，不同的是返回的响应中没有具体的内容，用户获取报头
PUT 添加资源
DELETE 删除资源
CONNECT 用来建立到给定URI标识的服务器的隧道；它通过简单的TCP / IP隧道更改请求连接，通常实使用解码的HTTP代理来进行SSL编码的通信（HTTPS）
OPTIONS 用来描述了目标资源的通信选项，会返回服务器支持预定义URL的HTTP策略
TRACE 回显服务器收到的请求，主要用来测试的

HTTP2 / HTTP1 之间的区别是什么

HTTP2 采用二进制格式而非文本格式，比起文本格式，二进制格式解析起来更加高效，并且错误少
HTTP2 是完全的多路复用，非有序并阻塞的----只需要一个连接即可实现并行，多路复用的意思是它能同时处理多个消息的请求和响应，HTTP1 是一个连接一次只能提交一个请求的效率比较高，多了就会变慢
使用报头压缩，HTTP2 降低了开销，HTTP1的消息头很大冗余,HTTP2 是将消息头中的不同的部分分别用不用的索引进行表示，且会用哈夫曼编码压缩字符串，最后封装成 frame
HTTP2 让服务器可以将响应主动”推送”到客户端缓存中，HTTP2 中服务器会主动将资源推送给客户端，例如把 js 和 css 文件主动推送给客户端而不用客户端解析 HTML 后请求再响应

HTTP请求的过程

DNS域名解析，将相应的域名解析为IP地址 --> 根据IP地址找到对应服务器 --> 发起 TCP 的 3 次握手 --> 建立 TCP 连接后发起 HTTP 请求 -->服务器响应 HTTP 请求，浏览器得到 html 代码 -->浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

https协议

以安全为目标的 HTTP 通道，是 HTTP 的安全版。HTTPS 的安全基础是 SSL。SSL 协议位于 TCP/IP 协议与各种应用层协议之间，为数据通讯提供安全支持。SSL 协议可分为两层：SSL 记录协议（SSL Record Protocol），它建立在可靠的传输协议（如TCP）之上，为高层协议提供数据封装、压缩、加密等基本功能的支持。SSL 握手协议（SSL Handshake Protocol），它建立在 SSL 记录协议之上，用于在实际的数据传输开始前，通讯双方进行身份认证、协商加密算法、交换加密密钥等。

http和https的区别

HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)
HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。
HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

TCP网络协议

TCP是一种面向连接的，可靠的，基于字节流的传输层通信协议。它提供了全双工通信，数据在两个方向上独立的进行传输。每一条TCP连接只能有两个端点，每一条TCP连接只能是点对点的。

TCP的三次握手

~~此处图片来源百度图片，侵删~~

第一次握手: 客户端主动去connect服务器，并且发送SYN包到服务器，等待服务器确认，服务器被动打开
第二次握手: 服务器收到SYN包，确认客户的SYN,同时发送一个SYN包和一个ACK(应答)给客户
第三次握手: 客户端收到服务器的SYN+ACK后，向服务器发送确认包ACK表示收到了。然后，客户端和服务器进入TCP连接成功状态，完成三次握手

TCP的四次挥手

~~此处图片来源百度图片，侵删~~

注意: 中断连接可以是客户端，也可以是服务端

第一次挥手: 主机1（可以使客户端，也可以是服务器端）向主机2发送一个FIN报文段；此时，主机1进入FIN_WAIT_1状态；这表示主机1没有数据要发送给主机2了。
第二次挥手：主机2收到了主机1发送的FIN报文段，向主机1回一个ACK报文段，主机1进入FIN_WAIT_2状态；主机2告诉主机1，我“同意”你的关闭请求。
第三次挥手：主机2向主机1发送FIN报文段，请求关闭连接，同时主机2进入LAST_ACK状态。
第四次挥手：主机1收到主机2发送的FIN报文段，向主机2发送ACK报文段，然后主机1进入TIME_WAIT状态；主机2收到主机1的ACK报文段以后，就关闭连接；此时，主机1等待2MSL后依然没有收到回复，则证明Server端已正常关闭，那好，主机1也可以关闭连接了。

TCP的优缺点

优点: TCP 发送的包有序号，对方收到包后要给一个反馈，如果超过一定时间还没收到反馈就自动执行超时重发，因此 TCP 最大的优点是可靠
缺点: 很简单，就是麻烦，如果数据量比较小的话建立连接的过程反而占了大头，不断地重发会造成网络延迟，因此比如视频聊天通常就使用 UDP，因为丢失一些包也没关系，速度流畅才是重要的

TCP和UDP的区别

UDP是 OSI 参考模型中一种无连接的传输层协议，提供面向事务的简单不可靠信息传送服务

两者区别:

TCP 是面向连接的传输控制协议// 如打电话拨号建立连接，UDP 提供了无连接的数据报服务，发送数据之前不需要建立连接//类似与短信
TCP提供可靠的服务，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP不保证可靠交付
TCP面向字节流,UDP是面向报文的。UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）
每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信
TCP首部开销20字节;UDP的首部开销小，只有8个字节
TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道

为什么TCP连接需要三次握手和四次挥手

为什么是三次握手

为了防止已失效的连接请求报文段突然有送到了服务器，因而产生错误,假设两次握手时，客户发出的第一个请求连接报文段在某一网络节点长时间滞留，以致延误到连接释放后才到达服务器。服务器收到失效的连接请求报文段后，认为是客户又发出一次新的连接请求。于是向客户发送确认报文段，同意建立连接，此时在假定两次握手的前提下，连接建立成功。这样会导致服务器的资源白白浪费
为什么是四次挥手

TCP 协议是全双工通信，这意味着客户端和服务器端都可以向彼此发送数据，所以关闭连接是双方都需要确认的共同行为，假设是三次挥手时，首先释放了客户到服务器方向的连接，此时 TCP 连接处于半关闭状态，这时客户不能向服务器发送数据，而服务器还是可以向客户发送数据。如果此时客户收到了服务器的确认报文段后，就立即发送一个确认报文段，这会导致服务器向客户还在发送数据时连接就被关闭。这样会导致客户没有完整收到服务器所发的报文段

浏览器的组成部分

User interface: 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的你请求的页面外，其他显示的各个部分都属于用户界面
Browser engine: 浏览器引擎 - 在用户界面和渲染引擎之间传送指令
Rendering engine: 渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上
Networking: 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现
JavaScript Interpreter: Js解析器 - 用于解析和执行 JavaScript 代码，比如chrome的javascript解释器是V8
UI Backend: 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法
Data Persistence: 数据存储 - 这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5)定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库

浏览器渲染流程

解析html，生成DOM树，同时解析css，生成css规则
根据DOM树和css规则生成Render Tree(渲染树)
计算位置和大小信息，进行布局Layout
绘制页面