我如何知道浏览器何时停止重新绘制 DOM 层/节点，因为它们被遮挡了？

Question

识别： 我正在寻找所有可能的解决方案，以检测由于浏览器优化性能而导致浏览器中 FPS 下降或重绘/重排停止发生的时间，因为文档的某个区域不在视野范围内。

观察： 到目前为止，我研究过的大多数原生 HTML/JS 解决方案都没有考虑到 DOM 的部分，它被页面的其他部分或首屏下方的 DOM 遮挡。虽然有时内容会直接嵌入到父文档中，但有时它可能位于框架或 iframe 中。

测试结果： mozPaintCount 是窗口的 dom 回流的准确表示，当窗口或框架中的文档被遮挡时会正确响应。似乎 Firefox 正在正确识别 dom 的某些部分，并且在它们被遮挡时不会重新绘制它们，当某些东西不在视线范围内时，可以通过 Firefox 检查器工具进行视觉检查，但是检查器在绘制时可能不会考虑视图层次结构重绘区域的亮点。向你致敬，Mozilla！

参考：mozPaintCount

Flash 在屏幕外时也会显示 FPS 减慢，而最新的 Flash Player 11.2 有一个专用事件，当它因优化原因被浏览器限制时会触发。 Flash 也不是一个值得信赖的解决方案，因为它在许多浏览器中默认被禁用。

参考：Flash Player 11.2 Throttle Events

页面可见性更改事件的当前浏览器实现能够在窗口已更改为另一个选项卡或窗口变为非活动状态时进行广播，但不考虑折叠下方的元素/窗口/文档的滚动位置或被其他dom遮住了。然而，在本规范的第二稿中，建议浏览器考虑视口和 DOM 层次结构以提供更准确的结果。

参考：Recommendation Page Visibility, 2011 和 Draft Page Visibility 2, 2013

当元素被遮挡时，CSS 过渡似乎没有被优化掉，因此无法正确测量。我尝试了许多导致回流的不同属性（高度、宽度、盒子阴影等），但无法从中获得任何有意义的指标。

requestAnimationFrame 似乎仅在选项卡更改且浏览器窗口变得模糊时才会限制动画，但不处理首屏以下的内容。另外，因为 raf 只附加在窗口级别，它无法绑定到特定的 dom 节点（这在其实现中似乎是短视的）。

参考：requestAnimationFrame

我还没有完成对 WebGL 的测试，但这仅限于少数现代浏览器（考虑到旧浏览器的 Flash 解决方案，这是可以接受的结果）。

我还没有完成对画布的测试，但这可能是一个很好的解决方案，因为它受到比 WebGL 更广泛的浏览器的支持。

我什至还没有开始考虑嵌入式对象以及它们可以提供什么。

我还没有研究过 ActiveX 控件是否有任何帮助。

我没有看过 HTML5 视频。

动画 GIF 似乎只在 Firefox 中进行了优化。再次向 Mozilla 致敬！

因此，每个浏览器供应商如何优化页面渲染的神秘和魔力继续扼杀我的进步。但是，不能仅依靠元素位置来真正指示元素是否实际可见，因为页面可能有其他层会遮盖框架内容，或者内容可能以排除任何有意义的可见呈现的方式显示（例如更改内容的 3d 旋转使其不可见。）

欢迎就浏览器如何实际优化显示内容或其他说明或对此问题的实际答案进行头脑风暴。

同样，here is an older SO question 也部分包含了这个问题。

Answer 1

我在以下代码中使用了 Mozilla mozPaintCount，但没有得到预期的 FPS 值。

第 1 部分：运行此代码一次以填充变量。

var currentFrames = window.mozPaintCount, currentTime = new Date();

第 2 部分：在第 1 部分之后随时运行此代码。

(window.mozPaintCount - currentFrames)/((new Date() - currentTime)/1000)

结果显示 FPS，对于我的网站，我得到 9FPS。 Chrome FPS 计数器显示 60FPS。

总体而言，浏览器的页面渲染性能是 Web Dev World 中一个相对较新的话题。除了 Chrome DevTools，其他所有主要供应商似乎都对公开工具以提高性能没有太大兴趣。由于对网页渲染性能的兴趣有限，因此大量数据也是如此。

开发人员关注的主要性能理念是。 滚动性能、绘制时间的 CSS 效果、您提到的动画 Gif，当然还有 requestAnimationFrame。 http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

真的，在首先进入这个领域之前，我建议您花一点时间真正了解浏览器在呈现您的页面和更新该页面时做了什么。 http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

我会为你添加更多链接，但我的 SO 代表太低了。

Answer 2

关于你写的关于 requestAnimationFrame 的内容：

另外，因为raf只附加在窗口级别，无法绑定到特定的dom节点

您可以（理论上）让代码在 iframe 中运行，因此 window 对象是整个元素，或者 1px iframe 可能是您内容上的一个点。

我通过查看 mozPaintCount（正如您所说以及 @alexK85 在他们的回答中所建议的那样）在 Firefox 中进行了这项工作，以查看 CSS 更改后是否有重绘（当 iframe 发生 CSS 更改后，浏览器不会立即重绘出视口）。 但是，我还不能在其他浏览器中使用 requestAnimationFrame 做类似的事情来确定是否在 CSS 更改后立即重绘 iframe。

有人对如何使用 raf 来确定浏览器是否进行重绘有任何建议吗？