浏览器原理 - 《浏览器结构组件 / 渲染引擎工作流程webkit / Gecko》

浏览器的主要构成(Main Composition of Browser)

用户界面(User Interface): 包括地址栏、后退/前进按钮、书签目录等,除了用来显示你所请求页面的主窗口之外的其他部分。
浏览器引擎(Browser engine): 查询及操作渲染引擎的接口。
渲染引擎(Rendering engine): 显示请求的内容,根据请求内容进行解析,并将解析后的结果显示出来。
网络(Networking): 完成网络调用,例如 HTTP 请求,它具有平台无关的接口,可以在不同平台上工作。
UI后端(UI Backend): 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口。
JS解释器(JavaScript Interpreter): 用来解释执行并执行 JavaScript 代码。
数据层(Data Persistence): 属于持久层,浏览器需要在硬盘中保存类似 cookie 的各种数据。

在这里插入图片描述
图解:

用户界面(User Interface) 加载完毕后,浏览器引擎(Browser engine) 查询并操作渲染引擎的接口,渲染引擎(Rendering engine) 负责解析并渲染 网络(Networking) / JS解释器(JavaScript Interpreter) / UI后端(UI Backend),这时已经完成了页面的显示。

需要注意的是,UI后端不仅仅被渲染引擎解析渲染出来,它也被用户界面时刻监听并在特定接口操作的情况下显示这些组件。

还有,浏览和操作页面时,浏览器引擎也会时刻监听所产生符合保存规则的数据,并由数据层(Data Persistence) 接收并存储。

  1. Chrome不同于大部分浏览器,因为它为每个 Tab 页分配了独立的渲染引擎实例,每个 Tab 都是独立的进程,所以Chrome页面渲染速度非常快,从数据结构与算法角度来看,谷歌选择用空间换取时间。
  2. 然而大部分浏览器不会为每个 Tab 页分配独立的渲染引擎实例,而是所有页面共用一个渲染引擎实例,从数据结构与算法角度来看,大部分浏览器选择用时间换取空间。
    在这里插入图片描述

渲染引擎工作流程(The rendering engine)

渲染引擎的职责就是渲染,即在浏览器窗口中显示所请求的内容。默认情况下,渲染引擎可以显示 html、xml 文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据,例如使用 PDF 阅读器插件, 可以显示 PDF 格式,将由专门一章讲解插件及扩展,这里只讨论渲染引擎最主要的用途——显示应用了 CSS 之后的 html 及图片。

本文所讨论的浏览器——Firefox、Chrome 和 Safari 是基于两种渲染引擎构建的,Firefox 使用 Geoko——Mozilla 自主研发的渲染引擎,Safari 和 Chrome 都使用 webkit。

渲染引擎又称为浏览器内核,浏览器核心技术,前端工程师必须了解并运用渲染特性做出更好的用户体验。

(1)渲染主流程(The main flow)

首先,渲染引擎通过网络获得所请求文档的内容,通常以 8K 分块的方式完成,如图所示:
在这里插入图片描述
然后,渲染引擎在取得内容之后的基本流程,如图所示:
在这里插入图片描述

【解析 HTML 以构建 DOM 树】  ——>  【构建 render 树】  ——> 【 布局 render 树】  ——>  【绘制render 树】

图解:

【解析 HTML 以构建 DOM 树】
首先,渲染引擎开始解释 HTML,并将标签转化为内容树中的 DOM 节点。

【构建 render 树】
然后,解析外部 CSS 文件及Style 标签中的样式信息,这些样式信息以及 HTML 中的可见性指令将被用来构建另一棵树,即render 树。

【布局 render 树】
再然后,render 树由一些包含有颜色和大小等属性的矩形组成,它们将被按照正确的顺序显示到屏幕上,紧接着执行布局过程,它将确定每个节点在屏幕上的确切坐标。

【绘制render树】
最后,遍历 render 树,并使用 UI后端 层绘制出每个节点。

整个过程逐步完成,但为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕,并不会等到所有 HTML 全部解析完毕之后再去构建和布局 render 树,简单来说,它是解析完一部分内容就显示一部分内容,同时可能还在通过网络下载其余未解析的内容。

(2)webkt内核渲染主流程:
在这里插入图片描述
图解:

HTML 文件 放入 HTML分析程序(HTML Parser) ,构建出 DOM树(DOM Tree)

与此同时, CSS文件 放入 CSS分析程序(CSS Parser) ,构建出 样式规则(Style Rules)

DOM树(DOM Tree) / 样式规则(Style Rules) 放入 附件(Attachment)

附件(Attachment) 放入 渲染树(Render Tree) ,渲染树执行时,与此同时也再执行 布局(Layout)

渲染树(Render Tree) / 布局(Layout) 放入 绘画(Painting),最后完成 显示(Display)

(3)Gecko内核渲染主流程:
在这里插入图片描述
图解:

HTML 文件 放入 HTML分析程序(Parser) ,并放入 内容接收器(Content Sink)

内容接收器(Content Sink) 查找 CSS文件 ,并放入 CSS分析程序(CSS Parser)

内容接收器(Content Sink) / CSS分析程序(CSS Parser),分别放入 内容模型(Content Model) / 样式规则(Style Rules)

内容模型(Content Model) / 样式规则(Style Rules) 放入 框架构造函数(Frame Constructor)

框架构造函数(Frame Constructor) 放入 框架树(Frame Tree)

框架树(Frame Tree) / 回流(Reflow) 放入 绘画(Painting),最后完成 显示(Display)

webkit / Gecko——总结:

  1. Gecko 称可见的格式化元素组成的树名为 frame 树,每个元素都是一个 frame,webkit 则使用 render 树这个名词来命名由渲染对象组成的树。webkit 中元素的定位称为布局,而 Gecko 则称为回流。webkit 称利用 DOM 节点及样式信息去构建 render 树的过程称为附件,Gecko 在 HTML 和 DOM 树之间附加了一层,这层称为内容接收器,相当于制造 DOM 元素的工厂。
  2. 尽管 webkit / Gecko 渲染流程与术语稍有不同,但它们主要流程基本相同。

Detailed description of each process

  1. XXXX:URL
  2. XXXX:URL
  3. XXXX:URL
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页