Mochi

HTTP

Grid View
Sort
Filter
This is a published deck. Feel free look around, review cards, or make changes, but you'll need to clone it to save your progress.
从输入URL到页面显示
8

强缓存 V.S 协商缓存

两者的区别在于:

  • 是否需要 向服务器 验证本地缓存 是否有效

    • 强缓存 直接使用 本地缓存

    • 协商缓存则需 与服务器进行协商 后,确定是否使用本地缓存

New

什么是幂等性?

  • 在相同条件下,一次请求 和 重复多次 请求 对资源的影响一致的,则该操作 幂等

New

GET 和 POST的区别

区别有:(语义、缓存、编码、传参、幂等性)

  • 语义 角度:GET 用于获取资源,POST 用于上传资源

  • 缓存 角度:GET 请求会被浏览器 主动缓存,POST 不会;

  • 编码 角度:GET 必须对 URL 进行编码,POST 无限制;

  • 参数 角度:GET 参数直接暴露 在 URL 中,仅接受 ASCII 字符;POST 放在 请求体 中,且参数无限制,配合加密技术,更适合传输敏感信息;

  • 幂等性 角度:GET 是幂等的,POST 不是;

New
HTTP协议

网页内容的传输协议又叫做超文本传输协议(Hyper Text Transfer Protocol),简称HTTP协议

New
HTTP协议的交互模型

HTTP协议采用了 请求/响应 的交互模型

New
HTTP请求消息由

请求行(request linestart-line

请求头部(request headers

空行

请求体(request body

4个部分组成

New
请求行由

请求方式

URL

HTTP协议版本

3个部分组成,之间使用空格隔开

New
请求头部

用来描述 客户端基本信息,负责将客户端相关信息告知服务器

New

常见的请求头字段说明

New

HTTP请求消息-空行

New

HTTP请求消息-请求体

New
HTTP响应消息

响应消息就是 服务器响应给客户端的消息内容 ,也叫作响应报文,或者应答报文

New

HTTP响应消息-状态行

状态行是由

HTTP协议版本

状态码

状态码描述

3个部分组成,之间使用空格隔开

New
HTTP响应消息-响应头部

响应头部用来描述 服务器的基本信息

  • 响应头部由多行 键/值对 组成

  • 每行的键和值之间用英文的冒号分隔

New

常见的响应头字段

New
HTTP响应消息-空行

在最后一个响应头部字段结束之后,会紧跟一个空行,用来通知客户端 响应头部至此结束

New
HTTP响应消息-响应体

响应体中存放的,是服务器响应给客户端的资源内容

New

HTTP 请求方法,属于 HTTP 协议中的一部分

New

常用的HTTP的请求方法

GET

查询 用来 获取服务器上的资源,请求体中不包含请求数据,请求数据放在 请求头

New

不常用的HTTP的请求方法

HEAD

请求一个与 GET 请求的响应头部相同的响应,无需响应体

New
HTTP响应状态码

HTTP 响应状态码(HTTP Status Code),也属于 HTTP 协议的一部分,用来标识响应的状态

  • 响应状态码会随着响应消息一起被发送至客户端浏览器

  • 通过浏览器根据服务器返回的响应状态码,就能知道这次 HTTP 请求的结果是成功还是失败了

New

HTTP 状态码共分为 5 种类型

New

2xx成功相关的响应状态码

2** 范围的状态码,表示服务器已成功接收到请求并进行处理

New

3xx重定向相关的响应状态码

3** 范围的状态码,表示服务器要求客户端重定向,需要客户端进一步的操作以完成资源的请求

New

4xx客户端错误相关的响应状态码

4** 范围的状态码,表示客户端的请求有非法,即不合语法的内容,从而导致请求失败

New

5xx 服务端错误相关的响应状态码

5** 范围的状态码,表示服务器未能正常处理客户端的请求,而出现意外错误

New

可以一同记忆的状态码

206

Partial Content

表示 部分内容

成功状态响应代码表示请求已成功,并且主体包含所请求的 数据区间,该数据区间是在请求的 Range 首部指定的

New

DNS解析

DNS的域名查找,在客户端和浏览器,本地DNS之间的查询方式是 递归查询;在 本地DNS服务器* 与根域及其子域之间的查询方式是 迭代查询

New

用户输入 与 浏览器合成URL

  • 用户输入URL,浏览器首先判断用户输入的是 合法的URL 还是 搜索内容

  • 如果是 搜索内容,就将搜索内容 + 默认搜索引擎,合成新的URL,再加载

  • 如果 内容符合URL规则,浏览器就会根据URL协议,在这段内容上 协议,合成合法的URL,如果是合法的URL就开始进行加载

New

页面渲染

  1. 渲染进程将开始 页面解析,并加载子资源,比如图片

  2. 构建DOM树 :HTML经过解析后输出的是一个以 document 为顶层节点的树状结构的DOM

  3. 样式计算 (构建CSS树) :将从link标签引入的外部样式,style标签里的样式 和 元素身上的样式转换成浏览器能够理解的 样式表,然后将样式表中的属性值进行标准化,例如 color:red 转换为 rgb 形式,然后根据CSS的继承和层叠规则计算出DOM树种每个节点的具体样式

  4. 合成布局阶段(将DOM树 与 CSS树 合成布局树) :会生成一棵只包含可见元素的布局树,然后根据布局树的每个节点,计算出其具体位置和大小

  5. 分层:对页面种的复杂效果,例如3D转换,页面滚动或者z轴排序等生成图层树

  6. 绘制:为每个图层生成绘制列表,并将其提交到合成线程中

  7. 光栅化:优先选择可视窗口内的图块来生成位图数据

  8. 显示:所有图块都被光栅化之后,开始显示页面

New

提交文档

  • 渲染进程准备好之后,浏览器会发出提交文档的消息给渲染进程

    • 渲染进程收到消息后,会和网络进程建立数据传输的管道

    • 文档数据传输完成后,渲染进程会返回确认提交的消息给浏览器进程

  • 浏览器收到确认提交的消息后,会更新浏览器的页面状态

    • 包括了安全状态,地址栏的URL,前进后退的历史状态,并更新web页面为空白

New

准备渲染进程

  • 网络进程将获取的数据进行解析

    • 根据响应头中的Content-type来判断响应数据的类型

      • 如果是字节流类型,就将该请求交给下载管理器去下载

      • 如果是text/html类型,就通知浏览器进程获取到的是HTML,准备渲染进程

  • 一般情况下浏览器的一个tab页面对应一个渲染进程

    • 如果从当前页面打开的新页面并且属于同一站点,这种情况会复用渲染进程

    • 其他情况则需要创建新的渲染进程

New
  • 构建请求行:浏览器进程首先会构建 请求行信息,后通过进程间通信IPC将URL请求发送给 网络进程

  • 查找缓存:网络进程获取到URL后,会先去 本地缓存 中查找是否有缓存资源

    • 如果有则直接将缓存资源返回给浏览器进程

    • 否则进入 网络请求阶段

  • DNS解析:网络进程请求首先会从 DNS数据缓存 服务器中查找是否缓存过当前域名的信息

    • 有则直接返回,否则,会进行 DNS解析域名 对应的IP和端口号

  • 等待TCP队列:chrome机制,同一个域名同时最多只能建立 6个 TCP连接

    • 如果超过这个数量的连接必须要进入 排队等待状态

  • 建立TCP连接:通过TCP三次握手与服务器建立连接,然后进行数据传输

  • 发起HTTP请求:浏览器首先会向服务器发送请求行

    • 请求行中包含了 请求方法、请求URI和HTTP版本,还会发送请求头

    • 告诉服务器一些浏览器的相关信息,比如浏览器内核、请求域名、Cookie等信息

  • 服务器处理请求:服务器首先返回响应行,包括 协议版本和状态码

    • 在返回响应头中,包含返回的数据类型,服务器要在客户端保存的Cookie等

  • 断开TCP连接:数据传输完成后,通过四次挥手来断开连接

New

满分回答之从输入URL到页面显示经历了什么

  • 用户输入 -> 合成URL -> DNS域名解析

  • 建立TCP连接 -> 发起 HTTP 请求 (服务器处理请求,返回相应结果)

  • 关闭TCP连接

  • 准备渲染进程

  • 提交文档

  • 页面渲染

New
Keyboard shortcuts
Press
?
to toggle this panel.
Markdown formatting
You can format text using markdown.
H1
# Heading 1
H2
## Heading 2
H3
### Heading 3
New Side
---
Shift
Bold
**bold**
Ctrl
b
Italic
_italic_
Ctrl
i
Strikethrough
~~strikethrough~~
Highlight
==highlighted text==
Link
[link text](my-site.com)
https://my-site.com
Reference
[[card title|id]]
[[id]]
[[id:embed]]
@
Media
![media title](Media URL)
Ctrl
o
List
- list item
Ctrl
.
Ordered List
1. list item
Quote
> quote
Definition List
term : definition
Ctrl
d
Hidden text
{{cloze text}}
Ctrl
l
Code
`code`
Code Block
```code block```
Inline Latex
$\LaTeX$
Display Latex
$$ \LaTeX $$
Superscript
20^th^
Subscript
H~2~0
Ruby characters
{振り仮名}(ふがな)
Tag
#my-new-tag
Editor
These shortcuts are usable within the editor.
Save and exit
Ctrl
Enter
Exit without saving
Esc
Open reference
Ctrl
Click
New card (from selection)
Ctrl
n
Deck page
These shortcuts are usable on the deck page.
Add a card
n
Review cards that are due
r
Learn new cards
l
List view (select mode)
Shortcuts to move around, select, and edit cards on the list view.
Move selection
j
k
Move card up
Ctrl
k
/
Ctrl
Move card down
Ctrl
j
/
Ctrl
Cancel selection
Esc
Edit card
e
Preview card
Space
Delete card
d
Notebook view (select mode)
Shortcuts to move around, select, and edit cards on the notebook view.
Move selection
j
k
Move card up
Ctrl
k
/
Ctrl
Move card down
Ctrl
j
/
Ctrl
Cancel selection
Esc
Edit card
e
Preview card
Space
Delete card
d
Notebook view (edit mode)
Shortcuts to use while editing a card in notebook view.
Add a new side
Ctrl
-
Split card at cursor
Ctrl
Shift
Save and add a new card
Ctrl
Save and finish editing.
Esc
Deck page (column view)
Shortcuts to move around, select, and edit cards on the column view.
Move selection
j
k
Move card up
Ctrl
k
/
Ctrl
Move card down
Ctrl
j
/
Ctrl
Cancel selection
Esc
Edit card
e
Delete card
d
Review / Learn page
These shortcuts are usable on the review or 'learn new cards' pages.
Show next side of card
Space
j
Hide last side
k
Mark as "remembered"
Space
Skip sides and mark as "remembered"
Shift
Space
Mark as "forgot"
f
Archive card
a
Toggle Reverse Reviews
v
Edit card
e
Delete card
d
Replay audio
r
Pause/play audio
p
Miscellaneous
Various other shortcuts.
Exit modal
Esc
Save editor
Ctrl
Show this panel
?