浏览器工作原理-浏览器的渲染流程
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 条评论
下一页
