前端web页面的渲染流程

1、构建DOM与 CSSOM

    浏览器通过http请求，获得静态资源后，进行页面渲染时，构建dom与cssom是同时进行的。 

•     html 构建dom   
     构建dom时，按照html页面中标签的顺序，由上向下渲染。
•     css 构建cssom
      html构建cssom的同时，将css样式构建为cssom   

2、渲染树 Render Tree

   该过程中DOM与CSSOM合并，生成渲染树，树中包含了渲染页面所需要的节点。

3、布局Layout

计算出每个节点对象的精确位置和大小

4、绘制Paint

使用上面准备好的节点信息，绘制出页面

 

 

javascript

我们看到，在构建DOM和CSSOM阶段，会有javascript进入

1、当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。

2、JavaScript 可以查询和修改 DOM 与 CSSOM。

3、JavaScript 执行将暂停，直至 CSSOM 就绪。