「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」
从 url 到 页面的呈现：
- 浏览器通过 http 协议 or https 协议向服务端请求页面
- 解析请求到的 html 页面构建成 dom 树 🌲
- 根据 dom 树的 css 属性进行排版
- 渲染的到内存中的位图
- 对位图进行合成（可选）
- 绘制
⚠️注意：
- 从 http 请求回来，会产生流式数据，接下来将进入一条流水线
- 构建 dom 树 🌲 - 计算 css - 渲染 - 合成 - 绘制：流式处理前一步的产出（不用等上一步完全结束就可以处理开始处理上一步的输出，这也是为什么我们会看到页面是逐步出现的原因）
网络通讯——浏览器使用 HTTP 协议或者 HTTPS 协议，向服务端请求页面的过程
-
IETF 组织制定了 HTTP 标准 / HTTPS 标准
-
HTTP1.1 tools.ietf.org/html/rfc261…
-
HTTP1.1 tools.ietf.org/html/rfc723…
-
method 方法：
- get
- post
- head 只返回响应头
- put 修改
- delete 删除
- connect 多用于 https 和 websocket
- options 调试用
- trace 调试用
-
常见状态码
- 200 请求成功
- 301 永久性转移
- 302 临时性转移
- 304 客户端缓存未更新
- 403 无权限
- 404 请求不存在
- 500 服务端错误 ❌
- 503 服务端错误 稍后再试
-
请求头
- Accept 接受的格式
- Accept-Encoding 接收的编码方式
- Accept-Language 接受的语言
- Cache-Control 控制缓存的时效性
- Connection 连接方式（keep-alive 可复用）
- Host 域名
- If-Modified-Since 上次访问时的更改时间
- If-None-Match 上次访问时用的E-Tag（页面信息摘要）
- User-Agent 客户端标识
- Cookie 客户端存储的 cookie 字符串
-
响应头
- Cache-Control 缓存控制，各级缓存保存的时间
- Connection 连接类型
- Content-Encoding 内容编码方式（gzip）
- Content-Length 内容长度
- Content-Type 内容类型
- Date 服务器日期
- ETag 判断是否需要重新请求
- Expires 判断下次是否需要重新请求
- Keep-Alive 连接复用信息
- Last-Modified 上次修改的时间
- Server 服务端软件类型
- Set-Cookie 设置 cookie (可多个)
- Via 服务端请求链路（调试）
-
常见 body 格式
- application/json
- application/x-www-form-urlencoded （表单上传默认）
- multipart/form-data (文件上传默认)
- text/xml
-
https 标准 ： tools.ietf.org/html/rfc281…
-
作用：
- 确定请求的目标服务器身份
- 保证传输的数据不会被窃听 or 篡改
- https 通过加密通道来传输 http 内容（TLS 加密通道 —— 构建于 TCP 协议之上）
-
http2 （http1 的升级版本）：tools.ietf.org/html/rfc754…
-
支持服务端推送
-
支持 TCP 连接复用
-
如何解析请求回来的 HTML 代码
- 通过状态机把代码依次拆分成词（token）
- html.spec.whatwg.org/multipage/p…
<aa开始标签开始b=“xx”属性/>开始标签结束</aa>结束标签- ddddd 文本节点
<!-- 注释 -->注释<![CDATA[DDDDD!]]>CDATA 数据节点
DOM 树又是如何构建的
- 当前节点取栈顶元素
- 属性添加到当前节点
- 文本节点
- 当前节点为文本节点，合并
- 当前节点不是文本节点，入栈为当前节点的子节点
- 注释节点作为当前节点的子节点
- tag start 入栈作为父节点
- tag end 出栈（检查是否匹配）
浏览器是如何把 CSS 规则应用到节点上
- 空格：后代
>子代+直接后继，相邻下一个节点~后继，后面所有的相邻节点||列，表格中的列
排版
- 正常流中的文字
- 正常流中的盒模型
- 绝对定位元素
- 浮动元素
- flex
渲染
- 把每一个元素对应的盒变渲染为位图（html 元素、伪元素）
- 图形（盒的背景、svg、shadow 等）
- 文字（字体库）
- 子元素不会被渲染到位图上（可以减少重新渲染的成本）
合成
- 把一部分子元素渲染到合成的位图上（提高性能，减少绘制次数）
绘制
- 位图会知道屏幕上，成为可见的网页图像（操作系统）
了解浏览器工作原理，可以对我们的实际工作起到辅助的作用，比如性能优化，排查错误等方面都有很大用处。浏览器的知识还有很多，这里只是针对前端工作中用到的做了简短的介绍，小伙伴们如果有更多关于浏览器相关的见解，可以留下您宝贵的意见。
