浏览器工作原理-浏览器的渲染流程
2019-10-28 18:01:24 0 举报
浏览器工作原理---浏览器渲染页面流程
作者其他创作
大纲/内容
1.link引入css文件 2.style标签CSS 3.元素的style属性内嵌css
第一种
CSS继承规则和层叠规则
栅格化使用GPU加速生成位图,保存到GPU中
计算DOM书中每个节点具体样式
转换样式表属性值,是css标准化
渲染引擎接收css执行转换为浏览器理解结构-styleSheets
浏览器进程Viz组件,接收合成线程发送的命令,将页面内容绘制到内存中,最后将内存显示到屏幕上
现在?交给渲染引擎的合成线程了?不确定
渲染引擎会为特定的节点创建新的图层
规则
没有提供样式采用浏览器提供UserAgent样式
1.构建DOM
计算出每个元素位置信息,渲染引擎为特定的节点生成专用图层,对应布局树的图层树
合成线程将图层划分为图块tile
进行布局计算(布局树节点位置)
具备节点父节点
浏览器无法直接理解使用HTML(转化为BS理解DOM树)
把CSS转换为浏览器理解结构
5.绘制
4.分层(layer)
2.样式计算(RecalculateStyle)
主线程将绘制列表commit给合成线程
合成线程会按照视口附近图块优先生成位图,位图是有栅格化来执行,所谓栅格化就是将图块转化为位图。
涉及到跨进程
第二种
构建DOM树输入内容经由HTML解析器输出DOM结构
遍历DOM树节点添加布局树不可见节点忽略
来源
图层树构建完成后,渲染引擎会对每一个图层进行绘制(渲染引擎会将图层拆分多个绘制指令)
光栅化后,合成线程会生成一个绘制图块命令(DrawWQuad),将该命令发送个浏览器进程
拥有层叠上下文属性的元素(position,z-index,opacity....)
需要剪裁clip地方(超出范围,overflow)
7.合成显示
绘制列表记录绘制顺序和绘制指令,实际上绘制操作有渲染引擎中的合成引擎来完成。
并不是布局树上的每个节点都包含一个图层,如果一个节点没有图层,那么这个节点属于父节点图层
浏览器渲染流程
6.栅格化(raster)
创建布局树
3.布局阶段(layout)
0 条评论
下一页