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 的圖像。