说一下浏览器如何渲染页面的？

[问答题]

说一下浏览器如何渲染页面的？

牛客150990719号

1、HTML被HTML解析器解析成DOM树。 2、CSS被CSS解析器解析成CSS规则树。 3、浏览器会将CSS规则树附着在DOM树上，并结合两者生成渲染树Render Tree。 4、生成布局（flow），浏览器通过解析计算出每一个渲染树节点的位置和大小，在屏幕上画出渲染树的所有节点。 5、将布局绘制（paint）在屏幕上，显示出整个页面

发表于 2022-05-03 16:36:56 回复(0)

cmls

1.解析HTML，生成DOM树
2.解析CSS，生成CSSOM树
3.两棵树结合，生成Render树
4.计算布局，绘制页面的所有节点
5.绘制布局

发表于 2022-06-25 19:48:05 回复(1)

乐扣乐扣

1. 获取html文件后，渲染引擎会对将HTML代码解析为DOM结构，同时获取CSS；2. 将获取到的CSS解析为CSSOM树，与DOM树并发解析；3.解析JS脚本对DOM树和CSSOM树进行修改。4.将DOM树和CSSOM树合成为render树 5.对render树上节点进行布局，确定其位置，如果元素位置后续被改变而触发重新绘制叫做回流。6.对摆好位置的节点进行色彩渲染，如果元素样式后续被改变而触发页面重新绘制叫做重绘。7.加载剩余的img，video等媒体文件。

编辑于 2022-08-17 15:56:03 回复(0)

龙，愛してる，♥

浏览器获取html 将HTML解析成DOM树将CSS解析成CSS规则树然后让CSS规则树区渲染DOM树生成渲染树然后浏览器解析计算每个渲染树节点的位置和大小在屏幕上画出渲染树的所有节点

发表于 2022-06-07 14:52:31 回复(0)

codeg

#### 1、解析一：HTML解析 - 因为默认情况下服务器会给浏览器返回HTML文件，所以先进行HTML解析，生成dom tree ### 2、css解析 - 当解析HTML时，遇到link引入的css文件时，浏览器开始下载对应的css文件，下载完成后，开始进行css解析（css解析不会阻塞HTML解析）生成cssom #### 3、构建render tree - 当dom tree和cssom tree都有了之后开始进行attachment结合成render tree #### 4、布局和绘制 - 在渲染树上进行布局俩设置每个节点的几何体 - 然后最后将这些节点绘制在屏幕上

发表于 2022-06-18 17:12:27 回复(0)

牛客912701189号

浏览器解析源码生成dom树，解析css生成cssom树，两者结合在生成渲染树，再通过解析算出每一个节点的大小和位置，最后通过paint画出页面

发表于 2022-05-31 12:29:34 回复(0)

牛客663468082号

浏览器获取页面html文件，解析得到DOM Tree，同时解析CSS文件生成Style Rules，接着将DOM Tree和Style Rules结合生成Render Tree，接着进入layout，浏览器通过解析计算出每一个节点的大小和位置，为每一个节点分配屏幕上的确切坐标，最后由GPU进行paint绘制，遍历Render Tree每一个节点，并在屏幕上呈现出来。

发表于 2022-05-23 10:55:39 回复(0)

少年加把劲

（1）浏览器解析html源码，然后创建一个DOM树（2）浏览器解析CSS代码，计算最终的样式数据（3）结合DOM树和最终的样式数据之后，构建一个Render Tree渲染树（4）当渲染树创建完成之后，览器通过解析计算出每一个渲染树节点的位置和大小，在屏幕上画出渲染树的所有节点，生成布局（flow）（5）将布局绘制（paint）在屏幕上，显示出整个页面

发表于 2022-11-01 12:48:12 回复(0)