这也许是一道面试题,同样也是关于到线程跟进程,在上次文章中有一点点的讲解,有兴趣的可以观看,本次的总结属于个人学习后的一个总结,可能不是一个完整的答案,但希望能对大家有一些启发;最后如有问题可私信或评论。
重点内容为第二部分。
一、浏览器渲染的过程
当我们拿到一个网址并打开时,浏览器就开始的整个渲染过程。
整个过程可以分成两步:
1.网络请求
浏览器会发送请求,随后拿到HTML文档,生成一个渲染任务,并将其交给渲染队列;
2.渲染(本次主要总结内容)
渲染队列开始进行解析及渲染。
这就是浏览器的渲染过程,但在这个渲染过程中又发生了什么呢,下面开始讲解。
二、渲染流程
渲染流程大致分为8个阶段:HTML解析、样式计算、布局、分层、绘制、分块、光栅化、画。
每个阶段都有明确的输入输出,可以理解为整个过程为一个组织严谨的生产流水线。
1.解析HTML
解析过程可以分成两个线程(一个为主线程,一个为预解析线程),
主线程遇到link时,不会等待去下载CSS文件,而是继续解析后续的HTML;这时预解析线程开始下载和解析CSS。正是因为有预解析线程,所以CSS不会阻塞HTML解析。
主线程遇到script时,会停止解析HTML,转而等待JS问价下载好,解析完JS代码后,才会继续解析HTML。与CSS的不同之处在于JS代码的执行过程中有可能修改当前的DOM树,所以DOM树的生成必须赞成,这也是JS会阻塞HTML解析的原因。
在本次过程中,输入的是请求过来的HTML文档,输出的是DOM树和CSSOM树(浏览器的默认样式、内部样式、外部样式、行内样式均会包含在CSSOM树中)
注意:不会生成JS树,因为JS代码只需要执行一遍,后续的步骤用不到JS
2.样式计算
主线程通过遍历的方式,对DOM树中的每个节点进行计算,得到最终的样式
在本次过程中,输入的是DOM树和CSSOM树,输出的是带有样式的DOM树
3.布局
依次遍历DOM树的每一个节点,计算每个节点的几何信息,并输出Layout树
在本次过程中,输入的是带有样式的DOM树,输出的是Layout树
注意:DOM树的结构和Layout树不一定一一对应(有多种原因)
4.分层
主线程使用一套复杂的流程对整个布局树中进行分层;
好处:当某个层发生改变,仅会对某个层进行处理,提升效率
在本次过程中,输入的是Layout树,输出的是分层结果
5.绘制
主线程根据分层结果生成对应的绘制指令(用于描述这一层如何画出来,并没有开始绘制)
在本次过程中,输入的是分层结果,输出的是绘制指令
6.分块
主线程将每个图层的绘制信息提交给合成线程,剩余工作由合成线程完成;
合成线程会使用多个线程来将每个图层进行分块;
在本次过程中,输入的是绘制指令,输出的是分块信息
7.光栅化
合成信息将分块信息交给GPU进程,让GPU进程完成光栅化
GPU会优先处理靠近视口区域的快;
光栅化的结果就是产生一块一块的位图
在本次过程中输入的是分块信息,输出的是位图
8.画
合成线程拿到每个位图后,生成指引(quad)信息,并将其交给GPU进程,由GPU进程产生系统调用,提交给硬件,完成最终的屏幕成像。
在本次过程中输入的是位图,输出的是最终的屏幕成像
以上便是本次的总结,最后祝大家元宵节快乐