重学前端学习笔记（十一）--浏览器工作解析（一）

布满荆棘的人生 2022-01-19 01:51 306阅读 0赞

## 笔记说明 ##

> 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，[每天10分钟，重构你的前端知识体系][10]，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。

## 一、URL到网页呈现发生了什么？ ##

### 1.1、过程 ###

*  1、浏览器首先使用 `HTTP` 协议或者 `HTTPS` 协议，向服务端请求页面
 *  2、把请求回来的 `HTML` 代码经过解析，构建成 `DOM` 树
 *  3、计算 `DOM` 树上的 `CSS` 属性
 *  4、最后根据 `CSS` 属性对元素逐个进行渲染，得到内存中的位图
 *  5、一个可选的步骤是对位图进行合成，这会极大地增加后续绘制的速度
 *  6、合成之后，再绘制到界面上

### 1.2、流程图 ###

winter用访问极客时间网站为例整理了一下流程

注意一点：从 HTTP 请求回来，就产生了流式的数据，后续的 DOM 树构建、CSS 计算、渲染、合成、绘制，都是尽可能地流式处理前一步的产出

## 二、HTTP协议 ##

### 2.1、HTTP标准 ###

#### 2.1.1、介绍 ####

1、HTTP 标准由 `IETF` 组织制定，跟它相关的标准主要有两份：

1）、`HTTP1.1`：[tools.ietf.org/html/rfc261…][tools.ietf.org_html_rfc261]

2）、`HTTP1.1`：[tools.ietf.org/html/rfc723…][tools.ietf.org_html_rfc723]

2、`TCP` 协议是一条双向的通讯通道，`HTTP` 在 `TCP`的基础上，规定了 `Request-Response` 的模式。这个模式决定了通讯必定是由浏览器端首先发起的。

3、`HTTP` 是纯粹的文本协议，它是规定了使用 `TCP` 协议来传输文本格式的一个应用层协议。

#### 2.1.2、小实验 ####

> winter用一个纯粹的 `TCP` 客户端来手工实现 `HTTP`，实验需要使用`telnet`客户端

1、运行 `telnet`，连接到极客时间主机

telnet time.geekbang.org 80
    复制代码

2、`TCP` 连接已经建立，输入下面字符作为请求（请求部分）

GET / HTTP/1.1
    Host: time.geekbang.org
    复制代码

第一行被称作 `request line`，它分为三个部分，`HTTP Method`（请求的方法）、请求的路径、请求的协议和版本。

紧跟在`request line`后面的是请求头，每行用冒号分隔名称和值

3、按下两次回车，收到服务端回复（响应部分）

HTTP/1.1 301 Moved Permanently
    Date: Fri, 25 Jan 2019 13:28:12 GMT
    Content-Type: text/html
    Content-Length: 182
    Connection: keep-alive
    Location: https://time.geekbang.org/
    Strict-Transport-Security: max-age=15768000
    
    <html>
    <head><title>301 Moved Permanently</title></head>
    <body bgcolor="white">
    <center><h1>301 Moved Permanently</h1></center>
    <hr><center>openresty</center>
    </body>
    </html>
    复制代码

第一行被称作 `response line`，它也分为三个部分，协议和版本、状态码和状态文本。

紧随在 `response line` 之后，是响应头，每行用冒号分隔的名称和值

## 三、HTTP 协议格式 ##

### 3.1、HTTP协议划分 ###

### 3.2、HTTP Method（方法） ###

> 类型：`GET、POST、HEADPUT、DELETE、CONNECT、OPTIONS、TRACE`

1、浏览器通过地址栏访问页面都是 `GET` 方法

2、表单提交产生 `POST` 方法

3、`PUT` 和 `DELETE` 分别表示添加资源和删除资源

4、`CONNECT` 现在多用于 `HTTPS` 和 `WebSocket`

5、`OPTIONS` 和 `TRACE` 一般用于调试，多数线上服务都不支持

### 3.3、 HTTP Status code（状态码）和 Status text（状态文本） ###

#### 3.3.1、1xx ####

> 临时回应，表示客户端请继续。对前端来说`1xx` 系列的状态码是非常陌生的，原因是 `1xx` 的状态被浏览器 `http` 库直接处理掉了，不会让上层应用知晓。

#### 3.3.2、2xx ####

> `2xx` 系列的状态最熟悉的就是 `200`，这通常是网页请求成功的标志

#### 3.3.3、3xx ####

> 表示请求的目标有变化，希望客户端进一步处理。

*  `301`&`302`：永久性与临时性跳转。
 *  `304`：跟客户端缓存没有更新。

#### 3.3.4、4xx ####

> 客户端请求错误。

*  `403`：无权限。
 *  `404`：表示请求的页面不存在。
 *  `418`：`It’s a teapot.` 这是一个彩蛋，来自 `IETF` 的一个愚人节玩笑。（[超文本咖啡壶控制协议][Link 1]）

#### 3.3.5、5xx ####

> 服务端请求错误。

*  `500`：服务端错误。
 *  `503`：服务端暂时性错误，可以一会再试。

### 3.4、HTTP Head (HTTP 头) ###

#### 3.4.1、Request Header ####

#### 3.4.2、Response Header ####

### 3.5、HTTP Request Body ###

> `HTTP` 请求的 `body` 主要用于提交表单场景。

常见的 `body` 格式是：

*  `application/json`
 *  `application/x-www-form-urlencoded`
 *  `multipart/form-data`
 *  `text/xml`

1、使用 `html` 的 `form` 标签提交产生的 html 请求，默认会产生 `application/x-www-form-urlencoded` 的数据格式

2、当有文件上传时，则会使用 `multipart/form-data`。

## 四、HTTPS ##

### 4.1、作用 ###

*  1、确定请求的目标服务端身份
 *  2、保证传输的数据不会被网络中间节点窃听或者篡改

### 4.2、标准 ###

`HTTPS` 的标准也是由 `RFC` 规定的[查看详情][Link 2]

*  `HTTPS` 是使用加密通道来传输 `HTTP` 的内容。
 *  `HTTPS`首先与服务端建立一条 `TLS` 加密通道。
 *  `TLS` 构建于 `TCP` 协议之上，它实际上是对传输的内容做一次加密，所以从传输内容上看，HTTPS 跟 HTTP 没有任何区别。

## 五、HTTP2 ##

> HTTP 2 是 HTTP 1.1 的升级版本[查看详情][Link 3]

### 5.1、最大改进 ###

*  1、`支持服务端推送`：服务端推送能够在客户端发送第一个请求到服务端时，提前把一部分内容推送给客户端，放入缓存当中，这可以避免客户端请求顺序带来的并行度不高，从而导致的性能问题。
 *  2、`支持 TCP 连接复用`：TCP 连接复用，则使用同一个 TCP 连接来传输多个 HTTP 请求，避免了 TCP 连接建立时的三次握手开销，和初建 TCP 连接时传输窗口小的问题。

## 个人总结 ##

这一部分的知识对我们排查api问题很有帮助，理解http的一些知识，能帮助我们更好的理解前后端的通讯，接下来winter会继续讲解浏览器是怎样工作的后续阶段。

转载于:https://juejin.im/post/5cd46c2be51d453a543f9e43

[10]: https://link.juejin.im?target=https%3A%2F%2Ftime.geekbang.org%2Fcolumn%2Fintro%2F154
[tools.ietf.org_html_rfc261]: https://link.juejin.im?target=https%3A%2F%2Ftools.ietf.org%2Fhtml%2Frfc2616
[tools.ietf.org_html_rfc723]: https://link.juejin.im?target=https%3A%2F%2Ftools.ietf.org%2Fhtml%2Frfc7234
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Ftools.ietf.org%2Fhtml%2Frfc2324
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Ftools.ietf.org%2Fhtml%2Frfc2818
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Ftools.ietf.org%2Fhtml%2Frfc7540