浏览器的工做原理

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战html

浏览器的主要功能

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展现您选择的网络资源。这里所说的资源通常是指 HTML 文档，也能够是 PDF、图片或其余的类型。资源的位置由用户使用 URI（统一资源标示符）指定。html5

浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指定的。这些规范由网络标准化组织 W3C（万维网联盟）进行维护。web

浏览器的高层结构

浏览器的主要组件为 (1.1)：数据库

用户界面 - 包括地址栏、前进/后退按钮、书签等。除了浏览器主窗口的页面外，其余显示的各个部分都属于用户界面。
浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
渲染引擎 - 负责渲染请求的内容。若是请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
网络 - 用于网络调用，好比 HTTP 请求。
用户界面后端 - 用于绘制基本的窗口小部件，好比组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操做系统的用户界面方法。
JavaScript 解释器。用于解析和执行 JavaScript 代码。
数据存储。这是持久层。浏览器须要在硬盘上保存各类数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（可是轻便）的浏览器内数据库。

图：浏览器的主要组件。后端

值得注意的是，和大多数浏览器不一样，Chrome 浏览器的每一个标签页都分别对应一个渲染引擎实例。每一个标签页都是一个独立的进程。浏览器

渲染引擎

渲染引擎的做用嘛...固然就是“渲染”了，也就是在浏览器的屏幕上显示请求的内容。服务器

默认状况下，渲染引擎可显示 HTML 和 XML 文档与图片。经过插件（或浏览器扩展程序），还能够显示其余类型的内容；例如，使用 PDF 查看器插件就能显示 PDF 文档。可是在本章中只介绍其主要用途：显示使用 CSS 格式化的 HTML 内容和图片。markdown

主流程

呈现引擎一开始会从网络层获取请求文档的内容，内容的大小通常限制在 8000 个块之内。网络

而后进行以下所示的基本流程：框架

图：呈现引擎的基本流程。

呈现引擎将开始解析 HTML 文档，并将各标记逐个转化成“内容树”上的 DOM 节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于建立另外一个树结构：渲染树。

渲染树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。

渲染树构建完毕以后，进入“布局”处理阶段，也就是为每一个节点分配一个应出如今屏幕上的确切坐标。下一个阶段是绘制 - 渲染引擎会遍历渲染树，由用户界面后端层将每一个节点绘制出来。

须要着重指出的是，这是一个渐进的过程。为达到更好的用户体验，渲染引擎会力求尽快将内容显示在屏幕上。它没必要等到整个 HTML 文档解析完毕以后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其他内容的同时，渲染引擎会将部份内容解析并显示出来。

主流程示例

图：WebKit 主流程

图：Mozilla 的 Gecko 呈现引擎主流程 (3.6)

从图 3 和图 4 能够看出，虽然 WebKit 和 Gecko 使用的术语略有不一样，但总体流程是基本相同的。

Gecko 将视觉格式化元素组成的树称为“框架树”。每一个元素都是一个框架。WebKit 使用的术语是“呈现树”，它由“呈现对象”组成。对于元素的放置，WebKit 使用的术语是“布局”，而 Gecko 称之为“重排”。对于链接 DOM 节点和可视化信息从而建立呈现树的过程，WebKit 使用的术语是“附加”。有一个细微的非语义差异，就是 Gecko 在 HTML 与 DOM 树之间还有一个称为“内容槽”的层，用于生成 DOM 元素。咱们会逐一论述流程中的每一部分：

解析 - 综述

解析文档是指将文档转化成为有意义的结构，也就是可以让代码理解和使用的结构。解析获得的结果一般是表明了文档结构的节点树，它称做解析树或者语法树。是渲染引擎中很是重要的一个环节。

解析的过程能够分红两个子过程：词法分析和语法分析。

词法分析是将输入内容分割成大量标记的过程。标记是语言中的词汇，即构成内容的单位。在人类语言中，它至关于语言字典中的单词。

语法分析是应用语言的语法规则的过程。

解析器一般将解析工做分给如下两个组件来处理：词法分析器（有时也称为标记生成器），负责将输入内容分解成一个个有效标记；而解析器负责根据语言的语法规则分析文档的结构，从而构建解析树。

HTML 解析器

HTML 解析器的任务是将 HTML 标记解析成解析树。

HTML DTD

HTML 的定义采用了 DTD 格式。此格式可用于定义 SGML 族的语言。它包括全部容许使用的元素及其属性和层次结构的定义。

DTD 存在一些变体。严格模式彻底遵照 HTML 规范，而混杂模式可支持之前的浏览器所使用的标记。这样作的目的是确保向下兼容一些早期版本的内容。最新的严格模式 DTD 能够在这里找到：www.w3.org/TR/html4/st…

DOM

解析器的输出“解析树”是由 DOM 元素和属性节点构成的树结构。DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。
解析树的根节点是“Document”对象。

CSS 解析

和 HTML 不一样，CSS 是上下文无关的语法，可使用解析器进行解析。事实上，CSS 规范定义了 CSS 的词法和语法。

处理脚本和样式表的顺序

脚本

网络的模型是同步的。网页做者但愿解析器遇到

预解析

在执行脚本时，其余线程会解析文档的其他部分，找出并加载须要经过网络加载的其余资源。经过这种方式，资源能够在并行链接上加载，从而提升整体速度。请注意，预解析器不会修改 DOM 树，而是将这项工做交由主解析器处理；预解析器只会解析外部资源（例如外部脚本、样式表和图片）的引用。

样式表

理论上来讲，应用样式表不会更改 DOM 树，所以彷佛没有必要等待样式表并中止文档解析。但这涉及到一个问题，就是脚本在文档解析阶段会请求样式信息。若是当时尚未加载和解析样式，脚本就会得到错误的回复，这样显然会产生不少问题。Firefox 在样式表加载和解析的过程当中，会禁止全部脚本。而对于 WebKit 而言，仅当脚本尝试访问的样式属性可能受还没有加载的样式表影响时，它才会禁止该脚本。

渲染树构建

在 DOM 树构建的同时，浏览器还会构建另外一个树结构：渲染树。这是由可视化元素按照其显示顺序而组成的树，也是文档的可视化表示。它的做用是按照正确的顺序绘制内容。

渲染树和 DOM 树的关系

渲染器是和 DOM 元素相对应的，但并不是一一对应。非可视化的 DOM 元素不会插入渲染树中，例如“head”元素。若是元素的 display 属性值为“none”，那么也不会显示在渲染树中（可是 visibility 属性值为“hidden”的元素仍会显示）。

构建渲染树的流程

处理 html 和 body 标记就会构建渲染树根节点。这个根节点渲染对象对应于 CSS 规范中所说的容器 block，这是最上层的 block，包含了其余全部 block。它的尺寸就是视口，即浏览器窗口显示区域的尺寸。这就是文档所指向的渲染对象。渲染树的其他部分以 DOM 树节点插入的形式来构建。

样式计算

构建渲染树时，须要计算每个渲染对象的可视化属性。这是经过计算每一个元素的样式属性来完成的。

结构划分

样式上下文可分割成多个结构。这些结构体包含了特定类别（如 border 或 color）的样式信息。

使用规则树计算样式上下文

在计算某个特定元素的样式上下文时，咱们首先计算规则树中的对应路径，或者使用现有的路径。而后咱们沿此路径应用规则，在新的样式上下文中填充结构。咱们从路径中拥有最高优先级的底层节点（一般也是最特殊的选择器）开始，并向上遍历规则树，直到结构填充完毕。

布局

渲染器在建立完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排。

HTML 采用基于流的布局模型，这意味着大多数状况下只要一次遍历就能计算出几何信息。处于流中靠后位置元素一般不会影响靠前位置元素的几何特征，所以布局能够按从左至右、从上至下的顺序遍历文档。

坐标系是相对于根框架而创建的，使用的是上坐标和左坐标。

布局是一个递归的过程。它从根渲染器（对应于 HTML 文档的 <html> 元素）开始，而后递归遍历部分或全部的框架层次结构，为每个须要计算的呈现器计算几何信息。

根呈现器的位置左边是 0,0，其尺寸为视口（也就是浏览器窗口的可见区域）。

绘制

在绘制阶段，系统会遍历渲染树，并调用呈现器的“paint”方法，将渲染器的内容显示在屏幕上。绘制工做是使用用户界面基础组件完成的。

动态变化

在发生变化时，浏览器会尽量作出最小的响应。所以，元素的颜色改变后，只会对该元素进行重绘。元素的位置改变后，只会对该元素及其子元素（可能还有同级元素）进行布局和重绘。