浏览器重绘/重排

Question

关于这方面的文章已经很多了，我至少在过去的几个小时里一直在谷歌上搜索和阅读，但我很难找到我需要的真正基本的、初级的答案。我正在尝试理解webGl中的动画循环，以及React。

基本上，浏览器会在不重绘整个屏幕的情况下重绘特定的元素吗？重排总是刷新整个屏幕吗？当您使用刷新按钮手动刷新窗口时，与回流或重绘相比，到底发生了什么区别？我知道这项技术已经存在了一段时间了，但我以前从来没有真正投入过。

我只是想了解webGL代码如何在画布元素上生成动画，以及React如何在不重新加载整个屏幕的情况下更改屏幕上的元素。我已经读到了requestAnimationFrame，以及React捆绑和区分虚拟dom的变化，减少了重新渲染的请求数量，但我的问题更多的是整个窗口的重新加载，而不是只重新渲染单个组件。我正在使用gatsby/react和babylonjs构建一个站点，并试图将我的大脑包裹在底层概念上。谢谢。

Answer 1

浏览器做什么在某种程度上是未知的。你给它HTML元素，它会以某种方式将它们绘制在屏幕上。它是如何优化这个过程的还没有定义，所有定义的是结果应该是什么样的。我之所以说“某种程度”，是因为即使是像<p>Hello world</p>这样的简单元素，在不同的浏览器上也会呈现不同的效果，在不同的OSes上的同一浏览器上也会呈现不同的效果，或者在同一操作系统上的同一浏览器中呈现不同的效果，但具有不同的操作系统设置等等。

通常，浏览器构建一个节点树(元素及其内容)，称为DOM。然后，它遍历该树并构建应用CSS所需的任何内容，然后呈现这些元素。大多数浏览器都会尝试在该过程中的不同点缓存数据，以便在页面发生变化时不必从头开始计算所有内容。例如，他们可以生成一个字形(字母的像素)，将这些像素存储在某个地方，下次他们需要绘制相同大小的字母时，可以只使用他们已经生成的像素，而不必从字体定义中栅格化该字母。

浏览器会在不重绘整个屏幕的情况下重绘特定元素吗？

这取决于浏览器。

回流总是刷新整个屏幕吗？

这取决于浏览器。如果浏览器有办法找出它只需要计算树的某些分支的部分回流，那么它可能不必刷新整个屏幕。

当您使用刷新按钮手动刷新窗口时，与回流或重绘相比，发生的情况到底有什么区别？

刷新窗口就像杀死一个程序，然后从头开始重新运行它。所有数据都必须从网络或缓存重新加载，文本被解析为元素，等等。

回流是计算所有元素所属的位置，单词或元素的换行位置，它们的大小。

重绘是在绘制元素。您可以重绘，而不会重排。

webGL代码在画布元素上的动画效果

画布只是一个矩形的像素，类似于<img>。不同之处在于你可以获得几个API中的一个来影响这些像素("2d"，"webgl"，"webgl2"，"webgpu"，...)

当您更改这些像素时，浏览器知道需要重新绘制<canvas>元素。如何重新绘制取决于浏览器，但至少必须遵循规范的规则，例如，像几乎所有元素一样的<canvas>应用了CSS (它可以有边框、背景图像/颜色/图案、圆角等)。元素是一个接一个地组合在一起，所以你可能在画布前面有元素，也可能在画布后面有元素。

正如我上面所说的，浏览器绘制元素的操作是未定义的，但您当然可以想象，如果它可以找出唯一发生变化的是画布的内容，并且画布前面没有元素，画布后面没有任何东西，并且画布是不透明的，那么它可能只会重新绘制画布区域。

不过，这种情况很少见。例如，大多数three.js examples的顶部都有文本位于画布上(示例的标题)。许多人也有FPS计量器。有些有一个下拉式UI。所有这些都是在画布上绘制的，所以至少必须将画布的新内容绘制到窗口中，然后在此基础上渲染其他元素。

同样，这是如何发生的，取决于浏览器。它可以使用软件渲染来逐个像素地绘制这些元素，或者它可能已经将这些元素的内容存储在纹理中，并使用GPU将它们绘制为顶部的四边形。

React如何更改屏幕上的元素，而无需重新加载整个屏幕

我不明白你说的重装是什么意思。React保留了自己的“虚拟DOM”。然后，它尝试将虚拟DOM中的更改应用于实际的浏览器DOM。如果不需要对某些元素进行更改，这些元素将不会受到影响。

从浏览器的POV来看，没有什么不同。浏览器只能看到DOM。如果您对DOM进行了更改(使用React或其他任何方法)，那么，一旦执行your current event exits，浏览器就会安排一个任务遍历DOM并重新绘制页面(使用优化来重新计算/重新绘制less由浏览器决定)。