基于 JavaScript 的高性能弹幕系统设计与实现

摘要

弹幕系统作为现代 Web 应用中极具互动性的组件，已广泛应用于视频平台、直播互动、留言墙等场景。本文详细阐述了一个基于原生 JavaScript 实现的高性能弹幕系统，从架构设计、核心技术、特效系统到性能优化策略进行了深入剖析。通过固定轨道布局、智能防重叠算法、统一速度控制、随机调度机制以及内存优化，实现了流畅、美观且不重叠的弹幕效果。同时，系统集成了花瓣飘落特效和响应式设计，兼顾了视觉体验与多端适配。文章最后总结了系统的优势，并展望了未来可扩展的方向。

一、系统架构设计

1.1 整体架构

系统采用面向对象的设计思想，核心模块由以下类组成：

• DanmakuManager（弹幕管理器）：负责弹幕的创建、调度、轨道管理和生命周期控制。
• PetalEffect（花瓣特效）：独立模块，用于增强视觉体验，模拟花瓣飘落效果。
• 轨道管理系统：动态计算轨道数量，维护每个轨道上活跃弹幕的位置信息。
• 全屏/窗口模式切换：响应容器尺寸变化，自适应调整弹幕布局。

1.2 核心数据结构

class DanmakuManager {
    constructor() {
        this.danmakuList = [];          // 弹幕数据池，存储所有可用的弹幕对象（含内容和优先级）
        this.activeDanmaku = [];         // 活跃弹幕数组，记录当前正在显示的弹幕 DOM 元素
        this.maxTracks = 4;              // 默认轨道数（非全屏模式下固定为4）
        this.trackHeight = 50;            // 每条轨道的高度（像素），用于计算位置
        this.usedIndices = new Set();     // 已使用的弹幕数据索引，用于去重
    }
}

二、关键技术实现

2.1 固定四行布局与自适应轨道

在非全屏模式下，系统采用固定的四行布局，确保弹幕整齐有序，避免因轨道过密导致视觉混乱。当切换至全屏模式时，轨道数会根据容器高度动态计算，充分利用显示空间。

calculateTracks() {
    const isFullscreen = this.danmakuContainer?.classList.contains('fullscreen');

    if (isFullscreen) {
        // 全屏模式：根据容器高度动态计算轨道数
        const containerHeight = this.danmakuContainer.offsetHeight;
        this.maxTracks = Math.floor(containerHeight / this.trackHeight);
    } else {
        // 非全屏模式：固定为4行
        this.maxTracks = 4;
        const containerHeight = this.danmakuContainer?.offsetHeight || 300;
        this.trackHeight = Math.floor(containerHeight / this.maxTracks);
    }
}

2.2 智能防重叠算法

弹幕折叠（重叠）是影响观看体验的核心问题。系统通过检测每个轨道右侧入口处的可用空间，确保新弹幕不会与即将进入的弹幕发生重叠。只有当轨道右侧存在足够大的空白区域时，才允许在该轨道创建新弹幕。

findSafeTrackForInitial() {
    const containerWidth = this.danmakuContainer?.offsetWidth || window.innerWidth;
    const minSafeDistance = Math.max(200, containerWidth * 0.25); // 最小安全距离：200px 或容器宽度的25%

    // 遍历所有轨道（按随机顺序，避免总是使用前几个轨道）
    const tracks = [...Array(this.maxTracks).keys()].sort(() => Math.random() - 0.5);

    for (const trackIndex of tracks) {
        const trackDanmaku = this.getTrackDanmaku(trackIndex); // 获取该轨道上所有活跃弹幕

        // 计算该轨道上最靠近右侧的弹幕距离容器右边界的距离
        let minDistanceToRight = Infinity;
        for (const danmaku of trackDanmaku) {
            const rect = danmaku.getBoundingClientRect();
            const distanceToRight = containerWidth - rect.right;
            minDistanceToRight = Math.min(minDistanceToRight, distanceToRight);
        }

        // 若轨道为空，则距离视为无限大
        if (trackDanmaku.length === 0) return trackIndex;

        // 仅当右侧空间足够时才使用该轨道
        if (minDistanceToRight > minSafeDistance) {
            return trackIndex;
        }
    }
    return -1; // 所有轨道均无安全空间，暂不创建新弹幕
}

2.3 统一速度控制

为避免因滚动速度不同导致弹幕追赶和重叠，系统强制所有弹幕使用相同的动画时长（10秒）。这样，无论弹幕文本长度如何，它们都会以相同的速度穿越屏幕，保证视觉一致性。

createDanmakuOnTrack(data, trackIndex) {
    const danmaku = document.createElement('div');
    danmaku.className = 'danmaku-item';
    danmaku.textContent = data.text;
    // 设置轨道位置（垂直方向）
    danmaku.style.top = `${trackIndex * this.trackHeight}px`;
    // 统一动画时长
    const duration = 10; // 单位：秒
    danmaku.style.animation = `danmaku-scroll ${duration}s linear forwards`;

    // 添加到容器
    this.danmakuContainer.appendChild(danmaku);
    this.activeDanmaku.push(danmaku);

    // 动画结束后自动移除
    danmaku.addEventListener('animationend', () => {
        this.removeDanmaku(danmaku);
    });
}

2.4 随机出现机制与动态密度调节

为了模拟真实弹幕的流动感，系统采用随机时间间隔调度新弹幕。同时，根据当前活跃弹幕数量与目标密度的比例动态调整间隔，在低密度时快速补充，高密度时减缓节奏，保持屏幕不会过于拥挤。

scheduleNextDanmaku() {
    const targetCount = this.maxTracks * 3; // 目标弹幕数：轨道数的3倍
    const currentCount = this.activeDanmaku.length;
    const density = currentCount / targetCount;

    // 根据密度动态调整间隔（单位：毫秒）
    let minDelay, maxDelay;
    if (density < 0.3) {
        minDelay = 300; maxDelay = 800;      // 低密度：快速补充
    } else if (density < 0.7) {
        minDelay = 500; maxDelay = 1500;     // 中密度：正常速度
    } else {
        minDelay = 1000; maxDelay = 2500;    // 高密度：减慢速度
    }

    const randomDelay = minDelay + Math.random() * (maxDelay - minDelay);
    setTimeout(() => this.scheduleNextDanmaku(), randomDelay);
}

2.5 数据去重与优先级队列

为保证弹幕内容的多样性，系统维护了一个已使用索引集合 usedIndices，避免短时间内重复显示同一条弹幕。同时，弹幕数据可配置优先级，优先级高的弹幕有更大几率被选中显示，适用于重要公告或互动内容。

getUniqueRandomDanmakuData(batchSize = 1) {
    // 筛选出未使用的弹幕索引及其优先级
    const availableIndices = [];
    for (let i = 0; i < this.danmakuList.length; i++) {
        if (!this.usedIndices.has(i)) {
            availableIndices.push({
                index: i,
                priority: this.danmakuList[i].priority || 1
            });
        }
    }

    if (availableIndices.length === 0) {
        // 如果所有弹幕都已使用，重置集合（重新开始循环）
        this.usedIndices.clear();
        return this.getUniqueRandomDanmakuData(batchSize);
    }

    // 按优先级降序排序
    availableIndices.sort((a, b) => b.priority - a.priority);

    // 从前50%的高优先级中随机选择一个（兼顾优先级与随机性）
    const highPriorityCount = Math.floor(availableIndices.length * 0.5);
    const selectedIndex = Math.floor(Math.random() * highPriorityCount);
    const selected = availableIndices[selectedIndex];

    this.usedIndices.add(selected.index);
    return [this.danmakuList[selected.index]];
}

三、特效系统

3.1 花瓣飘落效果

为了提升视觉吸引力，系统集成了一个独立的花瓣飘落特效模块。花瓣数量、大小、飘落速度和左右飘移幅度均为随机，营造出自然、轻盈的氛围。

class PetalEffect {
    constructor(container) {
        this.container = container;
        this.petals = [];
        this.maxPetals = 240; // 最大同时存在的花瓣数
        this.interval = null;
    }

    start() {
        if (this.interval) return;
        this.interval = setInterval(() => this.createPetal(), 200); // 每200ms生成一片
    }

    stop() {
        clearInterval(this.interval);
        this.interval = null;
    }

    createPetal() {
        if (this.container.children.length >= this.maxPetals) return;

        const petal = document.createElement('div');
        petal.className = 'petal';

        // 随机属性
        const size = 8 + Math.random() * 10;       // 8～18px
        const duration = 2 + Math.random() * 3;    // 2～5秒飘落
        const drift = (Math.random() - 0.5) * 160; // 左右飘移幅度（像素）
        const left = Math.random() * 100;           // 起始水平位置（%）

        petal.style.cssText = `
            width: ${size}px;
            height: ${size}px;
            left: ${left}%;
            --drift: ${drift}px;
            animation: petal-fall ${duration}s linear forwards;
        `;

        this.container.appendChild(petal);

        // 动画结束后移除
        petal.addEventListener('animationend', () => petal.remove());
    }
}

对应的 CSS 动画：

@keyframes petal-fall {
    0% {
        transform: translateY(-10%) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 10%)) translateX(var(--drift));
        opacity: 0;
    }
}

3.2 CSS 动画与硬件加速

弹幕滚动和花瓣飘落均使用 CSS 动画，并启用硬件加速，确保动画流畅且对主线程影响最小。

.danmaku-item {
    will-change: transform;                /* 提示浏览器该元素将发生变换，启用硬件加速 */
    backface-visibility: hidden;           /* 触发3D加速 */
    animation: danmaku-scroll 10s linear forwards;
}

@keyframes danmaku-scroll {
    from {
        transform: translateX(100%);        /* 从右侧外部进入 */
    }
    to {
        transform: translateX(-100%);       /* 从左侧外部移出 */
    }
}

四、性能优化策略

4.1 内存管理

• 及时清理：每个弹幕动画结束后，通过 animationend 事件从 DOM 和 activeDanmaku 数组中移除，防止内存泄漏。
• 对象池（高级优化）：可考虑复用弹幕 DOM 元素，减少频繁创建和销毁的开销。但考虑到弹幕内容多样，简单场景下直接创建即可。
• 节流控制：通过 maxTracks 和动态密度调节，限制同时显示的弹幕数量，避免渲染压力过大。

4.2 渲染优化

• 使用 requestAnimationFrame 进行样式修改：当需要动态调整弹幕位置或触发重绘时，将操作放入 requestAnimationFrame 中，保证与浏览器刷新同步。
• 避免强制同步布局：在遍历弹幕获取位置信息时（如 getBoundingClientRect），尽量减少次数，或使用缓存。

4.3 事件优化

• 事件委托：将弹幕容器上的点击、鼠标移入等事件通过委托处理，减少监听器数量。
• 及时移除监听：对于添加了 animationend 监听的弹幕，确保在移除弹幕时也移除监听（现代浏览器会自动处理，但显式移除更安全）。

五、响应式设计

5.1 全屏/窗口模式切换

系统支持一键切换全屏模式。切换时会重新计算轨道数，并根据模式显示或隐藏相关控件（如返回顶部按钮）。

toggleFullscreen() {
    this.danmakuContainer.classList.toggle('fullscreen');
    const isFullscreen = this.danmakuContainer.classList.contains('fullscreen');

    // 延迟一小段时间等待容器尺寸变化完成
    setTimeout(() => {
        this.calculateTracks();
        // 控制返回顶部按钮的显示
        const backToTopBtn = document.getElementById('scroll-to-top-btn');
        if (backToTopBtn) {
            backToTopBtn.style.display = isFullscreen ? 'none' : 'flex';
        }
    }, 300);
}

5.2 移动端适配

通过媒体查询优化移动端显示，确保控制栏在移动设备上始终可见且操作友好。

@media (max-width: 768px) {
    .danmaku-container {
        height: 250px;              /* 适当减小容器高度 */
    }

    .danmaku-controls {
        opacity: 1;                  /* 移动端始终显示 */
        background: rgba(0, 0, 0, 0.5);
        padding: 5px 10px;
    }

    .control-btn {
        width: 36px;
        height: 36px;
    }
}

六、交互设计

6.1 点击暂停/播放

用户点击弹幕区域可暂停所有弹幕滚动，再次点击恢复。暂停时，通过 animation-play-state: paused 实现，无需额外 JavaScript 控制位置。

togglePause() {
    const isPaused = this.danmakuContainer.classList.contains('paused');

    if (isPaused) {
        this.danmakuContainer.classList.remove('paused');
        this.resume(); // 恢复动画
    } else {
        this.danmakuContainer.classList.add('paused');
        this.pause();  // 暂停动画
    }
}

pause() {
    // 通过 CSS 类控制动画状态
    this.danmakuContainer.style.animationPlayState = 'paused';
    // 也可以遍历所有弹幕单独设置，但使用容器类更简单
}

resume() {
    this.danmakuContainer.style.animationPlayState = 'running';
}

对应的 CSS：

.danmaku-container.paused .danmaku-item {
    animation-play-state: paused;
}

6.2 简化控制栏

仅保留必要的全屏切换按钮，保持界面简洁，提升用户体验。

<div class="danmaku-controls">
    <button class="control-btn" id="danmaku-fullscreen" title="全屏">
        <i class="fas fa-expand"></i>
    </button>
</div>

七、总结与展望

本文设计并实现了一个基于原生 JavaScript 的高性能弹幕系统，其核心优势包括：

1. 稳定不重叠：通过智能轨道选择和右侧空间检测，彻底避免弹幕折叠。
2. 流畅性能：采用 CSS3 硬件加速、动态密度调节和高效的内存管理，确保长时间运行依然流畅。
3. 视觉吸引力：花瓣特效增强了页面活力，统一的速度控制和布局使得弹幕整齐美观。
4. 良好的可扩展性：模块化设计便于添加新功能，如弹幕颜色、字体大小、用户头像等。