渲染流程有四个主要步骤:
-
解析HTML生成DOM树 - 渲染引擎首先解析HTML文档,生成DOM树
-
构建Render树 - 接下来不管是内联式,外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树,根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree),
-
布局Render树 - 然后对渲染树的每个节点进行布局处理,确定其在屏幕上的显示位置
-
绘制Render树 - 最后遍历渲染树并用UI后端层将每一个节点绘制出来
以上步骤是一个渐进的过程,为了提高用户体验,渲染引擎试图尽可能快的把结果显示给最终用户。它不会等到所有HTML都被解析完才创建并布局渲染树。它会在从网络层获取文档内容的同时把已经接收到的局部内容先展示出来。
懂的极其少,只能找到最简单的理解方式,最简练的回答,让自己记住,并更好的运用!
欢迎各位指导评论!