React/Gatsby中使用Lottie动画跨页导航时出现DOM阻塞卡顿问题

数据老陈

2026-10-24

问题核心根因

所有Lottie适配插件都复现的跨页面导航卡顿，本质是Lottie动画实例在SPA路由切换时未被正确销毁，导致资源持续累积：

三类插件底层都基于lottie-web核心实现，每个动画实例创建后都会启动独立的requestAnimationFrame逐帧渲染循环，同时挂载专属的SVG DOM节点完成绘制
Gatsby默认采用客户端路由模式，页面切换时仅卸载对应组件树，若没有主动触发Lottie实例的销毁逻辑，旧的动画循环不会终止、对应的DOM节点也不会从文档流移除
每一次快速来回切换路由，都会累加一个正在运行的动画实例，切换几次后主线程被动画渲染占满，就会出现DOM渲染停滞、残留冗余动画内容的表现，和观测到的内存泄漏特征完全匹配
当前实现直接将Lottie作为无状态JSX节点渲染，未接管实例生命周期，依赖组件库的默认销毁逻辑在快速路由切换时，会和React的批处理更新产生执行时序竞争，无法百分百完成资源清理。

快速调试定位思路

打开Chrome DevTools的Performance面板，录制10次左右快速来回导航的操作过程：如果主线程存在大量连续未被取消的requestAnimationFrame回调、Lottie逐帧绘制任务，就能确认是实例未正常销毁
切换回首页后打开Elements面板，搜索带lottie-svg类名的DOM节点：正常卸载后应无残留，如果存在多个同类节点，说明DOM清理逻辑失效
打开Memory面板做堆快照对比：如果多次切换路由后，AnimationItem类的实例数量持续线性增长，即可锁定泄漏点为未被GC回收的Lottie实例。

可直接落地的修复方案

针对当前使用的lottie-react组件，调整生命周期管理逻辑，在组件卸载时强制触发实例销毁：

import * as React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import Lottie from "lottie-react"
import contactAnimation from "../components/assets/contact.json"

const SecondPage = () => {
  // 用ref持久存储Lottie实例引用
  const lottieInstanceRef = React.useRef(null)

  // 组件卸载时执行强制资源清理
  React.useEffect(() => {
    return () => {
      // 主动调用实例destroy方法：终止渲染循环、移除关联DOM、释放引用
      lottieInstanceRef.current?.destroy()
    }
  }, [])

  return (
    <Layout>
      <SEO title="Page two" />
      <h1>Hi from the second page</h1>
      <p>Welcome to page 2</p>
      <Link to="/">Go back to the homepage</Link>
      <Lottie 
        animationData={contactAnimation} 
        style={{ width: "600px" }}
        // 将创建完成的动画实例绑定到ref上
        lottieRef={(instance) => {
          lottieInstanceRef.current = instance
        }}
      />
    </Layout>
  )
}

export default SecondPage

额外优化注意点

所有页面级、组件级的Lottie动画都需要补充对应的卸载清理逻辑，不能依赖组件库的默认销毁逻辑，快速路由切换时的生命周期时序差很容易导致清理失效
公共动画资源统一在顶层模块一次导入即可，避免重复解析JSON、重复创建动画结构带来的额外开销
可结合页面可见性监听逻辑，当页面被切到后台时主动暂停动画，进一步降低主线程资源占用
如果使用其他Lottie适配插件（react-lottie、lottie-web直写），逻辑完全一致：捕获实例引用，在组件卸载的清理函数中手动调用destroy()方法，即可解决跨路由的资源累积问题。

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