详解阅读器渲染流程

阅读器主要组件构造

（阅读器主要组件）

渲染引擎——webkit和Gecko

Firefox使用Geoko——Mozilla自主研发的渲染引擎。

Safari和Chrome都使用webkit。Webkit是一款开源渲染引擎，它原本是为linux平台研发的，后来由Apple移植到Mac及Windows上。

本文我主要以webkit渲染引擎来讲解，尽管webkit和Gecko使用的术语稍有不一样，他们的主要流程根本雷同。

（webkit渲染引擎流程）

关键渲染途径

关键渲染途径是指阅读器从最初接收恳求来的HTML、CSS、javascript等资源，然后解析、构建树、渲染规划、绘制，最后显现给客户能看到的界面这整个历程。

所以阅读器的渲染历程主要包罗以下几步：

解析HTML生成DOM树。

解析CSS生成CSSOM规则树。

将DOM树与CSSOM规则树合并在一起生成渲染树。

遍历渲染树开端规划，运算每个节点的位置大小信息。

将渲染树每个节点绘制到屏幕。

构建DOM树

当阅读器接收到效劳器响应来的HTML文档后，会遍历文档节点，生成DOM树。

需要留意的是，DOM树的生成历程中大概会被CSS和JS的加载施行堵塞。渲染堵塞问题下文会讲。

构建CSSOM规则树

阅读器解析CSS文件并生成CSS规则树，每个CSS文件都被剖析成一个StyleSheet对象，每个对象都包括CSS规则。CSS规则对象包括对应于CSS语法的选中器和声明对象乃至其他对象。

渲染堵塞

当阅读器碰到一个 script 标志时，DOM 构建将暂停，直至足本完成施行，然后连续构建DOM。每次去施行JavaScript足本都会严峻地堵塞DOM树的构建，假如JavaScript足本还操纵了CSSOM，而恰好这个CSSOM还没有下载和构建，阅读器乃至会延迟足本施行和构建DOM，直至完成其CSSOM的下载和构建。

所以，script 标签的位置很重要。实际使用时，可以遵照下面两个原则：

CSS 优先：引入次序上，CSS 资源先于 JavaScript 资源。
JS置后：我们平常把JS代码放到页面底部，且JavaScript 应尽量少影响 DOM 的构建。

当解析html的时候，会把新来的元素插入dom树里面，同时去查寻css，然后把对应的样式规则利用到元素上，查寻样式表是依照从右到左的次序去匹配的。

例如： div p {font-size: 16px}，会先寻觅所有p标签并推断它的父标签可否为div之后才会决议要不要采纳这个样式停止渲染）。
所以，我们平常写CSS时，尽量用id和class，千万不要过渡层叠。

构建渲染树

通过DOM树和CSS规则树我们便可以构建渲染树。阅读器会先从DOM树的根节点开端遍历每个可见节点。对每个可见节点，寻到其适配的CSS样式规则并利用。

渲染树构建完成后，每个节点都是可见节点并且都含有其内容和对应规则的样式。这也是渲染树与DOM树的最大不同所在。渲染树是用于显示，那些不成见的元素当然就不会在这棵树中显现了，比如。除此之外，display等于none的也不会被显示在这棵树里头，但是visibility等于hidden的元素是会显示在这棵树里头的。

渲染树规划

规划阶段会从渲染树的根节点开端遍历，然后肯定每个节点对象在页面上确实切大小与位置，规划阶段的输出是一个盒子模型，它会准确地捕捉每个元素在屏幕内确实切位置与大小。

渲染树绘制

在绘制阶段，遍历渲染树，调取渲染器的paint()办法在屏幕上显示其内容。渲染树的绘制工作是由阅读器的UI后端组件完成的。

reflow与repaint：

按照渲染树规划，运算CSS样式，即每个节点在页面中的大小和位置等几何信息。HTML默许是流式规划的，CSS和js会打破这种规划，改动DOM的外不雅样式乃至大小和位置。这时就要提到两个重要概念：replaint和reflow。

replaint：屏幕的一部分重画，不影响团体规划，比方某个CSS的背风光变了，但元素的几何尺寸和位置不变。
reflow： 意味着元件的几何尺寸变了，我们需要从新验证并运算渲染树。是渲染树的一部分或全部发生了转变。这就是Reflow，或是Layout。

所以我们应当尽量减少reflow和replaint，我想这也是为什么此刻很少有用table规划的缘由之一。

display:none 会触发 reflow，visibility: hidden属性并不算是不成见属性，它的语义是潜藏元素，但元素依然占据着规划空间，它会被渲染成一个空框，所以visibility:hidden 只会触发 repaint，由于没有发生位置转变。

有些状况下，比方修改了元素的样式，阅读器并不会立即 reflow 或 repaint 一次，而是会把这样的操纵积累一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。
有些状况下，比方 resize 窗口，改动了页面默许的字体等。关于这些操纵，阅读器会立刻停止 reflow。

小结

本文我们就阅读器渲染流程逐渐理解了一遍，信赖大家必然都有所新的收成，假如大家关于阅读器渲染流程还有任何疑问，欢迎反应，我们共同交流，共同学习，共同进步。

相关阅读：

html两秒跳转至其他页面

怎样做出在网页中弹出QQ暂时对话框

iframe的去边框和无边框是什么操纵方式

base标签需要怎样使用

以上就是详解阅读器渲染流程的具体内容，更多请关注百分百源码网其它相关文章！