Elixir Phoenix LiveView滚动动画引发CPU占用过高的优化求助

你的问题核心在于客户端与LiveView的频繁事件通信、低效的DOM结构以及未优化的CSS动画，当客户端数量达到200时，这些开销被放大导致CPU占用翻倍。以下是针对性的优化方案：

1. 将动画逻辑完全迁移到前端，消除前后端通信开销 #

当前实现中，客户端计算行数后通过pushEvent通知LiveView，再由LiveView返回内联动画样式，这会产生大量WebSocket消息，同时增加服务器和客户端的负担。直接在前端Hook中完成行数判断和动画控制即可：

修改Hook代码：

Hooks.MessageBox = {
  mounted() {
    this.updateScrollAnimation();
    // 监听消息内容变化，动态调整动画（可选）
    this.observer = new MutationObserver(() => this.updateScrollAnimation());
    this.observer.observe(this.el, { childList: true, subtree: true });
  },
  updated() {
    this.updateScrollAnimation();
  },
  destroyed() {
    this.observer?.disconnect();
  },
  updateScrollAnimation() {
    const content = this.el.querySelector(".message-content");
    if (!content) return;

    const computedStyle = window.getComputedStyle(content);
    const lineHeight = parseInt(computedStyle.lineHeight);
    const contentHeight = parseInt(computedStyle.height);
    const maxVisibleLines = 3;
    const maxHeight = lineHeight * maxVisibleLines;

    // 根据内容高度添加/移除滚动动画类
    if (contentHeight > maxHeight) {
      content.classList.add("scrollable");
      // 按内容长度动态计算动画时长（每滚动一行设为2秒，可按需调整）
      const duration = (contentHeight - maxHeight) / lineHeight * 2;
      content.style.animationDuration = `${duration}s`;
    } else {
      content.classList.remove("scrollable");
      content.style.animationDuration = "";
    }
  }
};

2. 优化CSS动画，用GPU加速降低CPU消耗 #

避免使用margin-top、top等会触发页面重排的属性，改用transform: translateY()实现滚动，利用GPU加速减少CPU占用：

/* 消息容器：固定3行高度，溢出隐藏 */
.message-box {
  --line-height: 1.5rem; /* 提前定义行高变量 */
  height: calc(var(--line-height) * 3);
  overflow: hidden;
  line-height: var(--line-height);
}

/* 滚动动画：仅内容超出时生效 */
.message-content.scrollable {
  animation: message-slideup linear infinite;
}

@keyframes message-slideup {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + var(--line-height) * 3));
  }
}

3. 简化DOM结构，移除冗余元素 #

不需要循环生成10行<li>，直接用单个容器包裹消息内容即可，减少DOM节点数量和渲染开销：

修改LiveView模板：

<div class="message-box" phx-hook="MessageBox">
  <div class="message-content"><%= @announcement %></div>
</div>

4. 防抖处理updated钩子，避免频繁计算 #

如果LiveView的updated钩子触发过于频繁（比如汇率实时更新场景），给updateScrollAnimation添加防抖逻辑，减少不必要的重复计算：

在Hook中添加防抖工具函数：

// 防抖工具函数
function debounce(func, delay = 300) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

Hooks.MessageBox = {
  mounted() {
    this.updateScrollAnimation = debounce(this.updateScrollAnimation.bind(this));
    // ... 其他初始化代码
  },
  // ... 其他方法
  updateScrollAnimation() {
    // ... 原计算逻辑
  }
};

优化效果说明 #

• 消除了客户端与LiveView的WebSocket通信开销，服务器无需处理200个客户端的行数计算请求
• 使用GPU加速的CSS动画，大幅降低客户端CPU占用
• 简化DOM结构，减少页面渲染和重排开销
• 防抖处理避免了不必要的重复计算

内容的提问来源于stack exchange，提问作者AungMyoOo