浏览器渲染原理及流程

时间 2019-11-06

标签浏览器渲染原理流程栏目浏览器繁體版

原文原文链接

现代浏览器的组成

浏览器能够分为两部分：shell和浏览器内核，shell是外壳，如工具栏，菜单等，内核是根本，是基于标记语言显示的程序或模块。css

浏览器内核分为两部分：渲染引擎和JS引擎。html

渲染引擎前端

渲染引擎主要负责解析浏览器所呈现的内容，好比HTML,CSS。渲染引擎的主要流程git

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

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

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

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

Gecko渲染引擎以下图：

浏览器的结构

一、用户界面。包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其余显示的各个部分都属于用户界面。后端

二、浏览器引擎。在用户界面和呈现引擎之间传送指令。浏览器

三、呈现引擎。负责显示请求的内容。若是请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。bash

四、用户界面后端。用于绘制基本的窗口小部件，好比组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操做系统的用户界面方法。

五、JavaScript 解释器。用于解析和执行 JavaScript 代码。

六、数据存储。这是持久层。浏览器须要在硬盘上保存各类数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（可是轻便）的浏览器内数据库。

七、网络。用于网络调用，好比 HTTP 请求。其接口与平台无关，并为全部平台提供底层实现

关于DOM解析

有以下HTML片断

<html>
<head>
<title>Web page parsing</title>
</head>
<body>
<div>
    <h1>Web page parsing</h1>
    <p>This is an example Web page.</p>
</div>
</body>
</html>
复制代码

关于CSS解析

<title>A few quotes</title>
<para>
 Franklin said that <quote>"A penny saved is a penny earned."</quote>
</para>
<para>
 FDR said <quote>"We have nothing to fear but <span>fear itself.</span>"</quote>
</para>
</doc>
复制代码

CSS样式以下：

/* rule 1 */ doc { display: block; text-indent: 1em; }

/* rule 2 */ title { display: block; font-size: 3em; }

/* rule 3 */ para { display: block; }

/* rule 4 */ [class="emph"] { font-style: italic; }
复制代码

解析成CSS tree

注意：CSS遍历DOM，一层层找到对应的渲染规则是十分复杂的过程，这也是咱们常常要求尽可能精简DOM结构，减小CSS嵌套层级的缘由。

CSS渲染流程

一、计算CSS属性；二、构建Render Tree；三、Layout，进行定位，元素的坐标及尺寸，将元素放到指定位置；四、绘制

注意：图中有两种箭头，一种是指向流程自身的，表示“回流”，即修改某个属性会致使页面进行从新渲染，一种的指向外部的，表示“重绘”，即修改某个属性不会影响整个页面布局。

重绘与回流

这是前端常常会提到的两个概念。重绘：Repaint，能够理解为页面局部某个元素要进行从新绘制，好比修改元素的背景颜色，可是几何尺寸并不会变；回流：Reflow，能够理解为页面整个从新绘制，好比修改元素的尺寸，每每会致使整个render tree要进行从新计算，reflow是从html标签开始自上而下一次从新计算元素尺寸，从新布局。经过二者概念区别明显得知，回流要比重绘的成本大得多，咱们应该尽可能减小回流操做，减小页面性能消耗。

（1）引发回流的方法或操做：

任何会改变元素几何信息(元素的位置和尺寸大小)的操做，都会触发回流。

元素尺寸改变——边距、填充、边框、宽度和高度
内容变化，好比用户在input框中输入文字
浏览器窗口尺寸改变——resize事件发生时
计算 offsetWidth 和 offsetHeight 属性
设置 style 属性的值

（2）常见引发重绘属性和方法 减小reflow/repaint

不要一条一条地修改DOM的样式。与其这样，还不如预先定义好css的class，而后修改DOM的className。
把DOM离线后修改。

使用documentFragment 对象在内存里操做DOM
先把DOM给display:none(有一次reflow)，而后你想怎么改就怎么改。好比修改100次，而后再把他显示出来。
clone一个DOM结点到内存里，而后想怎么改就怎么改，改完后，和在线的那个的交换一下。

不要把DOM结点的属性值放在一个循环里当成循环里的变量。否则这会致使大量地读写这个结点的属性。

4.尽量的修改层级比较低的DOM。固然，改变层级比较底的DOM有可能会形成大面积的reflow，可是也可能影响范围很小。

5.千万不要使用table布局。由于可能很小的一个小改动会形成整个table的从新布局。

文章转载地址： github.com/huzhao0316/…