摘要：紧跟在后面的是请求头，每行用冒号分隔名称和值按下两次回车，收到服务端回复响应部分第一行被称作，它也分为三个部分，协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的，原因是的状态被浏览器库直接处理掉了，不会让上层应用知晓。
笔记说明
重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天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：https://tools.ietf.org/html/rfc2616
2）、HTTP1.1：https://tools.ietf.org/html/rfc7234
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=15768000301 Moved Permanently 301 Moved Permanently
openresty
第一行被称作 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 的一个愚人节玩笑。（超文本咖啡壶控制协议）
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 BodyHTTP 请求的 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 规定的查看详情
HTTPS 是使用加密通道来传输 HTTP 的内容。
HTTPS首先与服务端建立一条 TLS 加密通道。
TLS 构建于 TCP 协议之上，它实际上是对传输的内容做一次加密，所以从传输内容上看，HTTPS 跟 HTTP 没有任何区别。
五、HTTP2HTTP 2 是 HTTP 1.1 的升级版本查看详情5.1、最大改进
1、支持服务端推送：服务端推送能够在客户端发送第一个请求到服务端时，提前把一部分内容推送给客户端，放入缓存当中，这可以避免客户端请求顺序带来的并行度不高，从而导致的性能问题。
2、支持 TCP 连接复用：TCP 连接复用，则使用同一个 TCP 连接来传输多个 HTTP 请求，避免了 TCP 连接建立时的三次握手开销，和初建 TCP 连接时传输窗口小的问题。
个人总结这一部分的知识对我们排查api问题很有帮助，理解http的一些知识，能帮助我们更好的理解前后端的通讯，接下来winter会继续讲解浏览器是怎样工作的后续阶段。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114593.html
摘要：紧跟在后面的是请求头，每行用冒号分隔名称和值按下两次回车，收到服务端回复响应部分第一行被称作，它也分为三个部分，协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的，原因是的状态被浏览器库直接处理掉了，不会让上层应用知晓。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要...
摘要：紧跟在后面的是请求头，每行用冒号分隔名称和值按下两次回车，收到服务端回复响应部分第一行被称作，它也分为三个部分，协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的，原因是的状态被浏览器库直接处理掉了，不会让上层应用知晓。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要...
摘要：二选择器的基本意义根据一些特征，选中元素树上的一批元素。四伪类选择器树结构关系伪类选择器伪类表示树的根元素。伪类表示没有子节点的元素。表示焦点落在这个元素之上。用于选中浏览器的部分所指示的元素。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入wint...
摘要：二选择器的基本意义根据一些特征，选中元素树上的一批元素。四伪类选择器树结构关系伪类选择器伪类表示树的根元素。伪类表示没有子节点的元素。表示焦点落在这个元素之上。用于选中浏览器的部分所指示的元素。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入wint...
阅读 1532·2021-11-02 14:42
阅读 2286·2021-10-11 10:58
阅读 582·2021-09-26 09:46
阅读 2889·2021-09-08 09:35
阅读 1374·2021-08-24 10:01
阅读 1212·2019-08-30 15:54
阅读 3582·2019-08-30 15:44
阅读 1777·2019-08-30 10:49
