浏览器渲染

什么是网页

首先,我们知道网页是由html+css+javascript三大部分组成的,我们可以形象的把网页比喻成一个人,html就是他的样子,根据内容来形容他的高矮胖瘦,css就是他的外表,他的着装是否华丽,五官是否精美,那么JavaScript的就相当于人的行为与动作.所以通过html、css、javascript可以组成一个完整的网页。

那浏览器流程是怎样的呢？

我们先来看看下面这幅图

image.png

从上面的图可以看出，浏览器会解析三个东西

一个是HTML，解析它时会产生一个DOM Tree。
CSS，解析CSS， 构建 CSSOM  Tree。
Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

解析完成后，浏览器引擎会通过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绘制。