浏览器的渲染原理

进程与线程

进程:一块内存空间,存储程序运行的所有资源,进程间通信需要双方都同意才可通信

线程:进程中的执行单位,所有代码都必须在线程里执行(一个进程至少有一个主线程),每个线程共享进程中的资源

浏览器的进程与线程模型

浏览器主线程:

负责界面展示,用户交互,子进程管理等功能

gpu进程:

处理页面的图片渲染,提高网页的绘制速度

网络进程:

处理网络请求,加载网页,图片,视频,下载文件等

渲染进程:

渲染进程启动后,会开启一个渲染主线程,负责处理html,css和js代码

渲染流程:

1.解析html

将得到的html字符串,转换为两棵树(dom树和css树)

css表类型:内部样式表,内联式样式表,外部样式表,浏览器默认样式表

预解析线程:并行获取和解析外部css文件,以减少阻塞,提高html执行效率(此外还会预解析js文件)css解析不会直接阻塞html解析,单js解析会直接阻塞html解析

2.样式计算

将cssom树中的样式规则,应用到dom节点上,形成一颗带有样式的dom树(涉及css属性值计算过程)

3.布局

确定每个节点的几何信息(如相对单位),最终生成一颗布局树(dom树和布局树会不一样,因为有些节点的几何信息是隐藏的)

4.分层

每个节点都从属于某个图层,当页面变化时,不需要重新绘制整个页面,只需绘制对应改变节点所在的图层即可(有些操作会触发单独分层,比如

transform:translateZ(0)触发gpu加速

滚动容器元素

层叠上下文相关的属性【z-index、opacity、filter、position】

文字或图片超出容器边界

相邻元素发生重叠裁剪

正在执行transform:opacity等动画的节点

使用will-change预先声明变化的元素)

5.绘制指令

为每个图层生成绘制指令列表,将指令提交给合成线程

6.分块

合成线程将图层分成更小的块(多线程一起分块,即从线程池调用线程共同进行分块操作,完成后再归还线程池)

7.光栅化

位图:像素点组成的图片,记录了每个像素点颜色,透明度等信息

把绘制指令转化为位图(优先转化可见区域的瓦片)

分块完成后,所有瓦片会提交到gpu进程,由gpu进程生成位图,这个过程会使用gpu加速

相关推荐
Csvn9 小时前
WASM
前端
修己xj11 小时前
我用 AI 给自己写了一个 Markdown 编辑器,然后把它开源了
前端
FRing0311 小时前
vue2干货总结2(v-bind、v-for、v-model、指令修饰符、v-bind操作class和style)
开发语言·前端·vue.js·vue2
幸运小猿11 小时前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
moshuying13 小时前
网购能买Token了!
前端
h_654321013 小时前
echarts实现柱状图加一条横线
前端·echarts
风骏时光牛马13 小时前
生成一个后端标题,只需要一个标题,不需要其他的任何文本。
前端
子非鱼@Itfuture13 小时前
关于前后端联调中登录状态/登录信息失效?
java·前端
郭小李13 小时前
openFeign入门
java·开发语言·前端
馒头不想说话13 小时前
AI当运营,帮你省人力
前端