前言

6000+門(mén)店使用的大屏，主機(jī)配置竟然是Android5.5 + Chrome 78，不支持es6。。。

隨隨便便一個(gè)css動(dòng)畫(huà)都可以把頁(yè)面卡成ppt。

開(kāi)發(fā)只給兩天。。。

buff疊滿，還想在頁(yè)面中做websocket，實(shí)現(xiàn)彈幕滿屏播放功能。。。

調(diào)研嘗試了一下，考慮了repaint等因素，用了css的transform:tanslate屬性，頁(yè)面只有兩個(gè)div在移動(dòng)頁(yè)面都卡，無(wú)語(yǔ)了，甚至還開(kāi)啟了gpu加速transform:tanslateZ,一樣卡成ppt，真的是delay no more了

無(wú)奈之下，嘗試了自己最不熟悉的Canvas，沒(méi)想到竟然如此絲滑，把元素調(diào)成100個(gè)也絲毫不影響性能。

大家逛街時(shí)估計(jì)都見(jiàn)過(guò)吧哈哈哈

核心優(yōu)勢(shì)

Canvas繪圖

批量渲染：可以在一次繪制循環(huán)中處理所有彈幕，減少瀏覽器重繪次數(shù)。

內(nèi)存效率：不需要為每個(gè)彈幕創(chuàng)建DOM元素，降低內(nèi)存使用。

靈活性：可以輕松實(shí)現(xiàn)復(fù)雜的視覺(jué)效果和碰撞檢測(cè)。

requestAnimationFrame

function animate() {
    // 更新彈幕位置
    updateBarrages();
    // 渲染彈幕
    renderBarrages();
    // 循環(huán)調(diào)用
    requestAnimationFrame(animate);
}


requestAnimationFrame(animate);

與setTimeout或setInterval相比，requestAnimationFrame有以下優(yōu)勢(shì)：

與顯示器刷新率同步，通常是60fps，減少丟幀。

在標(biāo)簽頁(yè)不可見(jiàn)時(shí)自動(dòng)暫停，節(jié)省資源。

允許瀏覽器優(yōu)化并合并多個(gè)動(dòng)畫(huà)操作，提高性能。

隊(duì)列虛擬列表：突破性能瓶頸

為了處理大量彈幕，實(shí)現(xiàn)了一個(gè)隊(duì)列虛擬列表：

class CanvasBarrage {
    // ...其他代碼


    handleBarrageRenderList() {
        // 移除已經(jīng)離開(kāi)屏幕的彈幕
        this.barrageList = this.barrageList.filter(item => !item.isExit);


        // 添加新的彈幕到渲染列表
        let addList = this.handleBarrageOriginList(this.barrageOriginList);
        addList = this.handleBarragePosition(addList);
        this.barrageList = this.barrageList.concat(addList);


        this.barrageCleanCount = 0;
    }
}

自適應(yīng)

支持px到vw的轉(zhuǎn)換，使彈幕在不同屏幕尺寸下都能正常顯示。

使用介紹

配置參數(shù)

以下是CanvasBarrage類的主要配置參數(shù)：

使用方法

const barrageSystem = new CanvasBarrage({
  id: '#video-container',
  barrageList: initialBarrages,
  barrageRow: 10,
  fontSize: 24,
  isRandomFontColor: true
});


barrageSystem.drawBarrage();


// 添加新彈幕
barrageSystem.addBarrage([{ value: '新彈幕內(nèi)容' }]);
?

效果

因?yàn)橐瞥薝I，給大家自定義化，所以效果是最原始樣式

源碼

記得點(diǎn)一個(gè)star哦

Github鏈接

轉(zhuǎn)自https://juejin.cn/post/7428247498861396022