浏览器的渲染原理简介

前言
呈现引擎渲染内容将首先开始于：DNS 查询，TCP 连接，HTTP 请求即响应，服务器响应，最后是客户端渲染的过程。
浏览器工作的主要流程示例
Cut the crap，先来看个图：

解析过程

1 浏览器会解析三个东西：
HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
CSS，解析CSS会产生CSS规则树。
Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree
.
2 解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。
注意：Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。

3 最后通过调用操作系统Native GUI的API绘制。

渲染过程

渲染的流程基本上如下（黄色的四个步骤）：

1 计算CSS样式
2 构建Render Tree
3 Layout – 定位坐标和大小，是否换行，各种position, overflow, z-index属性 ……
4 正式开画

注意：上图流程中有很多连接线，这表示了Javascript动态修改了DOM属性或是CSS属会导致重新Layout，有些改变不会，就是那些指到天上的箭头，比如，修改后的CSS rule没有被匹配到等。

简要介绍两个概念：

Repaint（重绘）
屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
Reflow（回流）
意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。Reflow的成本比Repaint的成本高得多的多。DOM Tree里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。这也就是为什么说DOM操作很慢的原因了。因为DOM对象本身也是一个js对象，所以严格来说，并不是操作这个对象慢，而是说操作了这个对象后，会触发一些浏览器行为，比如布局(layout)和绘制(paint)。

参考链接：
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_rendering_engine
https://coolshell.cn/articles/9666.html
文章乃参考、转载其他博客所得，仅供自己学习作笔记使用！！！