正在回答 回答被采纳积分+1
同学你好，首先需要了解几个概念，以便于帮助理解浏览器的渲染过程。
1、概念说明：
（1）DOM Tree：浏览器将HTML解析成树形的数据结构
（2）CSS Rule Tree：浏览器将CSS解析成树形的数据结构（CSSOM）
（3）Render Tree：DOM和CSSOM合并后生成Render Tree
（4）layout：有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置
（5）painting：按照算出来的规则，通过显卡，把内容画到屏幕上
2、了解了以上概念，我们来看一下浏览器的渲染流程图：
也就是说，浏览器的渲染流程大致如下：
（1）浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程（当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点）
（2）将CSS解析成 CSS Rule Tree
（3）根据DOM树和CSSOM来构造Render Tree
（4）有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。
（5）再下一步就是绘制，即遍历render树，并使用UI层绘制每个节点（可以理解为设置颜色、背景色等等）。
注意：上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建布局（CSSOM）和render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余的网页内容。
希望可以帮到你，祝学习愉快！
-
老师您好, 非常感谢您的回答, 我其实还想很清楚的知道在这里过程里面js加载以及执行的过程, 您能把加载js文件以及执行js文件的过程也加入到里面吗, 万分感谢
2022-04-07 07:00:58 -
同学你好，
（1）关于“构建DOM树和CSSOM树是否是同时进行“的问题。上面其实已经进行了说明：
页面在渲染过程中，如果遇到link标签会开辟一个新的http请求线程去加载资源，但是浏览器渲染线程会继续进行，所有的CSS资源会被标识顺序，等到都请求回来后，按照顺序标识在逐一渲染（不是谁先请求回来，就渲染谁哦~）。也就说，在解析html的时候，可能也在同时解析css，构建DOM树的时候，可能CSSOM树也在构建。
（2）关于“页面渲染JS执行过程”的问题。页面渲染过程中，如果遇到 <script>就会停止渲染，去执行JS代码。因为浏览器渲染和JS执行共用一个线程，JS的加载、解析与执行会阻塞DOM的构建，也就是说，在构建DOM时，HTML解析器若遇到了JS，它就会暂停构建DOM，将控制权移交给JS引擎，JS引擎运行完毕，浏览器再从中断的地方恢复DOM构建。
希望可以帮到你，祝学习愉快！
2022-04-07 10:26:04
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星