🚀
头像

六扇有伊人


博学多才的六扇老师

浏览器深入了解

2023-03-18 11:56:53 264 💗 0 @六扇有伊人

浏览器的渲染原理?

渲染就是经过一系列复杂的加载把代码变成网页格式,从输入url摁下到渲染页面重点就俩块

一块:网络:拿到HTML

一块:渲染(render):渲染

网络进程拿到HTML之后会包装成任务,并将其传递给渲染主线程的消息队列,在事件循环机制的作用下,渲染主线程取出渲染任务开始渲染流程

渲染流程

整个渲染流程分为多个阶段,分别是:解析HTML,样式计算,布局,分层,绘制,分块,光栅化,画

每个阶段都有明确的输入输出,上一个阶段的输出会成为下一阶段的输入,这样整个渲染流程就形成了一套严密的生产流水线

解析 HTML ---- Parse HTML

parse HTML 会产生两个可以操作的对象结构,分别是 DOM 树 和 CSSOM 树

解析过程中,为了提高解析效率,浏览器在开始解析前,会启动一个预解析的线程,预解析器,来率先下载 HTML 中的 css 文件,和 js 文件

如果主线程解析到 link 位置,此时外部的 css 文件 还没下载好,主线程不会等待,会继续解析后续的 HTML

如果主线程解析到 script 位置,会停止解析 HTML 等待 js 文件下载好,并将全局的代码解析执行完成之后,才继续解析 HTML,因为 js 代码执行过程中可能会修改当前的 dom 树,所以 dom 树的生成必须暂停

完成之后,得到完整的 DOM 和 CSSOM


样式计算--Computed Style

计算出每个 DOM 节点的最终样式,结合。Computed Style

在这一过程中,很多预设值会变成绝对值,比如red会变成red(255,0,0),相对单位会变成绝对单位,比如 em 变成 px,这一步完成之后会得到一棵带有样式的 DOM 树


布局--Layout

布局完成后会得到布局树 Layout 树

布局会依次遍历 DOM 树上的每一个节点,计算每个节点的几何信息,比如节点的宽高,相对包含块的位置

大部分的时候 DOM 树和布局树并非 一 一对应,比如 display:none 的节点几乎没有几何信息,因此他不会生成布局树,比如伪元素,虽然 DOM 树中不存在这些伪元素节点但他们拥有几何信息


分层-Layer:

主线程会使用一套复杂的策略对整个布局树中进行分层

分层的好处:对将来的某一个层改变后,仅会对该层进行后续的处理,提升效率

滚动条,堆叠上下文,teansform,等样式都会影响分层结果

绘制-paint:

主线层会为每个单独产生绘制令集,用于描述这一层的内容该如何画出来

分块-Tiling:

完成绘制后,主线程将每个土城的绘制信息提交给合成线程,剩余的工作将由合成线程完成,合成线程首先对每个图层进行分块,将其划分为更多的小区域,他会从线程池中拿去多个线程来完成分块工作

光栅化-Raster:

光栅化就是将每个块变成位图,优先处理靠近视口的块

合成线程会将块信息交给 CPU 进程,以极高的速度完成光栅化, CPU 进程会开启多过分线程来完成,并优先处理靠近视口区的块

画-draw:

合层线程拿到每个层,每个块的位图后,生成一个个【指引 quad】信息

指引会标识出每个图应该画到屏幕的哪个位置,会考虑旋转,缩放等变形,变形发生在合成线程,与渲染线程无关

合成线程会把 quad 提交给 cpu 进程,由 cpu 进程产生系统调用,提交给 cpu 硬件,完成最终的屏幕成像

面试题:什么是reflow?

当我们修改操作影响到几何信息,修改到布局的时候,浏览器需要从新排版,这个过程叫reflow

reflow,本质就是重新计算 布局树 Layout

为了避免连续多次操作导致布局反复计算,浏览器会合并这些操作,当js代码全部完成后再进行统一计算,所以改动属性造成的 reflow 是异步的

什么是 repaint ?

是重新根据分层信息计算了绘制指令,当改变了可见样式之后,就需要重新计算,引发 repaint 由于元素布局也属于可见样式所以 reflow 一定会引发 repaint

为什么 transform效率更高?

因为 transform 既不会影响布局,也不会影响绘制指令,它影响的只是最后一个 draw 阶段

draw 阶段在合成线程中,所以transform 的变化不会影响到渲染主线程






















    目录导航