前言
在说浏览器渲染机制之前，我们先了解下浏览器的内核。
在平时的业务开发中我们经常会对不同的浏览器做一些兼容性处理，一般会在项目编译过程中通过 PostCSS 的Autoprefixer来做一些浏览器前缀的兼容；
例如常见的对flex进行兼容：
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
这些差异性正是由于浏览器的内核的不同而导致的。
浏览器内核可以分为两部分：渲染引擎 和 JS引擎。
市面上常见浏览器内核有：Blink（Chrome、Opera）、Webkit（Safari）、Trident（IE）、Gecko（火狐）。
浏览器渲染过程
- 解析HTML
这一步HTML Parser的主要作用是处理 HTML 标记并构建 DOM树。将文本的HTML文档，提炼出关键信息，嵌套层级的树形结构，便于计算。同时会发出页面渲染所需要的各种外部资源请求。
- 计算样式
浏览器将识别并加载所有的CSS样式信息与DOM树进行合并，生成render tree。
- 计算图层布局
页面中所有元素的相对位置信息、大小等信息在这一步进行计算。
- 绘制图层
浏览器会根据DOM代码结果，把每一个页面图层转化为像素，并对所有的媒体文件进行解码。
wil-changecss属性可以提升合成层，不影响其他元素绘制，感兴趣可以了解一下，戳这里
- 整合图层
最后浏览器会合并合各个图层，将数据由 CPU 输出给 GPU 最终绘制在屏幕上。 详细了解可以戳这里
细分渲染过程
- **DOM Tree：**HTML Parser的主要作用是处理 HTML 标记并构建 DOM 下面给出一个简单的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html parse</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h1>html parse</h1>
<img src="aa.jpg" alt="">
<p>这是一段文字</p>
</section>
<script src="aa.js"></script>
</body>
</html>
经过HTML Parser解析后DOM Tree大致如下图：
- CSSOM Tree: 解析css 其中包括（内联样式、外部样式以及第三方样式表），然后创建CSSOM树。DOM Tree和 CSSOM Tree的构建是并行的。
- Render Tree: CSSOM与DOM结合后，即得到render Tree
section p {
display: none;
}
则上图中<p>将不会被构建，虽然DOM 树中包含；
有如下内容：
section h1:after {
content: 'asdf';
}
则伪元素将会被添加到渲染树中，虽然DOM树中没有；
ps:只有实际会被渲染在页面中的元素 才会进入到render Tree中
- 布局渲染树： 浏览器知道每个元素的相应样式规则后，就开始计算布局，也就是元素占用多少空间，显示在屏幕的哪个位置，此时的过程叫做layout，也叫reflow(回流)
- 绘制渲染树： 浏览器会遍历渲染树，绘制每个节点，图片会通过Image Decode将这些内容解析到内存当中；浏览器将图层和图块从CPU发送给GPU，GPU将多图层进行合并（composite），然后将内容显示在屏幕上。
总结：首先基于HTML构建DOM Tree，与CSSOM Tree结合，得到Render Tree，浏览器以Render Tree为蓝本，计算布局Layout，最后Paint绘制像素信息，显示到屏幕上。
参考：
1.www.html5rocks.com/en/tutorial… 2.juejin.cn/post/684490… 3.classroom.udacity.com/courses/ud8…
