浏览器渲染流程

前言

文章从浏览器的进程讲述渲染流程

基础术语

进程：进程是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位。启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。

线程：是操作系统能够进行运算调度的最小单位。它被包含在进程之中，是进程中的实际运作单位。具有如下特征：

同一个进程中的线程共享数据。
同一个进程中的任意线程出错，会导致整个进程的奔溃。
一个进程销毁，系统会回收它所占用的资源。
两个进程间的数据是相互隔离的。

tcp/ip:数据包通信流程。应用层给数据，传输层在数据基础上加上端口，网络层在传输层基础上加上IP。数据链路层在网络层基础上加上Mac等信息。最后数据包通过物理层传输。

数据包格式：

数据包传送流程：三次握手、四次挥手

浏览器架构发展示意图。

以前：容易奔溃。卡顿。

现在：更高的资源占用，操纵系统需要给每个进程分配内存（每个进程都包含公共基础的副本，比如javascript运行环境）。不易扩展。模块耦合度高

未来：以服务的形式提供。解决现在存在的问题

渲染流程

1. 键盘按下，浏览器进程接收到此信号，分析输入的信息是关键字还是url地址。如果是关键字浏览器会将地址栏中输入的文字传给默认的搜索引擎。比如输入关键字阳关。https://www.baidu.com/s?tn=25017023_15_pg&wd=‘阳关’。

2 浏览器进程查找浏览器自带的HSTS（HTTP严格传输安全）”列表，这个列表里包含了那些请求浏览器只使用HTTPS进行连接的网站。如果要请求的网站在这个里面，会使用https协议而不是http协议。

3.浏览器进程将2中处理好的信息传递给网络进程。

4.网络进程查找本地缓存是否有该资源，有直接返回给浏览器，没有开始网络请求。

5.DNS查询，把3中的域名解析为IP。

6 tcp 三次握手后，传输http请求。

7.网络进程将服务器响应的数据交给浏览器进程。浏览器进程通知渲染进程，可以和网络进程建立通信获取数据。

8渲染进程接收到上述消息并准备好接受数据，通知浏览器进程。

9浏览器发送垂直信号Vsync给渲染进程的合成线程，指示前一帧的结束和后一帧的开始。

10 合成线程将用户点击，滚动等输入事件传递给主线程（每一帧只会触发一次）。主线程负责处理回调。

11 存在requestAnimiationFrame，主线程执行

12 主线程解析dom

13 主线程解析css 样式，比如rm转变为px,color转变为rgb.

14计算可见元素的尺寸、位置，即布局。

15 生成渲染树

16 开始准备绘制，输出绘制指令列表。

17 主进程将渲染树和绘制指令传给合成线程。

18 合成线程接收到渲染树和绘制指令后。生成图层树。具有如下特效的dom节点会被提升为一个单独的图层。

有 3D 或者透视变换的 CSS 属性；
包含使用硬件加速的视频加码技术的 Video 元素；
有 3D Contex 或者加速的 2D Context 的 Canvas 元素；(注：普通的 2D Context 不会提升为合成层)；
有 opacity、transform 改变的动画；
使用了硬件加速的 CSS filter 技术；
后代包含一个合成层；
Overlap 重叠：有一个 Z 坐标比自己小的兄弟节点，且该节点是一个合成层。

19 将合成层划分为图块，视口附近的图块优先交给光栅线程进行光栅化（填充为位图）

20 光栅化完成后，合成线程收集draw quards的图块信息创建合成帧。发送合成帧给GPU进程

21 GPU 进程负责与 GPU 通信，并完成最后图像的绘制。

应用

下面是常见的减少重绘、重排的方法。

1.减少主线程中 Javascript 的执行时间

对于动画效果的实现，避免使用 setTimeout 或 setInterval（使用 setTimeout/setTimeInterval 来执行动画时，因为不确定回调会发生在渲染流水线中的哪个阶段，如果正好在末尾，可能会导致丢帧。），请使用 requestAnimationFrame。
将长时间运行的 JavaScript 从主线程移到 Web Worker。Web Worker会另外开启一个线程不影响主线程。

2.减少 Layout 和 Paint

1.使用translate,opacity来控制动画，这样会是dom元素提升为一个单独的合成层不影响其他dom元素。单独的合成层绘制过程直接从合成线程开始不影响主线程

2 避免频繁获取dom节点的位置，大小。因为会进入上述的13流程，即常见的重排。example: ele.width = ele.wdith + 10

3 计算元素是否出现在可视窗口时比如图片的懒加载常常习惯监听滚动条滚动距离，然后计算可视化窗口。可以使用intersectionObserve，由浏览器自行优化监视元素是否可见

4.使用willchange属性这个属性告诉了浏览器，接下来会对某些元素进行一些特殊变换。当 will-change 设置为 opacity、transform、top、left、bottom、right（其中 top、left、bottom、right 等需要设置明确的定位属性，如 relative 等），浏览器会将此元素进行合成层提升。example : # ele { will-change:transform,opacity}