返回和重新启动是前端开发的高频词汇之一。您可以在各种面对面和性能优化文章中看到，但其中许多已被带来。这篇文章带您了解浏览器渲染过程中返回和重新启动的原则。
浏览器的主要功能是向服务器发送请求，下载并分析浏览器上的资源。将网页显示给浏览器的过程实际上是由渲染引擎完成的。许多渲染引擎都有许多渲染引擎。在这里，我们以Webkit为例。
Webkit渲染引擎的主流
从上图中，我们可以看到浏览器渲染过程如下：
渲染树
Webkit将渲染树中的元素变成了渲染对象。每个渲染对象都代表一个矩形区域，通常与相关节点的CSS框相对应，包括几何信息，例如宽度，高度和位置。该框的类型将受到与节点相关的“显示”样式的影响。根据不同的显示类型创建不同的渲染对象
WebKits RenderObject类是所有渲染对象的基类，其定义如下：
每个渲染对象都有一个方法和方法，该方法对应于返回和重新启动的方法。layout是一个递归过程。根渲染对象从HTML元素开始，然后遍历部分或所有树结构。每个渲染对象将调用需要布局的子代或方法。
当创建渲染对象并添加到渲染树中时，它仅结合了DOM节点及其相应样式，并且不包括位置和大小信息。因此，需要此过程来计算其位置和大小，这就是称为返回。
全局布局和增量布局全局布局是指整个树渲染范围的布局。通常，它是同步的。触发原因可能包括：
增量布局：指标记的渲染对象的布局。从基础上讲，它是异步执行的。浏览器将增量布局的“命令”添加到队列中，调度程序将触发这些命令的批处理执行。但是，请求样式信息的脚本（例如OfficeHeight）可以同时触发增量布局。
为了避免所有小更改的整体布局，浏览器都使用肮脏的位系统。如果更改渲染对象或将其标记为“脏”，则需要执行布局。
有两种类型的标记：“肮脏”和“孩子是肮脏的”。“孩子是肮脏的”意味着，尽管渲染对象并没有自行改变，但它至少需要一个子代理。
触发条件：
此阶段主要是为了计算节点的位置和几何信息，因此，当页面布局和几何信息更改时，需要返回流。
通过构造渲染树和反流阶段，我们知道哪些节点是可见的，以及可见节点和特定几何信息的样式（位置，大小），然后我们可以将渲染树的每个节点转换为实际现实中的每个节点屏幕上的屏幕。像素，此过程称为赎回。
在重新启动阶段，系统遍历渲染树，并调用渲染对象以在屏幕上显示渲染对象的内容的方法。就像布局一样，图形也分为两种类型：全局（绘制整个整个演示树）和增量。
绘图顺序的顺序实际上是输入堆栈样式上下文的元素的顺序。这些堆栈将被向前绘制，因此该顺序会影响绘图。渲染对象的堆栈顺序如下：
触发条件：
重新绘制是由元素外观的更改（例如更改等）触发的浏览器行为，它仅影响元素，样式的外观，并且不会影响几何属性。
以下是一个小例子，它更直观地调试性能工具
屏幕截图可以看作是一个完整的渲染过程JS / CSS>样式>布局>绘图>合成
如果我们只是修改背景颜色
通过上图，发现了背景颜色，渲染过程跳过了链接（布局），并继续绘制和后续过程。
上图是一个非常经典的流程图。它是由浏览器运行的单个帧的渲染流线，称为Pixel Pipeline
单个帧渲染流线的每个链接可能会影响性能，因此我们必须尽可能最大程度地减少管道的步骤。不一定要处理管道的每个部分的每个帧的处理。实际上，无论是使用JavaScript，CSS还是网络动画。当实现视觉变化时，通常有三种方法可以运行指定的帧：
1. JS / CSS>样式>布局>图形>合成
如果修改了元素的布局属性，也就是说，它会触发返回。在分析了一系列子阶段之后，此过程被称为返回。返回流需要更新完整的渲染线，因此费用是最大的。
2. JS / CSS>样式>绘图>合成
如果修改背景图片，文本颜色或阴影等，浏览器将跳过布局，但是将执行以后的绘图和后续过程。
3.JS / CSS>样式>合成
某些属性可以使渲染流线跳过布局和绘图链接。您只需要合并层，例如：转换和不透明度属性。
只有将元件促进到合成层之后，转换和不透明度不会触发油漆。如果不是合成层，它仍然会触发油漆。
根据渲染流线的顺序，回报肯定会触发赎回，并且可能不一定发生重新启动。
如果您想知道指定的CSS属性中的哪一个将触发以上三个版本中的哪一个，请检查CSS触发器。如果您想快速理解高性能动画，请阅读合成元素的属性部分。
在上面，我们引入了像素管道的相关内容，知道返回和重新启动的成本非常昂贵。如果我们不断更改页面的布局，它将导致浏览器在页面上消耗大量费用来计算页面。经验非常不友好。偿还优化后端性能优化的重要手段。
减少强制同步布局，以避免频繁读取背面/重新绘制的属性。如果您确实需要多次使用它，则可以使用变量来缓存。
例如，当以下属性或方法时，浏览器将立即清除队列
阅读和写入偏移家庭，滚动家庭和客户家庭属性
现代浏览器将优化频繁的返回或重新分配操作。浏览器将保持队列，并将所有导致返回并重新划分为队列的操作。如果队列或时间间隔中的任务数量达到阈值，则浏览器将清空队列并执行批处理过程，因此可以将多次和重新启动变成一次。
避免经常操作DOM来创建文档范围。DOM操作是在文档范围上执行的，最后将其安装到他的父节点上。
打开与GPU加速度类似的概念，例如PS，并且每个层中的布局和油漆不会互相影响。开放GPU加速元件将单独提高到一层。
一些文章已经写成转换和不透明度的属性，这些属性不会引起返回和重新启动，但是上述示例的实际效果（仅拦截动画的起点部分）是在开始和结束时有一个重新启动动画（绘画。只有在动画过程中，只有在动画过程中才会在动画过程中。composite综合。为什么这里有任何重新介绍？这是因为两个属性用于应用动画或过渡属性转换和不透明度。该层也将失败。因此，在动画启动之前创建赎回层。动画结束后，将删除独立的合成层，并在删除后将触发重新启动。
您可以在控制台的层工具处看到合成层：
在Webkit内核的浏览器中，CSS3的转换，不透明度和过滤器的属性可以实现合成效果。浏览器将增强渲染层到合成层
如何打开硬件加速度？硬件加速不是金油。单独创建合成层是昂贵的。每次创建合成层时，都必须为其分配内存。
复合层的尺寸层的管理也更为复杂，在某些低端和终端移动设备中，它更为明显。GPU加速度的滥用将导致该页面被卡住甚至闪回。
不要滥用用两个元素a，b滥用硬件加速度隐藏的合成，如果添加translatez（0）属性或其他属性，则它们具有部分重叠，a在底部B上，以便将A元素改进到合成中对于合成器，为了维持下一个B中A之间的关系，B元素也将促进到合成层。
例如：
在上图中，a被促进到合成层，因为A级别为低，以维持原始的层次关系，B也将将B提升到合成层中。
我做了一个极端的例子。以Singtao网站为示例游戏机，以了解合成层的所有元素
想象一下，如果我们不将较低的元素纳入合成层，则可能会导致大量毫无意义的改进合成层。尽管浏览器具有一层压缩机制，但许多情况无法压缩。爆炸性浏览器崩溃，口吃等。
如果您现有的项目在某些低端或终端移动设备上不那么平滑，则可以检查其是否由隐藏的合成引起。您可以使用调试工具查看
有很多黄块吗？如果有大量的合成层，则绝对是不合理的，可以与合成原因结合进行研究。
使用requestAnimationFrame告诉浏览器 - 您想执行动画，并要求浏览器调用指定的回调函数以更新动画，然后再进行重新绘制。参数。
使用requestAnimationFrame替换视觉更改，例如Settimeout或setInterval，以避免轻松引起帧并引起口吃。
注意：请勿调用会触发“重新回调”功能中强制同步布局的属性或方法
使用requestIdleCallback方法在浏览器的空闲时间中排队函数。这使开发人员能够在主事件的循环中执行背景和低优先级工作，而不会影响延迟的关键事件，例如动画和输入响应。按照高级首次通话的顺序执行。但是，如果回调函数指定执行超时，则可以破坏执行订单，以便在超时之前执行该函数。
在回调中构造文档片段，然后在下一个帧回调中进行真正的DOM更改。
还有许多其他示例，没有一个一个。这是一个简短列表：
从浏览器渲染过程的角度来看，本文描述了返回和重新启动的原则。通过性能调试工具，像素管道的五个关键路径更加直观。在本文的最后，有一些优化背景和重新介绍的常见示例。希望您对青年人有帮助，有不正确或严格的地方，欢迎纠正！
参考连接
浏览器的工作原理：幕后新的网络浏览器显示
渲染性能
你真的知道并重新绘制吗
浏览器渲染过程和复合（渲染层合并）简单摘要
开源地址www.zoo.team/openweekly/
Zooteam是一个年轻的热情和创造性的前端团队，属于Zhengcaiyun的产品研究与发展部的研发部，基地位于风景如画的杭州。该团队目前拥有50多个前端合作伙伴，平均年龄是平均年龄的。在27％的27％中，有27％是一名全面的工程师，是一个合适的青年风暴组。会员既构成来自阿里和Netease的“老”士兵，以及吉吉安格大学，中央科学技术大学，杭州等的新鲜人员大学。除了日常业务对接外，团队还在材料系统，工程平台，建筑平台，绩效经验，云应用程序，数据分析和可视化，促进和降落一系列内部技术的方向上进行技术探索和实际战斗产品，并连续发展前端技术系统的新边界。
如果您想更改此事，您想开始折腾；如果您想更改警告，则需要有更多的想法，但是您不能打破游戏。如果您想更改，您有能力取得结果，但您不需要您；如果您不需要您；如果您不需要您；如果您想改变自己想做的事情，则需要一个团队来支持它，但是没有地方可以带人。如果您想改变既定的节奏，那将是“工作时间5年和3年的工作经验”；如果您想更改原始内容是很好的启蒙，但是总会有那一层窗纸的模糊……如果您相信相信的力量，请相信普通人可以实现非凡的事物，并相信您可以遇到一个更好的自我。如果您想参加开展业务的过程，促进具有深度业务理解，全面的技术系统，技术创造价值和有影响力的前端团队的前端团队的成长，我认为我们应该说话。任何时候，等待您写东西，将其发送给