重学前端-总结：10 、浏览器：一个浏览器是如何工作的？（阶段一）

冷不防 2021-09-28 05:42 267阅读 0赞

# 重学前端-总结：10 、浏览器：一个浏览器是如何工作的？（阶段一） #

### 文章目录 ###

*  重学前端-总结：10 、浏览器：一个浏览器是如何工作的？（阶段一）
 *  前言
 *  浏览器到底是如何工作
 *  HTTP 协议
 *   *  实验
     *  HTTP 协议格式
     *  HTTP Method（方法）
     *  HTTP Status code（状态码）和 Status text（状态文本）
     *  HTTP Head (HTTP 头)
     *   *  请求头
         *  响应头
     *  HTTP Request Body
     *  HTTPS
     *  HTTP 2

# 前言 #

对于前端开发来说，我们平时与浏览器打交道的时间是最多的。可浏览器对前端同学来说更多像一个神秘黑盒子的存在。我们仅仅知道它能做什么，而不知道它是如何做到的。

# 浏览器到底是如何工作 #

过程：url->页面显示处理过程。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70]

# HTTP 协议 #

HTTP 的标准。

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

*  HTTP1.1 [https://tools.ietf.org/html/rfc2616][https_tools.ietf.org_html_rfc2616]
 *  HTTP1.1 [https://tools.ietf.org/html/rfc7234][https_tools.ietf.org_html_rfc7234]

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

## 实验 ##

使用 telnet 客户端，

telnet time.geekbang.org 80

输入以下字符作为请求：

GET / HTTP/1.1
    Host: time.geekbang.org

按下两次回车，收到了服务端的回复：

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>

HTTP 请求的过程

*  在 TCP 通道中传输的，完全是文本。
 *  请求格式、返回格式安装http协议格式，参考一下描述。
 *  注意请求内容、返回内容格式换行

## HTTP 协议格式 ##

根据上面的分析，我们可以知道 HTTP 协议，大概可以划分成如下部分。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 1]

## HTTP Method（方法） ##

方法有以下几种定义：

*  GET
 *  POST
 *  HEAD
 *  PUT
 *  DELETE
 *  CONNECT
 *  OPTIONS
 *  TRACE

浏览器通过地址栏访问页面都是 GET 方法。表单提交产生 POST 方法。

HEAD 则是跟 GET 类似，只返回请求头，多数由 JavaScript 发起

PUT 和 DELETE 分别表示添加资源和删除资源，但是实际上这只是语义上的一种约定，并没有强约束。

CONNECT 现在多用于 HTTPS 和 WebSocket。

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

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

接下来我们看看 response line 的状态码和状态文本。常见的状态码有以下几种。

*  1xx：临时回应，表示客户端请继续。
 *  2xx：请求成功。
    
     *  200：请求成功。
 *  3xx: 表示请求的目标有变化，希望客户端进一步处理。
    
     *  301&302：永久性与临时性跳转。
     *  304：跟客户端缓存没有更新。
 *  4xx：客户端请求错误。
    
     *  403：无权限。
     *  404：表示请求的页面不存在。
     *  418：It’s a teapot. 这是一个彩蛋，来自 ietf 的一个愚人节玩笑。（[超文本咖啡壶控制协议][Link 1]）
 *  5xx：服务端请求错误。
    
     *  500：服务端错误。
     *  503：服务端暂时性错误，可以一会再试。

1xx 系列的状态码是非常陌生的，原因是 1xx 的状态被浏览器 http 库直接处理掉了，不会让上层应用知晓。

2xx 系列的状态最熟悉的就是 200，这通常是网页请求成功的标志，也是大家最喜欢的状态码。

3xx 系列比较复杂，301 和 302 两个状态表示当前资源已经被转移，只不过一个是永久性转移，一个是临时性转移。实际上 301 更接近于一种报错，提示客户端下次别来了。

304 又是一个每个前端必知必会的状态，产生这个状态的前提是：客户端本地已经有缓存的版本，并且在 Request 中告诉了服务端，当服务端通过时间或者 tag，发现没有更新的时候，就会返回一个不含 body 的 304 状态。

## HTTP Head (HTTP 头) ##

HTTP 头可以看作一个键值对。原则上，HTTP 头也是一种数据，我们可以自由定义 HTTP 头和值。不过在 HTTP 规范中，规定了一些特殊的 HTTP 头，我们现在就来了解一下它们。

### 请求头 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 2]

### 响应头 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 3]

## HTTP Request Body ##

HTTP 请求的 body 主要用于提交表单场景。实际上，http 请求的 body 是比较自由的，只要浏览器端发送的 body 服务端认可就可以了。一些常见的 body 格式是：

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

我们使用 html 的 form 标签提交产生的 html 请求，默认会产生 application/x-www-form-urlencoded 的数据格式，当有文件上传时，则会使用 multipart/form-data。

## HTTPS ##

在 HTTP 协议的基础上，HTTPS 和 HTTP2 规定了更复杂的内容，但是它基本保持了 HTTP 的设计思想，即：使用上的 Request-Response 模式。

我们首先来了解下 HTTPS。HTTPS 有两个作用，一是确定请求的目标服务端身份，二是保证传输的数据不会被网络中间节点窃听或者篡改。

HTTPS 的标准也是由 RFC 规定的，你可以查看它的详情链接：

[https://tools.ietf.org/html/rfc2818][https_tools.ietf.org_html_rfc2818]

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

## HTTP 2 ##

HTTP 2 是 HTTP 1.1 的升级版本，你可以查看它的详情链接。

[https://tools.ietf.org/html/rfc7540][https_tools.ietf.org_html_rfc7540]

HTTP 2.0 最大的改进有两点，一是支持服务端推送，二是支持 TCP 连接复用。

服务端推送能够在客户端发送第一个请求到服务端时，提前把一部分内容推送给客户端，放入缓存当中，这可以避免客户端请求顺序带来的并行度不高，从而导致的性能问题。

TCP 连接复用，则使用同一个 TCP 连接来传输多个 HTTP 请求，避免了 TCP 连接建立时的三次握手开销，和初建 TCP 连接时传输窗口小的问题。

**Note:**  
其实很多优化涉及更下层的协议。IP 层的分包情况，和物理层的建连时间是需要被考虑的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70]: /images/20210923/812f31b5738d4535a5e05eaeff877e3e.png
[https_tools.ietf.org_html_rfc2616]: https://tools.ietf.org/html/rfc2616
[https_tools.ietf.org_html_rfc7234]: https://tools.ietf.org/html/rfc7234
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 1]: /images/20210923/9cdb310cab2f4ce98f3d69875d40ba82.png
[Link 1]: https://tools.ietf.org/html/rfc2324
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 2]: /images/20210923/69d20d2e6d684328974465ebb67f40a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 3]: /images/20210923/5f132cd63a98465dbe55801a0c80fad0.png
[https_tools.ietf.org_html_rfc2818]: https://tools.ietf.org/html/rfc2818
[https_tools.ietf.org_html_rfc7540]: https://tools.ietf.org/html/rfc7540