webkit内核渲染过程概述

Posted 2022-12-05 茂树24

由于资源加载过程和网络模块都可以多并发多线程的执行，所以可以请多个URL没有必要等到上一次url执行完毕之后在处理下一个URL，但即便如此也是需要一个url缓存的以便于应对多并发的情况。

经过资源加载和网络模块之后，由于在整个渲染过程中，这个模块是非常慢的，只至于能把这一部分的优化做好可能对整个网络提升至关重要。当得到用户输入的url之后，就会请求资源加载模块进行资源加载，同时这个模块依赖于网络模块进行信息请求和链接。这个url请求可能来自于用户输入也可能来自于对html文档中链接的处理。但是无非就是请求html、css、js、图片视频等资源。对于这些资源请求过程中，只有js的请求是与生成DOM树同步的，其他资源的请求都是异步的。

由于js同步阻塞DOM进程的渲染，所以说应该在资源加载顺序上做一个权衡，以便于尽最小的时间加载更多的资源。同时webkit浏览器在这方面也做出了优化，那就是在请求js代码的时候，虽然阻塞的主进程对DOM树的渲染，但是他会开一个线程浏览后面的html代码，然后将所有的请求文件URL都发送url缓存中进行资源的请求工作，所以js虽然阻塞的DOM树的生成，但是不会阻塞资源的请求。

资源加载慢有一个很重要的弊端变现在图片的加载上，比如：DOM树便利到img元素的时候进行图片的加载，但是很有可能DOM树绘制完成进行布局了，但是在布局的时候因为没有明确img长宽、图片也没有加载进来，所以布局并不知道图片的大小。只能默认的处理，如果布局有依赖这种方式的比如瀑布流可能要明确的加上图片的大小信息了。

当DOM建立完成只有会执行DOMcontent事件，当所有的资源加载完毕之后，会执行onlaod事件。

当DOM树构建完成，css也解析完毕形成内部表示形式了，就可以对DOM中每一个元素进行创建一个RenderObject对象，这个对象是将DOM中的节点与对应的CSS样式结合在一起，与此同时会进行CSS布局计算，根据元素的层次结构生成一颗一颗的RenderLayout树，同时构建该树的抽象绘图上下文。

绘图上下文是抽象的，要依托具体的绘图实现类进行实现操作，这个实现类可能很简单也有可能很复杂，比如chrome中会用到多线程机制和GPU硬件加速机制进行图片的绘制，然后将图片保存到2D图像库和3D图像库中，最终对绘制完毕之后，将图像库中的图像进行合并最终显示给用户。

上述的过程仅仅是图像绘制过程的主要的步骤，同时，可能后续由于用户的交互操作和视频等媒体的引入会不断的重复某些过程。最显然意见的就是，js对DOM树的操作，如果在用户交互比如事件发生之后，如果对DOM树进行修改，那么将会从DOM树到最终图像重新执行，如果对CSS大小和布局样式进行修改，那么将重新执行布局、绘图过程，如果仅仅对颜色更信息进行修改则仅仅对RenderObject树修改之后、重新绘制该元素。