探寻浏览器渲染的秘密

(给前端大全加星标,提升前端技能

作者:前端桃园 公号 / 桃翁

前言

起因是这样,有运营小姐姐跟我反馈某个页面卡顿的厉害。心中突然一想,妈耶不会有bug吧,心慌慌的。然后自己打开页面,不卡呀,流畅的一xx,肯定是她弄错了。带着去教她如何正确的使用电脑的想法我自信的下了楼,然后自信的在她电脑上打开了页面,我滑,我滑,我再滑。woc,页面咋不动啊,woc,电脑都卡死了。什么情况,然后有其他运营反馈 air 上并不卡顿。页面下滑为何卡顿?在mbp和mba上的表现为何不同?这一切的问题究竟是从何而起?请老板们带着这两个问题往下看,我将一步一步揭开浏览器渲染的面纱。

先上张图让大家感受一下被支配的恐惧。注意,那个 GPU 进程内存空间占用 10.9 GB。

探寻浏览器渲染的秘密_第1张图片 mbp上

知识储备

要搞懂我下面说的,首先你需要先知道现代浏览器的架构以及显卡、GPU 和屏幕分辨率的关系。当然了,就算这些不了解,也是可以接着往下看的,我会简单的讲一下,嘻嘻嘻。

现代浏览器的架构

因为这里并没有什么规范,各大浏览器厂商的各自的架构设计也并不相同(不过都是大同小异),我就以 chrome 浏览器为例说一下 chrome 的设计。

chrome 浏览器从最初的单进程发展到现在的多进程架构。我们可以从上面我发的图看到浏览器包括:一个浏览器进程、一个 GPU 进程、一个网络进程、多个渲染进程和多个插件进程。

渲染进程

了解了上面的浏览器的架构,下面我们说说今天的主角渲染进程,关于浏览器多进程之间是如何配合最后在屏幕上展示内容的,这个后面会写文章记录。现在我们说说渲染进程的事儿。

探寻浏览器渲染的秘密_第2张图片 渲染流水线

按照渲染的时间顺序可以分成以下几个子阶段:构建 DOM 树、样式计算、布局、分层、绘制、分块、光栅化、合成东西有点多,为了快速记忆和理解,需要重点关注每个子阶段的输入和输出以及做了哪些处理。

还需要了解渲染进程中的几个线程。包括主线程(main thread)、工作线程(work thread)、合成线程(compositor thread)以及光栅化线程(raster thread)后面会总结这些线程的具体功能,我们先看一下整体的渲染流程。

构建 DOM 树

探寻浏览器渲染的秘密_第3张图片 构建 DOM 树

DOM 树是什么相信大家都知道,我就不多 BB 了。因为浏览器无法直接理解和使用 html 文件,所以需要将 html 文件转为浏览器能够理解的结构 DOM 树。

网页中常常包含图片、css、js 等资源文件,这些资源浏览器会去各种渠道获取(缓存、网络下载等)。在构建 DOM 树的时候主线程会去请求他们,相关资源会通过进程之间的通信(IPC)通知网络进程去下载这些资源。在遇到 

你可能感兴趣的:(探寻浏览器渲染的秘密)