浏览器的渲染原理

本篇博客是作为个人自学记录，如有不足之处，请批评指正。

浏览器拿到HTML&CSS之后，它做了些什么？

• 根据 HTML 构建 HTML 树（DOM）
• 根据 CSS 构建 CSS 树（CSSOM）
• 将两棵树合并成一颗渲染树（render tree）
• Layout 布局（文档流、盒模型、计算大小和位置）
• Paint 绘制（把边框颜色、文字颜色、阴影等画出来）
• Composite 合成（根据层叠关系，展示最终的画面）

举个例子

我在ps创建了3个图层，一个是画板，一个是结构，一个是颜色

• 首先，现在是一个画板，里面啥也没有

• 下一步我把结构加了进来，现在可以看到轮廓了

（别骂了…用鼠标瞎jb画的，我一点美术功底都没有= =）

• 接下来我把颜色给加了进来

• 最后我合并图层

• 最终这3个图层就被合并成一张图了

请问以上3个图层从无到有，再到最后合成，主要做了那些工作？

1：画轮廓

2：配色

3：合成

那我们现在可以先把画轮廓看做是构建HTML树，然后将配色看做是构建CSS树，那最后的合成呢？是不是就是浏览器将各个层级最终的合成？

是的，我们暂时可以这样看成是浏览器的渲染原理，当然这只是一个大概的流程，浏览器做的工作不仅仅这么简单。

但是这里又有疑问了，那到底什么是树？

什么是树？

我们都知道，一棵树，通常都会长出很多分支，脑补一下，这些分支上分别有head标签和body，然后head又分支出link、style，body又分支出p、div等等，那么这这个结构就叫做HTML树木。

下面这张图片是借用谷歌团队写的一篇文章：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

相信到这里就能大概搞清楚树是什么概念了吧？

同时图片中有 渲染树（render tree），渲染树就是最终用户应该看得到的树。

Layout布局 和 Paint绘制 是什么？

这个很好理解，比如，HTML中的p标签，我们应该把p标签放在哪个位置？然后div又要放在哪个位置？定位在哪？把文档流算出来、把盒模型算出来、计算大小和位置、这些流程就是Layout布局；

但是只做这些是不够的，还得需要绘制颜色，那这里是不是又感觉很像一开始举的ps的例子，把颜色加进了轮廓里？

是的，暂且可以这么认为，例子只是例子，但不是绝对正确的！！！

Composite合成 是什么？

这就是关系到层叠关系，就好像，一个div里，可能会有好多层，浮动有几层，绝对定位有几层，所以浏览器在最后的阶段就是合并这些图层。

那这里，是不是又觉得跟ps这个例子的最后一步很像，是的没错，暂且，可以这么认为。

好了，那么我们就已经简单地了解到了浏览器的基本渲染原理，但当然，浏览器渲染需要做的工作，还有很多很多。

需要了解更多的话，可以看看这篇文章：
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction