《浏览器原理》学习笔记Day45

发布于:2023-03-12 ⋅ 阅读:(0) ⋅ 点赞:(0)

HTTP请求流程

  • HTTP是一种允许浏览器向服务器获取资源的协议,是Web的基础。
  • 浏览器端发起HTTP请求流程

    1. 构建请求

      1. 首先,浏览器构建请求行信息,构建好后,浏览器准备发起网络请求。
    2. 查找缓存

      1. 在真正发起网络请求之前,浏览器会先在浏览器中查询是否有要请求的文件。如果缓存查找失败,就会进入网络请求过程了。
      2. 好处:
      1. 缓解服务器压力,提升性能(获取资源的耗时更短了)
      2. 对于网站来说,缓存是实现快速资源加载的重要组成部分。
    3. 准备IP和端口

      1. 第一步浏览器会请求DNS返回域名对应的IP。如果某个域名解析过了,浏览器会缓存解析的结果,以供下次使用。拿到IP之后,接下来就需要获取端口号。通常没有特别指明端口号,那么HTTP协议默认是80端口。
    4. 等待TCP队列

      1. 同一个域名同时最多只能建立6个TCP连接。
    5. 建立TCP连接

      1. 排队等待结束之后,终于可以和服务器握手了。- TCP连接
    6. 发送HTTP请求

      1. 首先浏览器会向服务器发送请求行,包括请求方法,请求URL,HTTP版本协议
      1. 如果是POST方法,浏览器还要准备数据发送给服务器,这里准备的数据通过请求体发送

        1. 发送请求行之后,还需要发送请求头,携带浏览器的一切基础信息。
  • 服务器端处理HTTP请求

    1. 返回请求

      1. 首先是返回响应行,包含协议版本和状态码
      2. 随后服务器会随同相应返回响应头。包含服务器自身信息。
      3. 发送完响应头后,服务器就可以继续发送响应体数据。
    2. 断开连接

      1. 通常情况下,一旦服务器向客户端返回了请求数据,他就要关闭TCP连接。
      2. 如果浏览器或者服务器在头信息中添加了Connection:keep-Alive,那么TCP连接会在发送后让然保持打开状态。
    3. 重定向

      1. 响应行的状态码为301,告诉浏览器要重定向到另一个网址。
      2. 需要重定向的网址包含在响应头中的Location字段中。

导航流程

用户发出的URL请求到页面解析的这个过程,就叫做导航。

  • 从输入URL到页面展示

    1. 用户输入

      1. 浏览器先判断是搜索内容还是请求的URL
      2. beforeunload
    2. URL请求过程

      1. 浏览器通过进程间通讯(IPC)把URL内容发给网络进程
      2. 网络进程发起请求流程
      1. 查找缓存
      2. DNS解析
      3. 建立TCP连接[,https建立TSL连接]
      4. 构造请求

        1. 重定向
      5. 在导航过程中,如果服务器响应行的状态码包含301、302一类跳转信息,浏览器会跳转到新的地址继续导航;如果响应行的状态码是200,那么表示浏览器可以继续处理该请求。

        1. 响应数据类型处理
      6. Content-Type是HTTP中一个非常重要的字段,他告诉浏览器服务器返回的响应体数据是什么类型,然后浏览器根据Content-Type的值来决定如何显示响应体的内容
      7. 如果是下载类型,该请求会提交给下载管理器,同时该URL的导航流程就此结束。
      8. 如果是HTML,那么浏览器会继续导航流程
    3. 准备渲染进程

      1. 默认情况下,浏览器会为每个页面分配一个渲染流程
      2. 如果是从一个站点打开另一个站点,而新页面与当前页面属于同一站点(根域名加上协议,还包含该域名下所有子域名和不同端口),那么新页面就会复用父页面的渲染流程。
    4. 提交文档

      • 浏览器进程将网络进程接收到的HTML数据交给渲染流程
      • 流程:
      1. 首先浏览器进程收到网络进程的响应头数据,便向渲染流程发起“提交文档”的消息
      2. 渲染流程收到“提交文档”的消息后,会和网络进程建立传输数据的“通道”
      3. 等文档数据传输完成后,渲染流程会返回“确认文档”的消息给浏览器进程
      4. 浏览器进程在收到“确认文档”的消息后,会更新浏览器界面状态,包括安全状态、地址栏的URL、前进后退的历史状态,并更新Web页面
    5. 渲染阶段

      1. 一旦文档被提交,渲染流程便开始页面解析和子资源加载了

渲染流程

  1. 构建DOM树

    1. 将HTML转换为浏览器能够理解的结构--- DOM树
    2. DOM是保存在内存中树状结构
  2. 样式计算

    1. 将css文本转换为浏览器能够理解的结构---styleSheets
    2. 转换样式表中的属性值,使其标准化
    3. 计算DOM树中每个节点的具体样式
    1. CSS继承:每个DOM节点都包含父节点的样式
    2. 样式层叠(核心):定义了如何合并来自多个源的属性值的算法。
  3. 布局阶段

    - 计算出DOM树中可见元素的几何位置
    1. 创建包含可见元素布局树
    2. 布局计算
    3. 分层
    • 渲染引擎为特殊的节点生成专用的图层,并合成一颗对应的图层树
    • 并不是每个节点都包含一个图层,如果一个节点没有对应的层,那么这个节点就从属于父节点的图层
    • 拥有层叠上下文属性的元素会被提升为单独的图层
    • 需要被剪裁(clip)的地方也会创建为图层

      1. 图层绘制
    • 渲染引擎会将一个图层绘制拆分成很多小的绘制指令,然后再把这些指令按照顺序生成组成一个待绘制列表

      1. 栅格化(raster)操作
    • 合成线程会按照视口(viewport)附近的图块来优先生成位图,实际生成位图的操作是由栅格化来执行的。所谓栅格化,就是将图块转换为位图。
    • 栅格化的过程都会使用GPU来加速生成,使用GPU生成位图的过程叫快速栅格化或GPU栅格化,生成为位图保存在GPU中。

      1. 合成和展示
    • 一旦所有的图块被光栅化,合成线程就会生成一个绘制图块指令---"DrawQuad",然后将该命令提交给浏览器进程。
    • 浏览器进程里面有一个叫viz的组件,用来接收合成线程发过来的"DrawQuad"指令,然后根据DrawQuad指令,将其页面内容绘制到内存,然后将内存展示在屏幕上。

      • 重排
    • 更新了元素的几何位置
    • 重排需要更新完整的渲染流水线
    • 内存消耗是最大的

      • 重绘
    • 更新了元素的绘制属性
    • 省去了布局和分层阶段,执行效率比重排要高一些

      • 合成
    • 直接合成阶段
    • 相对于重绘和重排,合成能大大提高绘制效率
此文章为3月Day1学习笔记,内容来源于极客时间《浏览器原理》,学习使我快乐,每天进步一点点💪💪

网站公告

欢迎关注微信公众号 关注公众号领取新人福利

今日签到

点亮在社区的每一天
去签到