起首浏览器大年夜上到虾??解析文档构建DOM树，如下：
构建CSSOM树
CSSOM，即CSS对象模型(CSS Object Model)，CSSOM树，与DOM树构造类似，只是别的为每一个节点接洽关系了样式信息。
每一个衬着对象的构造流程根本如：
theme.css样式内容如下：
- html, body {
- width: 100%;
- height: 100%;
- background-color: #fcfcfc;
- }
- .title {
- font-size: 20px;
- }
- .footer {
- font-size: 12px;
- color: #aaa;
- }
构建CSSOM树如图：
履行JavaScript
上文已经阐述了文档解析时对脚本的处理，我们得知脚本加载，解析和履行会壅塞文档解析，而在间谍作况下样式的加载和解析也会壅塞脚本，所以如今推荐的实践是标签放在标签前面。
构建衬着树(render tree)
DOM树和CSSOM树都构建完了，接着浏览器会构建衬着树：
衬着树，代表一个文档的视觉展示，浏览器经由过程它将文档内容绘制在浏览器窗口，展示给用户，它由按次序展示在屏幕上的一系列矩形对象构成，这些矩形对象都带有字体，色彩和尺寸，地位等视觉样式属性。对于这些矩对象，FireFox称之为框架(frame),Webkit浏览器称之为衬着对象(render object, renderer)，后文统称为衬着对象。
这里把衬着树节点称为矩形对象，是因为，每一个衬着对象都代表着其对应DOM节点的CSS盒子,该盒子包含了尺寸，地位等几何信息，同时它指向一个样式对象包含其他视觉样式信息。
衬着树与DOM树
每一个衬着对象都对应着DOM节点，然则非视觉(隐蔽，不占位)DOM元素不会插入衬着树，如元素或声明display: none;的元素，衬着对象与DOM节点不是简单的一对一的关系，一个DOM可以对应一个衬着对象，但一个DOM元素也可能对应多个衬着对象，因为有很多元素不止包含一个CSS盒子，如当文本被折行时，会产生多个行盒，这些行会生成多个衬着对象;又如行内元素同时包含块元素和行内元素，则会创建一个匿名块级盒包含内部行内元素，此时一个DOM对应多个矩形对象(衬着对象)。
衬着树及其对应DOM树如图：
- 图中衬着树viewport即视口，是文档的初始包含块，scroll代表滚动区域，详见CSS之视觉格局化模型(Visual Formatting Model)
- 衬着树并不会包含显式或隐式地display：none;的标签元素。
构造(Layout)或回流(reflow，relayout)
创建衬着树后，下一步就是构造(Layout),或者叫回流(reflow,relayout)，这个过程就是经由过程衬着树中衬着对象的信息，计算出每一个衬着对象的地位和尺寸，将其安顿在浏览器窗口的┞俘确地位，而有些时刻我们会在文档构造完成后对DOM进行修改，这时刻可能须要从新进行构造，也可称其为回流，本质上照样一个构造的过程，每一个衬着对象都有一个构造或者回流办法，实现其构造或回流。
流(flow)
HTML采取的是基于流的方法定位构造，其按照大年夜左到右，大年夜上到下的次序进行分列，详见CSS定位机制。
全局构造与局部构造
脏位体系(dirty bit system)
对衬着树的构造可以分为全局和局部的，全局即半数个衬着树进行从新构造，如当我们改变了窗口尺寸或偏向或者是修改了根元素的尺寸或者字体大年夜小等;而局部构造可所以对衬着树的某部分或某一个衬着对象进行从新构造。
大年夜多半web应用对DOM的操作都是比较频繁，这意味着经常须要对DOM进行构造和回流，而如不雅仅仅是一些小改变，就触发全部衬着树的回流，这显然是不好的，为了避免这种情况，浏览器应用了脏位体系，只有一个衬着对象改变了或者某衬着对象及其子衬着对象脏位值为”dirty”时，解释须要回流。
推荐阅读
媒介最早我也执偾在办事器上编辑文件的时刻用用vim来改改法度榜样，并没有把vim当做本身的主力编辑器。然则有时的一次机会须要改一个奇葩的输入文件的格局，用了下Vim的宏录制，尝到了甜头，于是后面就开端用Vim来写>>>详细阅读
本文标题：浅析前端页面渲染机制
地址：http://www.17bianji.com/lsqh/34753.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示