地址栏输入内容
当在地址栏输入地址时候,浏览器进程的UI线程会捕捉到你输入的内容,如果是访问的是网址UI线程会启动一个网络线程来请求DNS域名解析,接着开始连接服务器获取数据。如果输入不是网址而是一串关键字,浏览器会使用默认配置的搜索引擎来查询。
网路线程获取到数据之后
当网路线程获取到数据后,网路线程会通知浏览器进程的UI线程,然后UI线程会会创建一个渲染器进程来渲染页面,浏览器进程通过IPC管道将数据传递渲染器进程,然后进入渲染流程。
渲染器进程接收的数据就是html,渲染器进程的主线程将html解析构造dom数据结构(文档对象模型),html通过tokeniser标记化解析成多个标记,根据识别后的标记进行dom树的构造,在dom树构造过程中会创建document对象,然后以document对象为根节点然后不断添加各种元素。 如果执行到为图片,css和js等资源时候,这些资源会另起网络线程进行下载,这些资源不会阻塞html的解析,但html解析过程中遇到script标签,会停止html解析流程,转而去加载解析js。这是因为浏览器不知道js执行是否会改变当前页面的HTML结构,避免html解析无意义等。
HTMlL解析完成后获取dom树,等待解析css完成cssom树,然后会结合为render树,然后就进行layout布局计算每个节点的坐标(x,y坐标)以及节点需要的占用区域(边框尺寸)等,display为none的render树的节点不会出现在layout树上,而伪类before的content内容会出现,因为dom树是根据dom生成,而layout树是通过dom树和css样式来形成的。
获取layout树后我们需要根据什么顺序绘制节点,主线程会遍历layout树创建一个绘制记录表,该表记录了绘制的顺序,这个阶段为绘制。然后生成layer树。
当生成layer树之后,主线程会将这些信息传递给合成线程,合成器线程会进行每个图层栅格化,然后切分成许多图块将每个图块发送给栅格线程,栅格线程把他们那进行图层化然后把它们存储在gpu中。然后每个栅格线程会返回一个drw quads给合成器线程,合成器线程把这些draw quads合并成合成器帧,合成器帧可以获取到每个图块存储的内存位置和绘制在屏幕位置的信息。然后把合成器帧通过IPC传送给浏览器进程,然后浏览器进程传送给GPU,然后页面就可以呈现了。
- transform不会占用主线程,直接在合成线程中进行