#1.网页的生成过程
浏览器从下载文件到显示页面是一个很复杂的过程。
浏览器下载完页面中的所有组件 – HTML标记、JavaScript、CSS、图片 – 之后会解析并生成两个内部数据结构:
1. DOM树 -- 表示页面结构
2. 渲染树 -- 表示 DOM 节点在页面中如何显示(宽高、位置等)
下面我们来看一下网页具体的一个生成过程,如下图:
-
HTML代码转化成DOM
-
CSS代码转化成CSSOM(CSS Object Model)
-
结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
-
生成布局(layout),即将所有渲染树的所有节点进行平面合成
-
将布局绘制(paint)在屏幕上
这五个步骤中,第一步到第三步都非常快,耗时的是第四步和第五步。 "生成布局"(flow)和"绘制"(paint)这两步,合称为"渲染"(render)。