《重学前端》学习笔记Day126

浏览器：一个浏览器是如何工作的？

本篇文课程的目标是了解浏览器工作原理的大致过程。这部分浏览器工作原理不但是前端面试的常考知识点，它还会辅助你的实际工作，学习浏览器的内部工作原理和个中缘由，对于我们做性能优化、排查错误都有很大的好处。

浏览器是如何工作的？

实际上，对于浏览器的实现者来说，它们做的事情，就是把一个 URL变成一个屏幕上显示的网页。
大致过程是这样的：

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

先有一个感性的认知，从HTTP请求回来开始，整个过程并非一般想象中的一步执行完再执行下一步，而是一条流水线。从HTTP请求回来，就产生了流式的数据，后续的DOM树构建、CSS计算、渲染、合成、绘制，都是尽可能的流式处理前一步的产出。即不需要等到上一步骤完全结束，就开始处理上一步的输出。

HTTP协议

浏览器首先要做的事就是根据URL把数据取回来，取回来的数据使用的是HTTP协议，在此之前还有DNS查询。
HTTP的标准
HTTP标准是由IETF组织制定，相关的协议主要有两份：
HTTP1.1 https://tools.ietf.org/html/rfc2616
HTTP1.1 https://tools.ietf.org/html/rfc7234
HTTP协议是基于TCP协议出现的，对于TCP协议来说，TCP协议是一条双向的通讯通道，HTTP在TCP的基础上，规定了Request-Response的模式。这个模式决定了通讯必定是由浏览器端首先发起。
大部分情况下，浏览器实现者只需要用一个TCP库，甚至一个现成的HTTP就可以搞定浏览器的网络通讯部分。HTTP是纯碎的文本协议，它是规定了使用TCP协议来传输文本格式的一个应用层协议。

HTTP协议格式

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

在这些部分中，path是请求路径完全由服务端来定义；version是固定字符串；request body是我们最熟悉的HTML。

HTTP Method（方法）

GET
POST
HEAD
PUT
DELETE
CONNECT
OPTIONS
TRACE

GET
浏览器通过浏览器访问页面都是GET方法。表单提交产生POST方法。HEAD与GET相似，只返回相应头，多数由JavaScript发起。
PUT和DELETE分别表示添加资源和删除资源，但实际上这只是语义上的一种约定，并没有强制约束。
CONNECT现在多用于HTTPS和WebSocket。
OPTIONS和TRACE一般用于调试，多数线上服务都不支持。

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

• 1xx：临时回应，表示客户端请继续。

• 2xx：请求成功。

  • 200：请求成功。

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

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

• 4xx：客户端请求错误。

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

• 5xx：服务端请求错误。

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

HTTP Head (HTTP头)Request Header：

Response Header：

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的标准也是由RFC规定的：
https://tools.ietf.org/html/rfc2818
HTTPS使用加密通道传输HTTP的内容。但是HTTPS首先与服务端建立一条TLS加密通道。TLS构建于TCP协议之上，它实际上是对传输的内容做一次加密，所以从传输内容上看，HTTP和HTTPS没有任何区别。

HTTP 2

HTTP 2 是HTTP1.1的升级版本，可以查看它的详情链接：https://tools.ietf.org/html/rfc7540
HTTP 2.0最大的改进有两点，一是支持服务端推送，二是支持TCP连接复用。
服务端推送能够在服务端发送第一个请求到服务端时，提前把一部分内容推送给客户端，放入缓存当中，这可以避免客户端请求顺序带来的并行度不高，从而导致的性能问题。
TCP连接复用，则使用同一个TCP连接来传输多个HTTP请求，避免TCP连接建立时的三次握手开销，和初建TCP连接时传输窗口小的问题。

如何处理请求回来的HTML代码，DOM树又是如何构建的。

此文章为7月Day29学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪