网页渲染过程

这里，我们就以最简单的情况（仅包含html、css）说明一下网页的渲染过程。

从处理HTML文件中的一串串字符开始:

当HTML转化成DOM后，接下来浏览器会处理CSS，与转换HTML十分类似。

最终就转成下面的CSSOM树:

从DOM树的根部开始，遍历每个可见节点 :

比如，以上DOM树和CSSOM树合并成渲染树的结果如下:

从渲染树我们可以知道哪些节点是可见的，以及它们的CSS计算样式和几何形状，当渲染树完成之后，就可以开始绘制页面。

上面的步骤1到4也被称为关键路径绘制（英文简称：CRP，具体概念可参考谷歌浏览器的说明： https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path ）：

概括的说，关键路径绘制包括：

了解网页渲染过程，有助于我们优化网页，提示渲染速度。这个过程被称作 优化关键渲染路径 （使上述步骤1到4所花费的总时间最小化的过程）

优化关键渲染路径 可以使内容尽快呈现到屏幕上，以获得更好的用户体验，但它也是一个很深的课题，不同的浏览器有不同的做法，这是火狐浏览器关于关键渲染路径的文档（ https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path ）。

以上，便是笔者对网页渲染过程的简单见解，此文章由笔者参考资料并加上 自己的见解 得来，若其中有不准确的地方还请指正

https://blog.logrocket.com/how-browser-rendering-works-behind-the-scenes-6782b0e8fb10/

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

https://stackoverflow.com/questions/27637184/what-is-dom-reflow/27637245#27637245

前端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 就绪。

————————————————

原文链接： https://blog.csdn.net/baidu_30891377/article/details/106313534

---