首页 > 云开发 > Css > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

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

Css

笔记说明
重学前端是程劭非(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、小实验
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=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 之后,是响应头,每行用冒号分隔的名称和值

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

3.2、HTTP Method(方法)
类型:GET、POST、HEADPUT、DELETE、CONNECT、OPTIONS、TRACE

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

2、表单提交产生 POST 方法

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

4、CONNECT 现在多用于 HTTPSWebSocket

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

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:表示请求的页面不存在。

418It’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 Body
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
HTTP 2 是 HTTP 1.1 的升级版本查看详情
5.1、最大改进

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

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

个人总结

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

文章来源:segmentfault,作者:凯小默。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索