#每天都是崭新的一天#再累也要照顾好自己

彻底搞清楚浏览器渲染过程

一、概述

在分析浏览器的渲染过程之前,我们先了解一下什么是进程和线程:

(1)什么是进程?

进程是CPU进行资源分配的基本单位

(2)什么是线程?

线程是CPU调度的最小单位,是建立在进程的基础上运行的单位,共享进程的内存空间。

那么我们可以得出结论:

1、进程是会占用系统资源;2、一个进程内可以存在一个或者多个线程,这就是单线程和多线程;3、无论是单线程还是多线程都是在一个进程内。


二、多进程


从上图中可知:

1、浏览器是多进程

2、不同类型的标签页都会开启一个新的进程

3、相同类型的标签页是会合并到一个进程

上图中浏览器的各个进程的主要作用:

1、浏览器进程

(1)负责管理各个标签页的创建和销毁

(2)负责浏览器的页面显示和功能(前进,后退,收藏等)

(3)负责资源的管理与下载

2、第三方插件进程

(1)负责每个第三方插件的使用,每个第三方插件使用时候都会创建一个对应的进程

3、GPU进程

(1)负责3D绘制和硬件加速

4、浏览器渲染进程(咱们这回主要分析的)

1、浏览器内核,主要负责HTML,CSS,JS等文件的解析和执行


三、浏览器内核

浏览器内核就是浏览器渲染进程,从接收下载文件后再到呈现整个页面的过程,由浏览器渲染进程负责,主要流程如下:

1、解析HTML文件和CSS文件,加载图片等资源文件,渲染成用户看到的页面

2、执行解析js文件脚本代码

这里主要讲浏览器页面渲染过程,js脚本解析执行过程,可以看这篇文章:Javascript引擎执行的过程的理解--执行阶段 ,所以本文的js解析的内容会省略

在该过程中浏览器渲染进程会开启多个线程协作完成,主要的线程以及作用如下:

1、GUI渲染线程

(1)负责解析HTML文件构建DOM树,解析CSS,结合DOM树渲染成RenderObject树,然后布局和绘制页面

(2)当RenderObject树需要更新样式属性时,即发生重绘(Repaint);当RenderObject树中的元素规则尺寸,布局或显示隐藏等发生变化,即发生回流(reflow)。

2、JS引擎线程

3、时间出发线程

4、定时器触发线程

5、异步Http请求线程

注:GUI渲染线程与JS引擎线程是相互排斥的,因为JS引擎线程在执行的过程中可能会发生重绘和回流,所以GUI渲染线程执行时候,JS引擎线程会被挂起,等待GUI渲染线程执行完毕之后,JS引擎线程执行时候同理。


3.1GUI渲染线程

首先看一张图,图如下

timg

接下来我们主要分析GUI渲染线程执行的详细过程:

1、解析HTML文件,构建DOM树,同时浏览器主进程负责下载CSS文件

2、CSS文件下载完成,解析CSS文件成树形的数据结构,然后结合DOM树合并成RenderObject树

3、布局RenderObject树,负责RenderObject树中的元素的尺寸,位置等计算

4、绘制RenderObject树,绘制页面的像素信息

5、浏览器主进程将默认的图层和复合图层交给GPU进程,GPU进程再将各个图层合成(conposite),最后显示出页面

注意:

1、默认图层指的是出于普通文档流的元素

2、复合图层一般指的使用动画执行或者<video><iframe><canvas><webgl>等元素,也可以使用z-index将层级高的元素变成复合图层,使用复合图层可以进行硬件加速,其原理是避免了默认图层的重绘和回流,想了解更深入介意自行研究


了解GUI渲染线程的执行过程,我们可以根据原理进行渲染优化:

1、尽可能早的提前引入css文件,例如在头部引入css文件。

2、尽可能早的加载css文件中的引入的资源,例如自定义字体文件,可以使用预加载,在link标签中加入rel=“preload” as = “font”该元素属性,不会造成渲染阻塞。

3、在DOM和CSS渲染之后加载js文件,例如在尾部加载js文件,或者使用该元素属性defer和async,进行js问价异步加载,但是不同的浏览器会有兼容性问题。


四、总结

主要是介绍浏览器的渲染过程,但是没有分析js脚本文件解析过程。

(一)浏览器渲染进程包含1、解析HTML文件和CSS文件,加载图片等资源文件,渲染成用户看到的页面;2、执行解析js文件脚本代码。

(二)整个过程浏览器会开启多个线程协作完成,包括:GUI渲染线程,JS引擎线程,事件触发线程,定时器触发线程,异步HTTP请求线程。

(三)其中GUI渲染线程和JS引擎线程是相互排斥的,因为JS引擎线程在执行的时候有可能会发生重绘和回流。


文章转载:原创
感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/567.html)
交流咨询
    官方QQ群
    群号663940201,欢迎加入!
    sau交流学习社区交流群

微信群
欢迎加入微信群
微信公众号
欢迎关注微信公众号

图文推荐

微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!
您正在使用的浏览器是,不在支持范围内!
为了您的正常使用与展示,推荐使用Chrome浏览器68以上版本
支持浏览器:
火狐浏览器最新版
Safari浏览器最新版
Edge浏览器最新版
IE浏览器10,11