Question

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

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

例如：

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

splash-image课程带来了GIF。

在上面的例子中，线程是否花费CPU时间来播放不可见的GIF？

由于

Answer 1

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

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

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

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

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