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

时间 2019-12-05

原文原文链接

笔记说明

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

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

1.一、过程

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

1.二、流程图

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

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

2、HTTP协议

2.一、HTTP标准

2.1.一、介绍

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

1）、HTTP1.1：tools.ietf.org/html/rfc261…api

2）、HTTP1.1：tools.ietf.org/html/rfc723…浏览器

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

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

2.1.二、小实验

winter用一个纯粹的 TCP 客户端来手工实现 HTTP，实验须要使用telnet客户端网络

一、运行 telnet，链接到极客时间主机app

telnet time.geekbang.org 80
复制代码

二、TCP 链接已经创建，输入下面字符做为请求（请求部分）

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

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

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

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

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 以后，是响应头，每行用冒号分隔的名称和值

3、HTTP 协议格式

3.一、HTTP协议划分

3.二、HTTP Method（方法）

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

一、浏览器经过地址栏访问页面都是 GET 方法

二、表单提交产生 POST 方法

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

四、CONNECT 如今多用于 HTTPS 和 WebSocket

五、OPTIONS 和 TRACE 通常用于调试，多数线上服务都不支持

3.三、 HTTP Status code（状态码）和 Status text（状态文本）

3.3.一、1xx

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

3.3.二、2xx

2xx 系列的状态最熟悉的就是 200，这一般是网页请求成功的标志

3.3.三、3xx

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

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

3.3.四、4xx

客户端请求错误。

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

3.3.五、5xx

服务端请求错误。

500：服务端错误。
503：服务端暂时性错误，能够一会再试。

3.四、HTTP Head (HTTP 头)

3.4.一、Request Header

3.4.二、Response Header

3.五、HTTP Request Body

HTTP 请求的 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。

4、HTTPS

4.一、做用

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

4.二、标准

HTTPS 的标准也是由 RFC 规定的查看详情

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

5、HTTP2

HTTP 2 是 HTTP 1.1 的升级版本查看详情

5.一、最大改进

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

我的总结

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