程序员眼中的浏览器什么样子(浏览器底层工作那些事儿)

浏览器已经成为我每天都需要打交道的工具,然而对于这个我们的老朋友,即使一些 web 开发人员也对它的底层工作原理不是非常清楚,今天我们就来简单谈一谈浏览器的底层工作原理。

浏览器的主要功能

如果非要用一句话来概括浏览器的功能,那么浏览器就是一个请求资源,然后显示资源的软件。

这里的资源主要就是我们经常提到的 HTML,css,js,还有图片等。

浏览器共有的接口:

  • 地址栏
  • 前进后退按钮
  • 刷新按钮
  • 主页按钮
  • 收藏按钮

通过这些接口我们就基本掌握了浏览器的基本操作。

浏览器的架构

浏览器对外表现就是一个内容展示的容器,但是内部它却由很多组件组成。

  • 用户接口(我们前面提到的那些公用操作接口)
  • 浏览器引擎(UI 渲染引擎的封装)
  • 渲染引擎(负责显示请求的内容,根据 CSS 和 html 显示内容布局)
  • 网络引擎(负责 http 请求,负责网络管理)
  • UI 引擎(负责绘制基本 html 元素,比如下拉框,输入框等)
  • js 解析引擎(解析和执行 JavaScript 代码)
  • 数据存储引擎(存储 cookIE,localStorage,IndexedDB,websql 等数据)

其中渲染引擎可以说是最重要的一部分,它一般决定着用户看到网页的加载体验。

程序员眼中的浏览器什么样子(浏览器底层工作那些事儿)(1)

不同的浏览器使用不同的渲染引擎,之前的 IE 使用的是 Trident,Firefox 使用 Gecko,Chrome 使用 WebKit 等,目前现在基本都使用 Blink 引擎。

渲染引擎的工作流程大致是这样的。

首先它获取到请求到的内容,然后开始解析 html 结构,将它们转换成 dom 树,然后渲染引擎解析 css 样式,生成一个 css 树,最后,根据样式信息和 html 结构生成 render 树,我们称之为渲染树。

渲染树主要包含了颜色,尺寸等视觉信息。构建渲染树之后,渲染树的每个节点将会经历布局,找到在屏幕上的坐标。然后 UI 引擎会绘制各个节点。

渲染树的构建是渐进的,它会根据结构一点点处理,尽量在屏幕上快速显示部分内容。

对于解析它主要包括两部分,一部分是词法分析,一部分是语法分析。

词法分析,主要是按照词汇表进行分析标记,构建块的集合。

语法分析,主要是根据词法规则构建解析树的解析器。

HTML 解析

html 的标记和语法都是被定义好的,因此在解析的时候只要按照规则即可。

html 文档格式是 DTD,它是一个上下文无关的文档格式。它更加宽容,可以省略一些标记,因此解析器处理起来会很复杂。

程序员眼中的浏览器什么样子(浏览器底层工作那些事儿)(2)

dom 树是有 dom 元素和属性构成的树形结构。其中 dom 和 html 中间的标记是对应的。

<html> <body> <p> Hello World </p> <div> <img src="example.png"/> </div> </body> <html>

html 结构不能采用常规的自顶向下或者自底向上的解析器进行解析,因此它需要采用自定义的解析器进行解析,通过标记法和树构造进行解析。

例如,将初始状态标记为数据状态,然后从<开始进行标记,遇到问题 a-z 创建令牌,标记为 tag open 状态,直到遇到>,状态变回数据状态。

在创建解析器的时候,会创建文档对象,在解析树构造的时候,会向 dom 树添加元素。

标记法标记的节点会由解析树的构造函数进行处理。当元素被添加到 dom 树的时候,也会被添加到堆栈中。

程序员眼中的浏览器什么样子(浏览器底层工作那些事儿)(3)

在解析 dom 树的时候,js 引擎也会解析 js 脚本,dom 解析后,这些脚本会执行。

解析树是具有包容性的,当遇到一些错误的时候,它只会内部进行标记,并不会报错给用户。

css 解析

WebKit 引擎使用 Flex 和 Bison 解析器生成器从 CSS 语法文件自动创建解析器。Bison 创建了一个自底向上的 shift-reduce 解析器。每个 CSS 文件都被解析为一个样式表对象。每个对象都包含 CSS 规则。CSS 规则对象包含选择器和声明对象以及与 CSS 语法相对应的其他对象。

程序员眼中的浏览器什么样子(浏览器底层工作那些事儿)(4)

在之前的时候,web 模型是同步的,解析器需要获取资源,然后才能继续解析。目前是一个线程进行解析,一个线程用来获取文档剩下需要加载的资源文件。

构建渲染树需要计算每个渲染对象的视觉特性。这是通过计算每个元素的样式特性来完成的。该样式包括各种来源的样式表,内联样式和 html 中的视觉属性。

程序员眼中的浏览器什么样子(浏览器底层工作那些事儿)(5)

样式计算是非常复杂的,如果设计不佳的话,就会导致占用过多内存,因此很多浏览器采用通过添加规则树和上下文树来优化样式计算。

页面布局

在创建渲染器的时候,它没有位置和大小,然后我们需要计算它的位置和大小,这个过程被称为页面布局或者说叫做页面回流。

布局是一个递归过程,它从根渲染器开始,根据层次结构递归的遍历每个渲染器,然后计算它们的集合信息,最后布局它们。

程序员眼中的浏览器什么样子(浏览器底层工作那些事儿)(6)

布局分为全量布局和增量布局。所谓全量布局指的就是会影响所有渲染器的全局样式改变,比如字体改变。而增量布局指的是布局是异步完成的,渲染器通过触发器进行布局。

css 主要是通过盒子模型来布局。每个盒子都有一个内容区域和可选的周围区域,比如边框,边距。其中有些盒子是块状模型,有些是行内模型。

css 布局分为绝对定位和相对定位,绝对定位根据指定位置进行渲染,而相对定位则是根据其他元素的位置进行布局。

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页