关于前端:问我Chrome浏览器的渲染原理6000字长文

前言

对于 HTML，css 和 JavaScript 是如何变成页面的，这个问题你理解过吗？浏览器到底在背地都做了些什么事件呢？让咱们去理解浏览器的渲染原理，是通往更深层次的开发必不可少的事件，能让咱们更深层次，多角度的去思考性能优化等问题。

HTML，css，JavaScript 数据通过两头渲染模块的解决，最终显示在页面上（其中 HTML 超文本标记语言，CSS 层叠样式表，JS 为 JavaScript，大家个别都晓得是什么，写过网页的敌人，学习者大都晓得的）。

• HTML 的内容是由标记和文本组成
• CSS 称为层叠样式表，是由选择器和属性组成
• JS 是能够使网页的内容“动”起来

有人说渲染流程能够分为：构建 DOM 树，款式计算，布局阶段, 分层，绘制，分块，光栅化和合成等。其中浏览器温习一下，它是多线程的的，js 是单线程的，JS 在浏览器中，它能够是多线程的。

上面围绕浏览器渲染原理话题开始形容，为什么要理解浏览器渲染页面机制呢？。

浏览器渲染原理

首先，JavaScript 引擎是基于事件驱动单线程执行的，渲染线程负责渲染浏览器界面，然而 GUI 渲染线程与 JS 引擎是互斥的，当 JS 引擎执行时 GUI 线程会被挂起，GUI 的更新也会被保留在一个队列中，等到 JS 引擎闲暇时才有机会被执行。

那么什么是 DOCTYPE 以及作用呢

DTD,document type definition, 文档类型定义，是一系列的语法规定，用来定义 XML 或（x)HTML 的文件类型。浏览器会应用它来判断文档类型，决定应用何种协定来解析, 以及切换浏览器模式。

DOCTYPE 是用来申明文档类型和 DTD 标准的，一个次要的用处便是文件的合法性验证。如果文件代码不非法，那么浏览器解析时便会出一些过错。

下图为浏览器的渲染过程图：

重排 Reflow

重排的定义：DOM 构造中的各个元素都有本人的盒子模型，这些都须要浏览器依据各种款式来计算并依据计算结果将元素放到它该呈现的地位，这个过程称之为 reflow.

触发 Reflow 状况

• 当你减少，删除，批改 Dom 节点时会导致 Reflow 或 Repaint
• 当你挪动 DOM 的地位，或是搞个动画的时候
• 当你批改 CSS 款式的时候
• 当你 Resize 窗口的时候，或是滚动的时候
• 当你批改网页的默认字体时

重绘 Repaint

重绘的定义，当各种盒子的地位，大小以及其余属性，例如色彩，字体大小等都确定下来后，浏览器于是便把这些元素都依照各自的个性绘制了一遍，于是页面的内容呈现了，这个过程称为 repaint。

触发 Repaint 状况

• DOM 改变
• CSS 改变

讲到这里，上面来细分说一下吧！

简略介绍一下浏览器的工作原理

1. 理解浏览器

目前应用的支流的浏览器：Internet Explorer，Firefox，Safari，Chrome 浏览器，Opera。让咱们看看浏览器统计数据的占比：

让你说说浏览器的次要性能：

就是向服务器发出请求，在浏览器窗口中展现您抉择的网络资源，资源个别指 HTML 文档，能够是 PDF，图片或其余的类型。资源的地位由用户应用 URI（在电脑术语中，对立资源标识符 （Uniform Resource Identifier，URI) 是一个用于标识某一互联网资源名称的字符串）

1. 浏览器的构造

• 用户界面：包含地址栏，后退、后退按钮，书签菜单等。
• 浏览器引擎：在用户界面和出现引擎之间传送指令。
• 出现引擎：负责显示申请的内容。
• 网络：用于网络调用，比方 HTTP 申请；其接口与平台无关，并为所有平台提供底层实现。
• 用户界面后端：用于绘制根本的窗口小部件，比方组合框和窗口。其公开了与平台无关的通用接口，而在底层应用操作系统的用户界面办法。
• JavaScript 解释器：用于解析和执行 JavaScript 代码。
• 数据存储：这是长久层。浏览器须要在硬盘上保留各种数据，例如 Cookie。新的 HTML 标准定义了“网络数据库”，这是一个残缺的浏览器内数据库。

留神：Chrome 浏览器的每个标签页都别离对应一个出现引擎实例，每个标签页都是一个独立的过程。

1. 出现引擎

出现引擎的作用是“出现”，用于在浏览器的屏幕上显示申请的内容。

个别状况下，出现引擎可显示 HTML 和 xml 文档与图片，通过插件或浏览器扩大程序，能够显示其余类型的内容。浏览器（Firefox，Chrome 浏览器和 Safari）是基于两种出现引擎构建的。

Firefox 应用的是 Gecko，而 Safari 和 Chrome 浏览器应用的是 WebKit（WebKit 是一种凋谢源代码出现引擎）。

1. 主流程

出现引擎一开始会从网络层获取申请文档的内容，其大小个别限度在 8000 个块以内。

出现引擎将开始解析 HTML 文档，并将各标记一一转化成“内容树”上的 DOM 节点。同时也会解析内部 CSS 文件以及款式元素中的款式数据。出现树构建完后，会进入“布局”解决阶段，也就是为每个节点调配一个应呈现在屏幕上的确切坐标。

1. 解析

解析是出现引擎中重要的环境，什么是解析呢？

解析文档是指将文档转化成为有意义的构造，能够让代码了解和应用的构造。解析失去的构造通常是代表了文档构造的节点树，它称为解析树或者语法树。

1. 语法

解析是以文档所遵循的语法规定为根底的。解析的过程分为两个子过程：词法剖析和语法分析。

什么是词法剖析呢？

词法剖析是将输出内容宰割成大量标记的过程，标记（语言中的词汇），形成内容的单位。相等于语言中的单词。

什么是语法分析呢？

语法分析是利用语言的语法规定的过程。

so，解析器个别解析工作分两个组件解决，为词法分析器（负责将输出内容分解成一个个无效标记），解析器负责依据语言的语法规定来剖析文档的构造，来构建解析树。

从源文档到解析树：Document->Lexical Analysis->Syntax Analysis->Parse Tree

解析是一个迭代的过程。

是这样的，解析器会向词法分析器申请一个新标记，并尝试将其与某条语法规定进行匹配。如果匹配规定，解析器就会将对应与该标记的节点增加到解析树中，而后持续下一个。

然而如果没有匹配的规定，解析器会将标记存储到外部，持续申请标记，直到可与之匹配的规定，然而如果没有直到的话，就会引发异样（文档有效，蕴含语法错误等）。

1. 翻译

解析通常是在翻译的过程中，而翻译是将输出的文档转换为另一种模式，如编译器将源代码编译成机器代码，流程是将源代码解析成解析树，将解析树翻译成机器代码文档。

编译流程：Source Code -> Parsing->Parse Tree -> Translation -> Machine Code

1. 解析器类型

两种根本的解析器类型：自上而下解析器，自下而上解析器

自上而下就是： 解析器从语法的高层构造登程，尝试从中找到匹配的构造。

自下而上就是： 解析器从低层规定登程，将输出内容逐渐转化为语法规定，直至满足高层规定。

你晓得一种工具叫解析器生成器吗，它可能帮忙你生成解析器，你只有向它提供你所应用的语言的语法，即词汇和语法规定，而后就会生成相应的解析器。

你晕了吗？能够点击这里查看：浏览器的工作原理：旧式网络浏览器幕后揭秘
https://www.html5rocks.com/zh…

渲染机制

浏览器从接管到页面开始到页面显示，这整个过程中的所有步骤，称 要害渲染门路，个别分为两步：页面内容加载实现和页面资源实现，别离对应于 DOMContentLoaded 和 Load

要害：网页的渲染过程如下，蕴含页面加载和页面渲染两个过程。

页面加载过程是，从服务器申请资源并构建 DOM 树的过程，网页渲染过程指的是通过 DOM 树渲染出视图内容。

DOM + CSS -> Render Tree

温习一下整个要害渲染包含：

• 解析 HTML，生成 DOM 树(DOM)
• 解析 CSS，生成 CSSOM 树
• 将 DOM 和 CSSOM 合并，生成渲染树（Rendere-Tree）
• 计算渲染树的布局 Layout
• 将布局渲染到屏幕上 Paint

那么要问了，为什么要理解浏览器渲染页面机制呢？

理解渲染机制，次要还是为了性能的优化：

理解浏览器如何进行加载，援用内部款式文件，JS 文件时，将它们放到适合的地位，是浏览器最快的速度让文件加载结束；理解浏览器如何进行解析，抉择最优的写法，构建 DOM 构造，组织 CSS 选择器的时候，是为了进步浏览器的解析速率；理解浏览器如何进行渲染，是能够缩小“重绘”，“从新布局”的耗费。

那么下面始终说理解渲染机制，呈现的几个基本概念，这里先弄明确：

• DOM: Document Object Model，浏览器将 HTML 解析成树形的数据结构
• CSSOM: CSS Object Model，浏览器将 CSS 解析成树形的数据结构
• Render Tree: DOM 和 CSSOM 合并生成 Render Tree
• Layout: 计算出 Render Tree 每个节点的具体位置
• Painting: 通过显卡，将 Layout 后的节点内容别离出现到屏幕上

说说浏览器页面渲染：

• 第一步：在 CSS 资源还没有申请回来之前，学生成 DOM 树；
• 第二步：当所有的 CSS 申请回来之后，浏览器依照 CSS 的导入程序，顺次进行渲染，最初生成 CSSOM 树；
• 第三步：把 DOM 树和 CSSOM 树联合在一起，生成有款式，有构造的 RENDER TREE 渲染树；
• 最初一步：浏览器依照渲染树，在页面中进行渲染和解析

来源于知乎的渲染引擎及要害渲染门路

因为渲染机制过于简单，渲染模块在在执行过程中划分了很多阶段，通过《浏览器工作原理与实际》- 渲染流程上分：构建 DOM 树，款式计算，布局阶段；渲染流程下分：分层，图层绘制，栅格化（raster）操作，合成和显示。

整个渲染流程，从 HTML 到 DOM、款式计算、布局、图层、绘制、光栅化、合成和显示。

面试一问：为什么要构建 DOM 树？

答：因为浏览器不能间接了解和应用 HTML，so，须要将 HTML 转换为浏览器可能了解的构造，即是 DOM 树（树结构个别都理解了的）。

为了理解残缺的 DOM 树结构，能够关上 Chrome 的“开发者工具”，或按 F12，如图下：

接下来要让 DOM 节点领有正确的款式，这就须要款式计算了。

款式计算的目标是为了计算出 DOM 节点中每个元素的具体款式：三步走

• 把 CSS 转换为浏览器可能了解的构造
• 转换样式表中的属性值，使其标准化
• 计算出 DOM 树中每个节点的具体款式（波及到 CSS 的继承规定和层叠规定）

当渲染引擎接管到 CSS 文本时，会执行一个转换操作，将 CSS 文本转换为浏览器能够了解的构造——styleSheets。属性值标准化的过程：将所有值转换为渲染引擎容易了解的、标准化的计算值。

DOM 元素最终计算的款式如图：

布局阶段

布局：计算出 DOM 树中可见元素的几何地位，第一创立布局树（构建一棵只蕴含可见元素布局树），第二布局计算。

面试问题：CSS 加载会阻塞页面显示吗？

• css 加载不会阻塞 DOM 树的解析
• css 加载会阻塞 DOM 树的渲染
• css 加载会阻塞前面 js 语句的执行

so，为了防止让用户看到长时间的白屏工夫，应该进步 css 的加载速度。

为了避免 css 阻塞，引起页面白屏，能够进步页面加载速度

• 应用 cdn
• 对 css 进行压缩
• 正当利用缓存
• 缩小 http 申请，将多个 css 文件合并

面试问题：下载 CSS 文件阻塞了，会阻塞 DOM 树的合成吗？会阻塞页面的显示吗？

说了 DOM 生成、款式计算和布局三个阶段，接下来说说前面的阶段。

说说分层：渲染引擎给页面分了很多图层，这些图层依照肯定程序叠加在一起，就造成了最终的页面。实现图层树的构建后，渲染引擎会对图层树中的每个图层进行绘制，为图层绘制。而后进行栅格化（raster）操作（绘制列表只是用来记录绘制程序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来实现的），最初合成与显示。

找一张整体的流程图如下：

页面渲染机制图如下：

渲染过程图如下：

浏览器渲染过程如下：

浏览器解析的三个货色流程图如下：

一是 HTML/SVG/XHTML

二是 CSS

三是 Javascript 脚本

这里重要要说（从新说一下）两个概念回流和重绘：

当 render tree 中的一部分因为元素的规模尺寸，布局，暗藏等扭转而须要从新构建。这就称为回流(reflow)。

每个页面至多须要一次回流，就是在页面第一次加载的时候。

在回流的时候，浏览器会使渲染树中受到影响的局部生效，并从新结构这部分渲染树，实现回流后，浏览器会从新绘制受影响的局部到屏幕中，该过程成为重绘。

当 render tree 中的一些元素须要更新属性，而这些属性只是影响元素的外观，格调，而不会影响布局的，比方 background-color。就叫称为重绘。

本篇文章的最初，留下一些面试题：为什么缩小重绘、重排能优化 Web 性能吗？如何能缩小重绘、重排呢？

总结

以上就是明天要讲的内容，本文仅仅简略介绍了 Chrome 浏览器的渲染原理流程，感激浏览，如果你感觉这篇文章对你有帮忙的话，也欢送把它分享给更多的敌人。