ng-hide 元素下的 GIF

Question

我知道在 HTML 元素中使用 GIF 时，运行我的 JS 的线程与播放 GIF 的线程相同。

我想知道当 GIF 在ng-hide="true"元素下时会发生什么，它是否仍然消耗 CPU 时间？

例如：

<div ng-hide="true" class="splash-image"></div>

splash-image类引入了 GIF。

在上述情况下，线程是否在播放不可见的 GIF 上花费了 CPU 时间？

谢谢

Answer 1

有两个使用内存的区域：下载 gif 和在浏览器中绘制它。

正如其他人在评论中提到的那样，ng-if 从 DOM 中删除元素，其中 ng-hide 只是将display: none应用于元素。

如果您使用控制台运行几个测试，您可以看到尽管从 DOM 中删除了元素，但即使 ng-if 条件返回 false，资产仍会被下载。

所以基本上 ng-if 和 ng-hide 都会下载资产，但都不会花费资源来绘制元素。 唯一的区别是在下载资产后，ng-if 从 DOM 中省略了它。

您可以在下面看到普通图像的绘制结果，然后是带有 ng-hide 的图像。