JS弹幕防重叠算法：智能轨道分配逻辑详解

弹幕防重叠的核心，是在二维屏幕上将纵向空间离散为若干固定高度的平行轨道，并在发射新弹幕时，通过一维运动学方程判定各轨道的碰撞风险，从而选出一条全程不会发生文字重叠的最佳轨道。本文将直接推导“发射口入场防撞”与“全周期追尾防撞”两大约束方程，详解从候选轨道筛选、择优策略到队列缓冲的完整分配算法，并提供一个不依赖任何第三方库的生产级 JavaScript 轨道调度实现。

一、弹幕重叠的几何本质与轨道离散模型

在不加任何限制的自由流弹幕中，弹幕垂直坐标如果采用随机生成，必然出现上下文字交叠甚至完全遮盖的情况。解决纵向遮挡的最直接工程手段是轨道化（Lane Allocation）：将整个播放器视口的高度按照单行弹幕高度切分为有限个水平通道，每条通道只允许弹幕水平单向从右向左移动。

设视口宽度为 W，视口高度为 H，单条轨道的行高为 Htrack（通常包含字号高度与行间边距，例如 32px）。则总轨道数 N 可通过向下取整获得：

此时，任意轨道 k（其中 0 ≤ k < N）的垂直起始位置为 Y_k = k × Htrack。因为各个轨道在纵向上具有严格的行高隔离，只要同一轨道内的弹幕互不重叠，整个视口便绝对不会出现纵向交叠。于是，二维防重叠问题被完全降维为“一维轨道上的间距与防追尾控制”。

二、认知误区辨析：为什么“尾部进屏即可发射”并不成立

在初次实现弹幕轨道的开发者中，最常见的一种认知是：“只要该轨道上上一条弹幕的尾部已经完全移入屏幕，就可以立即在该轨道发射下一条新弹幕。”

这种说法看似完全符合直觉——既然上一条弹幕已经把发射口完全腾空了，新弹幕从右边缘出来时自然不可能压在上一条弹幕上面。而且，在“所有弹幕运动速度严格恒定”的特定前提下，这个说法确实是成立的。因为如果前后两条弹幕速度完全相同（v1 = v2），它们之间的相对位移在整个飞行过程中始终保持不变，发射时不撞，移出屏幕前就永远不会相撞。

因此，“尾部进屏”仅仅是入场瞬间不重叠的必要条件，绝非全程不重叠的充分条件。完整的智能分配算法必须引入第二项严谨的物理检验：后车速度大于前车时的追尾拦截判定。

三、双重防撞判定推导：入场安全与追尾防撞数学方程

为建立严密的判定逻辑，我们对任意轨道 k 上正在运行的最后一条弹幕（称作前车 D₁）与即将发射的新弹幕（称作后车 D₂）建立物理运动模型：

• W：屏幕可视宽度；
• L1, v1, t1：前车 D₁ 的像素宽度、运行速度（px/ms）及其发射时刻（以时间戳 ms 计）；
• L2, v2, t_now：后车 D₂ 的像素宽度、运行速度（px/ms）及当前计划发射时刻；
• Sgap：系统规定的前后弹幕最小安全距离（防止视觉紧贴，通常取 10px ~ 30px）。

1. 条件一：发射口入场防撞约束（Entrance Condition）

在当前时刻 t_now，前车 D₁ 已经在屏幕上向左飞行了 Δt = t_now - t1 的时间。前车头部从 X = W 出发，当前头部坐标为：

前车尾部的坐标等于头部坐标加上前车自身长度 L1：

后车 D₂ 的头部将在 X = W 处登场。为了保证后车登场时不与前车尾部重叠，前车尾部必须已经移入屏幕且留出安全间距 Sgap，即 X_tail1(t_now) + Sgap ≤ W。将坐标代入后化简，得出条件一的判定方程：

该式含义极为直观：前车累计飞过的路程，必须至少等于前车自身长度加上设定的安全间距。若此式不满足，说明前车尾部尚未安全脱离发射口，该轨道直接判定不可用。

2. 条件二：全程运行追尾防撞约束（Overtaking Condition）

当条件一通过后，我们继续检验两者的速度关系：

• 若 v2 ≤ v1：后车速度小于或等于前车速度。在整个运动过程中，前车与后车的相对距离只会保持不变或持续拉大，永远不可能追尾。此时直接通过检验，轨道判定安全。
• 若 v2 > v1：后车速度更快，两车间距随着时间流逝不断缩小。追尾最容易发生的临界点，是在前车尾部即将完全移出屏幕左侧边缘（X = 0）的瞬间。

前车尾部完全移出屏幕需要达到的位置为 X ≤ 0。前车尾部从当前时刻 t_now 飞行到完全移出屏幕，还需要走过的剩余路程为 X_tail1(t_now)，所需剩余时间为：

在这段 Δt_exit1 时间内，后车 D₂ 从发射口 X = W 出发，头部向左走过的距离为 v2 × Δt_exit1。前车尾部在 X=0 离屏时，后车头部所在的位置必须仍然在屏幕内，且距离屏幕左边缘至少保留 Sgap：

将两式联立化简，得出条件二在 v2 > v1 时的闭式判定方程：

由于该方程完全由代数解析式表达，无需通过逐帧迭代或步进模拟，计算机可以在不到 1 微秒的时间内直接计算出结果，执行极度高效。

四、智能轨道分配决策算法与调度流程

掌握了单条轨道的双重防撞判定后，整个弹幕调度器的决策流程便清晰明了。每当一条新弹幕产生时，系统遵循以下步骤运作：

1. 离屏测宽与速度确定：使用离屏 Canvas 上下文预先度量文本像素宽度 L2，根据既定模式（固定时长或恒定速度）计算速度 v2。
2. 遍历轨道集合：依次扫描 0 到 N-1 号轨道，读取每条轨道记录的最后一条弹幕 lastDanmaku。
3. 空闲直选与双重校验：若某轨道无 lastDanmaku 或该弹幕已彻底移出屏幕，直接标记为完全可用；否则代入入场方程与追尾方程依次过滤。
4. 候选池权重择优：如果有多个轨道均满足无碰撞条件，不能单纯固定选择第 0 轨（会导致顶部轨道严重扎堆），而应采用择优策略：优先选择前车离右边界最远的轨道，或采用轮询计数器使各轨道分布均衡。
5. 缓冲区降级（Buffer Queue）：若所有轨道均存在碰撞隐患，绝不能强行发射。应将该弹幕塞入等待队列，在后续帧（通常 50ms~100ms 后）伴随前车左移再次重试；若队列超过上限则根据业务策略舍弃最旧弹幕。

五、完整的生产级 JavaScript 代码实现

以下是具备完整工业可用性的纯原生 JavaScript 实现，包含离屏测宽、双重碰撞计算、权重择优以及平滑动画循环：

/**
 * 弹幕数据对象封装
 */
class DanmakuItem {
  constructor(text, options = {}) {
    this.text = text;
    this.color = options.color || '#FFFFFF';
    this.fontSize = options.fontSize || 16;
    this.width = 0; // 离屏度量后填充
    this.speed = 0; // px/ms
    this.startTime = 0; // 发射时间戳
    this.trackIndex = -1;
  }
}

/**
 * 智能轨道分配与调度器
 */
class TrackManager {
  constructor(container, options = {}) {
    this.container = container;
    this.width = container.clientWidth || 800;
    this.height = container.clientHeight || 450;
    this.trackHeight = options.trackHeight || 36;
    this.gap = options.gap || 20; // 安全间距 (px)
    this.duration = options.duration || 6000; // 基础飞行时长 (ms)

    // 计算总可用轨道数
    this.trackCount = Math.max(1, Math.floor(this.height / this.trackHeight));
    
    // tracks 数组：记录每个轨道中“最后一条进入”的弹幕引用
    this.tracks = new Array(this.trackCount).fill(null);
    
    // 等待缓冲队列
    this.waitingQueue = [];
    
    // 轮询游标，避免多轨道同时可用时倾斜向第一轨
    this.roundRobinIndex = 0;

    // 离屏 Canvas 用于零开销文本测宽
    this.canvasCtx = document.createElement('canvas').getContext('2d');
    
    // 启动帧循环
    this.isTicking = false;
    this.activeDanmakus = new Set();
  }

  /**
   * 预先测量文本宽度与计算速度
   */
  measureAndPrepare(danmaku) {
    this.canvasCtx.font = `${danmaku.fontSize}px sans-serif`;
    danmaku.width = Math.ceil(this.canvasCtx.measureText(danmaku.text).width);
    
    // 固定展示时长模型：总路程 = 视口宽 + 自身宽
    // 速度 v = 总路程 / 总时间 (px/ms)
    danmaku.speed = (this.width + danmaku.width) / this.duration;
  }

  /**
   * 核心防重叠判定：检验 trackIndex 是否可接纳新弹幕
   */
  canPlace(trackIndex, newDanmaku, now) {
    const last = this.tracks[trackIndex];
    if (!last) return true; // 轨道纯空闲

    const elapsed = now - last.startTime;
    
    // 1. 如果前车尾部已经完全移出屏幕左侧 (X <= 0)，该轨视为空闲
    const totalFlyTime = (this.width + last.width) / last.speed;
    if (elapsed >= totalFlyTime) {
      return true;
    }

    // 2. 条件一：检查前车尾部是否已完全进屏并留出安全间距
    // 判定公式：v1 * (now - t1) >= L1 + Sgap
    const distanceTraveled = last.speed * elapsed;
    if (distanceTraveled < (last.width + this.gap)) {
      return false; // 入场重叠，直接驳回
    }

    // 3. 条件二：追尾防撞检验
    // 若后车速度小于等于前车，绝不追尾，安全通过
    if (newDanmaku.speed <= last.speed) {
      return true;
    }

    // 若后车速度更快，计算前车尾部彻底出屏所需剩余时间
    // 前车尾部当前位置：X_tail1 = (W + L1) - distanceTraveled
    const tailPosition = (this.width + last.width) - distanceTraveled;
    const remainingExitTime = tailPosition / last.speed;

    // 判定公式：remainingExitTime <= (W - Sgap) / v2
    const maxSafeTime = (this.width - this.gap) / newDanmaku.speed;
    return remainingExitTime <= maxSafeTime;
  }

  /**
   * 遍历轨道寻找最佳轨道，返回轨道索引或 -1
   */
  findBestTrack(danmaku, now) {
    const candidates = [];

    // 遍历所有可用轨道
    for (let i = 0; i < this.trackCount; i++) {
      const idx = (this.roundRobinIndex + i) % this.trackCount;
      if (this.canPlace(idx, danmaku, now)) {
        candidates.push(idx);
      }
    }

    if (candidates.length === 0) {
      return -1; // 所有轨道均有碰撞风险
    }

    // 择优策略：优先选择完全空闲或前车距离发射口最远的轨道
    candidates.sort((a, b) => {
      const lastA = this.tracks[a];
      const lastB = this.tracks[b];
      if (!lastA) return -1;
      if (!lastB) return 1;
      // 比较前车已经向左移走的距离（越大说明越空旷）
      const distA = lastA.speed * (now - lastA.startTime);
      const distB = lastB.speed * (now - lastB.startTime);
      return distB - distA;
    });

    const bestTrack = candidates[0];
    this.roundRobinIndex = (bestTrack + 1) % this.trackCount;
    return bestTrack;
  }

  /**
   * 发送弹幕对外入口
   */
  push(text, options) {
    const danmaku = new DanmakuItem(text, options);
    this.measureAndPrepare(danmaku);

    const now = performance.now();
    const trackIndex = this.findBestTrack(danmaku, now);

    if (trackIndex !== -1) {
      this.emit(danmaku, trackIndex, now);
    } else {
      // 轨道满载碰撞，进入等待队列（限制最大深度防止积压）
      if (this.waitingQueue.length < 200) {
        this.waitingQueue.push(danmaku);
      }
    }

    if (!this.isTicking) {
      this.startLoop();
    }
  }

  /**
   * 挂载弹幕节点并执行发射
   */
  emit(danmaku, trackIndex, now) {
    danmaku.startTime = now;
    danmaku.trackIndex = trackIndex;
    this.tracks[trackIndex] = danmaku;
    this.activeDanmakus.add(danmaku);

    // 创建 DOM 元素
    const el = document.createElement('div');
    el.innerText = danmaku.text;
    el.style.position = 'absolute';
    el.style.left = '0';
    el.style.top = `${trackIndex * this.trackHeight}px`;
    el.style.whiteSpace = 'nowrap';
    el.style.willChange = 'transform';
    el.style.color = danmaku.color;
    el.style.fontSize = `${danmaku.fontSize}px`;
    el.style.transform = `translate3d(${this.width}px, 0, 0)`;

    this.container.appendChild(el);
    danmaku.dom = el;
  }

  /**
   * 动画与状态更新主循环
   */
  startLoop() {
    this.isTicking = true;

    const frame = (time) => {
      // 1. 尝试从等待队列中调度积压弹幕
      if (this.waitingQueue.length > 0) {
        const candidate = this.waitingQueue[0];
        const trackIndex = this.findBestTrack(candidate, time);
        if (trackIndex !== -1) {
          this.waitingQueue.shift();
          this.emit(candidate, trackIndex, time);
        }
      }

      // 2. 更新飞行中弹幕的坐标
      for (const item of this.activeDanmakus) {
        const elapsed = time - item.startTime;
        const currentX = this.width - item.speed * elapsed;

        if (currentX < -item.width) {
          // 完全离屏，卸载回收
          if (item.dom && item.dom.parentNode) {
            item.dom.parentNode.removeChild(item.dom);
          }
          this.activeDanmakus.delete(item);
          // 若轨道最后一条是自身，清空轨道指针
          if (this.tracks[item.trackIndex] === item) {
            this.tracks[item.trackIndex] = null;
          }
        } else {
          item.dom.style.transform = `translate3d(${currentX}px, 0, 0)`;
        }
      }

      if (this.activeDanmakus.size > 0 || this.waitingQueue.length > 0) {
        requestAnimationFrame(frame);
      } else {
        this.isTicking = false;
      }
    };

    requestAnimationFrame(frame);
  }
}

六、系统架构、工程考量与极端场景优化

在超高并发或直播大型赛事等极端业务场景中，算法的计算复杂度与浏览器的渲染性能将成为瓶颈。结合工程实践，必须对以下三处细节做好兜底：

1. 离屏测量与避免 DOM 强制回流（Reflow）

很多简易实现会在创建 DOM 节点后直接通过 el.offsetWidth 获取宽度，这会导致浏览器主线程在单帧内发生多次耗时极高的强制布局抖动（Layout Thrashing）。在上述代码中，我们统一使用单例离屏 Canvas 的 measureText 预先获取宽度。这一计算完全在内存中完成，耗时仅需数十纳秒，保障即使瞬时涌入数百条弹幕也不会引起界面掉帧。

2. 内存泄漏与轨道解绑归零

轨道数组中只存储该轨道最后发射的一条弹幕对象引用（lastDanmaku）。当该弹幕完全飞离屏幕后，调度器会将其设置为 null，断开所有内存引用。对于高频场景，还可以进一步引入DOM 对象池（Object Pool），弹幕离屏后并不 removeChild，而是隐藏并推入备用池供下次复用，彻底规避 V8 引擎在高频创建销毁 DOM 节点时的 GC 暂停。

3. 队列积压与防雪崩熔断机制

当弹幕密度远超屏幕物理容纳极限时，所有轨道均无法满足防重叠安全方程，等待队列长度将快速膨胀。此时算法应具备熔断自愈能力：

• 丢弃策略（Drop Policy）：当等待队列超过设定阈值（如 200 条）时，直接丢弃队列中最旧的非重要弹幕；
• 动态密度调控：自动收紧 Sgap 安全间距至极小值（如从 20px 降至 8px），或对低权重普通弹幕实行抽样展示，确保核心展示流的稳定。

七、总结

JS 弹幕防重叠算法并非单纯的随机构造，而是基于轨道几何离散与运动学状态推演的精密工程。其核心逻辑可以凝练为两句话：

以轨道行高消除纵向冲突，以入场路程消除入口冲突；以后车超越极限方程消除中途追尾，以优先级权重实现全屏流速均衡。

通过本文推导的两个代数判定式，任何前端系统都能在不借助庞大复杂框架的前提下，构建出丝滑、严谨且高吞吐的专业级弹幕防重叠引擎。