资讯专栏INFORMATION COLUMN

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

alighters / 390人阅读

摘要:紧跟在后面的是请求头,每行用冒号分隔名称和值按下两次回车,收到服务端回复响应部分第一行被称作,它也分为三个部分,协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的,原因是的状态被浏览器库直接处理掉了,不会让上层应用知晓。

笔记说明

</>复制代码

  1. 重学前端是程劭非(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 协议是一条双向的通讯通道,HTTPTCP 的基础上,规定了 Request-Response 的模式。这个模式决定了通讯必定是由浏览器端首先发起的。

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

2.1.2、小实验

</>复制代码

  1. winter用一个纯粹的 TCP 客户端来手工实现 HTTP,实验需要使用telnet客户端

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

</>复制代码

  1. telnet time.geekbang.org 80

2、TCP 连接已经建立,输入下面字符作为请求(请求部分)

</>复制代码

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

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

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

3、按下两次回车,收到服务端回复(响应部分)

</>复制代码

  1. HTTP/1.1 301 Moved Permanently
  2. Date: Fri, 25 Jan 2019 13:28:12 GMT
  3. Content-Type: text/html
  4. Content-Length: 182
  5. Connection: keep-alive
  6. Location: https://time.geekbang.org/
  7. Strict-Transport-Security: max-age=15768000
  8. 301 Moved Permanently
  9. 301 Moved Permanently


  10. openresty

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

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

三、HTTP 协议格式 3.1、HTTP协议划分

3.2、HTTP Method(方法)

</>复制代码

  1. 类型:GET、POST、HEADPUT、DELETECONNECT、OPTIONS、TRACE

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

2、表单提交产生 POST 方法

3、PUTDELETE 分别表示添加资源和删除资源

4、CONNECT 现在多用于 HTTPSWebSocket

5、OPTIONSTRACE 一般用于调试,多数线上服务都不支持

3.3、 HTTP Status code(状态码)和 Status text(状态文本) 3.3.1、1xx

</>复制代码

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

</>复制代码

  1. 2xx 系列的状态最熟悉的就是 200,这通常是网页请求成功的标志
3.3.3、3xx

</>复制代码

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

301&302:永久性与临时性跳转。

304:跟客户端缓存没有更新。

3.3.4、4xx

</>复制代码

  1. 客户端请求错误。

403:无权限。

404:表示请求的页面不存在。

418It’s a teapot. 这是一个彩蛋,来自 IETF 的一个愚人节玩笑。(超文本咖啡壶控制协议)

3.3.5、5xx

</>复制代码

  1. 服务端请求错误。

500:服务端错误。

503:服务端暂时性错误,可以一会再试。

3.4、HTTP Head (HTTP 头) 3.4.1、Request Header

3.4.2、Response Header

3.5、HTTP Request Body

</>复制代码

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

常见的 body 格式是:

application/json

application/x-www-form-urlencoded

multipart/form-data

text/xml

1、使用 htmlform 标签提交产生的 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 没有任何区别。

五、HTTP2

</>复制代码

  1. HTTP 2 是 HTTP 1.1 的升级版本查看详情
5.1、最大改进

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

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

个人总结

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110211.html

相关文章

  • 重学前端学习笔记)--览器工作解析

    摘要:紧跟在后面的是请求头,每行用冒号分隔名称和值按下两次回车,收到服务端回复响应部分第一行被称作,它也分为三个部分,协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的,原因是的状态被浏览器库直接处理掉了,不会让上层应用知晓。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要...

    paulli3 评论0 收藏0
  • 重学前端学习笔记)--览器工作解析

    摘要:紧跟在后面的是请求头,每行用冒号分隔名称和值按下两次回车,收到服务端回复响应部分第一行被称作,它也分为三个部分,协议和版本状态码和状态文本。对前端来说系列的状态码是非常陌生的,原因是的状态被浏览器库直接处理掉了,不会让上层应用知晓。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要...

    付永刚 评论0 收藏0
  • 重学前端学习笔记(二)--如何选中svg里的a元素?

    摘要:二选择器的基本意义根据一些特征,选中元素树上的一批元素。四伪类选择器树结构关系伪类选择器伪类表示树的根元素。伪类表示没有子节点的元素。表示焦点落在这个元素之上。用于选中浏览器的部分所指示的元素。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入wint...

    jemygraw 评论0 收藏0
  • 重学前端学习笔记(二)--如何选中svg里的a元素?

    摘要:二选择器的基本意义根据一些特征,选中元素树上的一批元素。四伪类选择器树结构关系伪类选择器伪类表示树的根元素。伪类表示没有子节点的元素。表示焦点落在这个元素之上。用于选中浏览器的部分所指示的元素。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入wint...

    CloudwiseAPM 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<