渲染引擎的渲染过程解析html、构建dom树构建渲染树（解析样式信息）布局渲染树（布局dom节点）绘制渲染树（绘制dom节点）

特点

1.1课程介绍
1.DOM是Docunment、object、Model的缩写，直译过来就是文档对象模型。
2.DOM的地位和作用
1.HTML→CSS(定义样式)
2.HTML→JavaScript（赋予行为）
通过JavaScript实现页面的交互和动画效果等等。
3.那么JavaScript通过什么来实现的呢？
1.通过ECMAScript标准，我们可以编写程序让浏览器来解析
2.利用ECMAScript我们可以通过BOD对象来操作浏览器窗口、
浏览器导航对象、屏幕分辨率、浏览器历史、Cookies等等
3.但是通过BOD来实现的交互远远不够,要实现页面的动态交互
和效果，操作HTML才是核心。
4.那么如何操作HTML呢，那就是DOM。简单来说，DOM给我们提
供了用程序来动态控制HTML的接口，也就是早期的DHTML的
概念。
5.因此DOM处在JavaScript赋予HTML具备动态交互的核心地位
上。
注:BOM(Browser Object Model) 是指浏览器对象模型
cookies （从客户端的硬盘读取数据的一种技术）
3.DOM探索系列课程要点
1.想要安全的操作DOM必须等到页面上所有的HTML都解析成DOM节点，
才能进行操作，因此了解DOMReady是第一步。
2.接着我们来探究节点，学习文档和节点的类型，元素节点的判断、
元素节点的继承层次、以及节点的分类等内容。
3.然后学习节点的操作，比如节点创建与删除、节点查找与筛选等。
4.接着学习表格与表单的操作
5.最后我们探讨属性系统和样式设置
6.顺序图
1.DOMReady→2.节点探究→节点创建与删除→节点查找与筛选→
表单与表格操作→属性系统→样式设置
4.基础详解篇课程要点
1.首先通过滑动门特效课堂案例感性认识DOM在开发中是如何运用的
2.其次，了解什么DOM以及与DOM相关的基础概念
3.重新认识HTML与XHTML文档类型，以及文档的各种节点类型
4.接着详细的实现DOMReady

渲染流程。

html标签元素经过html解析，依据dom标准，生成dom树，css样式代码经过css解析成样式规则，webkit使用Attachment来连接dom节点和可视化信息，来构建渲染树。 渲染树由渲染对象来组成，并使用layout来表示元素的布局，接着遍历渲染树，最后在浏览器绘制出页面。

这四步仅仅是HTML的渲染过程，①解析HTML，构建DOM树(将标签转化为节点) ——>
②解析样式信息，构建渲染树(外部css文件、style标签) ——>
③布局渲染树，即布局DOM节点(确定每个节点在屏幕上的确切坐标) ——>
④绘制渲染树，即绘制DOM节点(遍历渲染树，使用UI后端层绘制每个节点)

渲染引擎的渲染过程

1. 解析html、构建dom树

2. 构建渲染树（解析样式信息）

3. 布局渲染树（布局dom节点）

4. 绘制渲染树（绘制dom节点）

Webkit主要渲染流程

浏览器渲染引擎的基本渲染流程

部分笔记内容

Webkit主要渲染流程：扩展阅读

浏览器渲染引擎的基本渲染流程.

浏览器基本渲染流程

渲染引擎的渲染过程

1. 解析html、构建dom树

2. 构建渲染树（解析样式信息）

3. 布局渲染树（布局dom节点）

4. 绘制渲染树（绘制dom节点）

蓝色部分设计大量计算

1. html结构的渲染过程，外部资源的加载贯穿始终
   

渲染过程

①解析HTML，构建DOM树(将标签转化为节点) ——>
②解析样式信息，构建渲染树(外部css文件、style标签) ——>
③布局渲染树，即布局DOM节点(确定每个节点在屏幕上的确切坐标) ——>
④绘制渲染树，即绘制DOM节点(遍历渲染树，使用UI后端层绘制每个节点)

浏览器渲染引擎的基本渲染流程<br> 1、解析HTML构建DOM树<br> 2、构建渲染树（解析样式信息--> style rules）<br> 3、布局渲染树（布局DOM节点 -->layout） 4、绘制渲染树 （绘制DOM节点）