这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战html
渲染进程几乎负责 Tab 内的全部事情,渲染进程的核心目的在于转换 HTML CSS JS 为用户可交互的 web 页面。渲染进程中主要包含如下线程:web
后文咱们将逐步介绍不一样线程的职责,在此以前咱们先看看渲染的流程浏览器
当渲染进程接收到导航的确认信息,开始接受HTML数据时,主线程会解析文办字符串为DOM。markdown
渲染html为DOM的方法有HTML Standard定义。网络
网页中经常包含诸如图片,CSS,JS等额外的资源,这些资源须要从网络上火车cache中获取,主进程能够在构建DOM的过程当中会逐一请求它们,为了加速preload scanner 会同事运行,若是在html中存在 等标签,preload scanner会把这些请求传递给Browser process中的network thread进行相关资源的下载。异步
当遇到 async
不过开发者其实也有多种方式来告知浏览器如何应对某个资源,好比说若是在script标签上添加了async或defer等属性,浏览器会异步的加载和执行JS代码,而不会阻塞渲染。布局
仅仅渲染DOM还不足以获知页面的具体样式,主进程还会基于CSS选择器解析CSS获取每一个节点的最终的计算样式值,即便不提供任何CSS,浏览器对每一个元素也会有一个默认的样式post
想要渲染一个完整的页面,处理获知每一个节点的具体样式,还须要获知每一个节点在页面上的位置,布局其实就是找到全部元素的集合关系的过程,其具体过程以下:动画
经过遍历DOM及相关元素的计算样式,主线程会构建出包含每一个元素的坐标信息及盒子大小的布局树,布局树和DOM树相似,可是其中只包含页面课件的元素,若是一个元素设置了display:none,这个元素不会出如今布局树上,伪元素虽然在DOM树上不课件,可是在布局树上是可见的。
即便知道了不一样元素的位置及样式信息,咱们还须要知道不一样元素的回执前后吮吸才能正确绘制出整个页面,在绘制阶段,主线程会遍历布局树以建立绘制记录,绘制记录能够看作是记录各元素绘制前后前后的笔记。
熟悉PS等绘图软件的同窗确定对图层这一律念不陌生,现代Chrome其实利用了这一律念来组合不一样的层。
符合是一种分割页面为不一样的层,并单独栅格化,随后组合为帧的技术,不一样层的组合由compositor线程(合成器线程)完成
主线程会遍历布局树来建立层树,添加了'will-change'CSS属性的元素,会被看做单独的一层。
你可能会想给每一个元素都添加上'will-change',不过组合过多的层也许会比在每一帧都栅格化页面中的某些小部分更慢。
一旦层树被建立,渲染顺序被肯定,主线程会把这些信息通知给合成器线程,合成器线程会栅格化每一层,有的层能够达到整个页面的大小,所以,合成器线程将把它们分红多个磁贴。并将每一个磁贴发送到栅格线程,栅格线程会栅格化每一个磁贴存储在GPU显存中
一旦磁贴被光栅化,合成器线程会手机成为绘制四边形的磁贴信息以建立合成帧
合成帧随后会经过IPC消息传递给浏览器进程,因为浏览器的UI改变或者其余拓展的渲染进程也能够添加合成帧,这些合成帧会被传递给GPU用以展现在屏幕上,若是滚动发生,合成器线程会建立另外一个合成帧发送给GPU.
合成器的优势在于,其工做无关主线程,合成器线程不须要等待样式计算或者JS执行,这就是为何合成器先关的动画最流畅,若是,某个动画设计到布局或者绘制的调整,就会设计到主线程的重计算,天然会慢不少。