CSS 表示运行处理器密集型 JS 函数（GIF 加载动画不执行）

在本文中，我们将介绍如何使用 CSS 来表示运行处理器密集型 JavaScript 函数的状态，以及如何避免使用 GIF 加载动画。

阅读更多：CSS 教程

使用 CSS 动画表示函数执行状态

在处理器密集型 JavaScript 函数执行期间，我们常常需要向用户展示一个加载状态，以避免用户认为页面已经崩溃或卡住。为了表示函数运行中，我们可以使用 CSS 动画来创建一个旋转加载图标。

示例代码如下：

<div class="spinner"></div>

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

在上述示例代码中，我们创建了一个名为 “spinner” 的 div 元素，并应用了相应的 CSS 样式。该元素通过 border 属性绘制了一个圆形边框，并使用 border-top 属性设置了不同的颜色。通过 animation 属性，我们将 spin 动画应用到了该元素上，表示动画应该持续 2 秒，并且以缓动线性的方式无限重复播放。

当处理器密集型 JavaScript 函数运行时，我们可以通过将该加载图标显示在界面上，让用户明确函数正在执行并未卡住。当函数执行完毕后，我们可以通过相应的 DOM 操作隐藏该加载图标。

避免使用 GIF 加载动画

一般而言，我们会选择使用 GIF 动画来表示页面加载状态。然而，由于 GIF 是一个基于逐帧的图像格式，它会消耗大量的处理能力和带宽。在处理器密集型 JavaScript 函数执行期间，由于处理器被占用，GIF 动画很可能无法平滑播放。这会导致加载动画卡顿或者停止播放，给用户提供错误的信息。

因为 CSS 动画是基于硬件加速的，它不依赖于逐帧的图像序列，而是通过计算和呈现图形实现动画。所以，使用 CSS 动画来表示函数执行状态比使用 GIF 加载动画更加可靠和高效。

总结

通过使用 CSS 动画来表示处理器密集型 JavaScript 函数的执行状态，我们可以确保用户明确函数正在运行，并且避免使用 GIF 加载动画所带来的性能问题。CSS 动画是一种高效且可靠的方式，可以通过旋转加载图标来指示函数执行状态，而无需依赖于基于逐帧的 GIF 动画。

在开发过程中，我们应该优先考虑使用 CSS 动画来展示加载状态，并避免使用卡顿和不稳定的 GIF 动画。这将为用户提供更好的使用体验，并提高网站的性能和可靠性。