摘要：考慮到只適合在單位時(shí)間內(nèi)繪制少量彈幕，這對(duì)于我們播放器來(lái)說(shuō)明顯是不合需求的。比如說(shuō)直播播放器模式和視頻播放器模式的優(yōu)化細(xì)節(jié)又有點(diǎn)不一樣，還有高級(jí)彈幕的處理圖片，圖形等。。

大家年前好，馬上就要元旦了，在很久沒(méi)有寫(xiě)文章之后，想到這篇文章將會(huì)成為本人今年的
絕響也是有點(diǎn)蛋疼。不過(guò)也好，畢竟本人算不得什么勤快的生物，而且比起那些大神來(lái)說(shuō)也差遠(yuǎn)了，就作為自己工作半年后的一次沉淀算了。

文中有些思想可能不見(jiàn)得是最好的解決辦法，大神們請(qǐng)輕噴。

這個(gè)項(xiàng)目本來(lái)是我自己準(zhǔn)備的一個(gè)開(kāi)源插件，但由于上班寫(xiě)這個(gè)的過(guò)程中被老板發(fā)現(xiàn)了（∑(O_O；)），就說(shuō)把這個(gè)東西寫(xiě)成公司用的吧，然后，然后開(kāi)源就GG了（我了個(gè)大擦，我說(shuō)我這個(gè)是自己的項(xiàng)目也沒(méi)用），雖然說(shuō)也可以偷偷放出來(lái)，但畢竟我還在職，就原諒我這次沒(méi)辦法把代碼放出來(lái)吧。我會(huì)在講解過(guò)程中盡可能講解詳細(xì)的。以上。。。。開(kāi)始一波交♂易吧，騷年們（手動(dòng)滑稽）

demo ： 我是你親愛(ài)的demo （彈幕數(shù)2000）

至少需要有canvas和js的編程經(jīng)驗(yàn)，然后養(yǎng)成一個(gè)好的代碼習(xí)慣（不然一段時(shí)間后你都不知道你自己干了什么），下面講解的內(nèi)容不會(huì)涉及到具體程序和功能的編寫(xiě)，更多地是在強(qiáng)調(diào)性能優(yōu)化這方面，完全當(dāng)教程看的可以略過(guò)了。。。大神請(qǐng)隨意

其實(shí)實(shí)現(xiàn)彈幕的方式可以有多種，比如說(shuō)用dom和canvas實(shí)現(xiàn)都是可以的，但我們這里選取的是canvas來(lái)繪制彈幕。

考慮到dom 只適合在單位時(shí)間內(nèi)繪制少量彈幕 ，這對(duì)于我們播放器來(lái)說(shuō)明顯是不合需求的。其實(shí)去過(guò)B站的都知道，因?yàn)椴シ牌饔袝r(shí)會(huì)出現(xiàn)短時(shí)間內(nèi)的“彈幕轟炸”，你想想如果是用dom來(lái)寫(xiě)，頁(yè)面瞬間創(chuàng)建幾百個(gè)、甚至上千個(gè)element。。。那酸爽，簡(jiǎn)直讓人不敢相信。。。所以說(shuō)，dom只適用于那些對(duì)時(shí)間把握要求不那么高的項(xiàng)目，因?yàn)槟憧梢酝ㄟ^(guò)控制單位時(shí)間內(nèi)彈幕的繪制數(shù)量來(lái)達(dá)到緩解性能的目的。

使用canvas好處有幾點(diǎn)：
    1.不用頻繁的操控dom元素
    2.有強(qiáng)大的api，操作簡(jiǎn)單
    3.在移動(dòng)設(shè)備上也能比較高性能地運(yùn)行
    4.強(qiáng)化你的代碼組織能力（如何更好地分離功能什么的，而不是加個(gè)css3動(dòng)畫(huà)就了事）

其實(shí)最簡(jiǎn)單的就體現(xiàn)在api上，比如說(shuō)實(shí)現(xiàn)全屏模式，其實(shí)android和ios到目前為止都還是不支持元素全屏的，所以說(shuō)你這里要考慮 requestFullScreen 不能用的情況下，對(duì)移動(dòng)設(shè)備的降級(jí)處理。還有一點(diǎn)就是移動(dòng)設(shè)備和PC的性能差距還是有點(diǎn)大的，這就需要你考慮在某些消耗性能的功能和用戶體驗(yàn)之間做些取舍。

其實(shí)這里也是考慮各個(gè)主流瀏覽器的性能差異，對(duì)某些功能做出適當(dāng)?shù)恼{(diào)整。其實(shí)在使用canvas text API的時(shí)候，有些效果的使用是會(huì)大大地加重瀏覽器的負(fù)擔(dān)，比如說(shuō)：文字陰影、漸變、變換等；不見(jiàn)得每個(gè)瀏覽器都能很迅速的繪制出你想要的效果，即使在你自己看起來(lái)不怎么需要時(shí)間。 這里，chrome內(nèi)核的瀏覽器表現(xiàn)極其優(yōu)秀，反而讓我一臉懵逼的是火狐。。在這我整理了一些主流瀏覽器在繪制方面的差異（參考數(shù)據(jù)）：

    upperNum : {
        //當(dāng)彈幕數(shù)超過(guò)一定數(shù)額時(shí)，取消文字的全局特效（如陰影等）
        //ps:火狐爸爸不給力啊，向谷歌勢(shì)力低頭
        "firefox" : 500,
        "safari" : 800,
        "chrome" : 2000,
        "ie" : 900,
        "edge" : 1100
    },
    scale : 1,
    rotate : 0

從上面可以看出，其實(shí)瀏覽器性能之間的差異還是有的，此時(shí)就需要我們根據(jù)數(shù)據(jù)的多少來(lái)調(diào)整特效的展現(xiàn)，你可以分別用火狐和chrome打開(kāi)demo頁(yè)面看效果

如全局文字顏色等一些能在循環(huán)體外設(shè)置的api，就千萬(wàn)不要放到循環(huán)體內(nèi)部去給每個(gè)彈幕多帶帶設(shè)置（除非全局樣式發(fā)生了改變）。

還有就是優(yōu)化循環(huán)，沒(méi)錯(cuò)，就是優(yōu)化循環(huán)。。。。。當(dāng)你的彈幕池達(dá)到數(shù)千甚至上萬(wàn)的時(shí)候，你一個(gè)循環(huán)就能浪費(fèi)掉許多時(shí)間，其實(shí)有些條件達(dá)到的時(shí)候你是沒(méi)必要再進(jìn)行循環(huán)了的。對(duì)于視頻彈幕來(lái)說(shuō)，我們需要的只是 “把某一個(gè)時(shí)間點(diǎn)的所有彈幕進(jìn)行一次繪制”，這樣我們就已經(jīng)確立了一部分優(yōu)化原則：在當(dāng)前播放時(shí)間之前的彈幕我不需要管，在當(dāng)前播放時(shí)間之后的彈幕我不需要管。至于怎么實(shí)現(xiàn)，我們可以改變for循環(huán)的start下標(biāo)來(lái)達(dá)到忽略前面的彈幕，可以通過(guò)判斷當(dāng)前彈幕的時(shí)間和播放器時(shí)間的大小來(lái)達(dá)到跳出循環(huán)的目的。 在下面的循環(huán)體代碼（部分）就可以看出來(lái)優(yōu)化的操作

if(!this.Canvas.globalStyleHasChanged)
Canvas.setBaseTextStyle(cxt);    //設(shè)置文字基本樣式，我們?cè)谶@里設(shè)置好統(tǒng)一樣式

//我這里是彈幕循環(huán)
for( var i = DMsystem.idx, DM; DM = DMs[i++]; ){
    if( DM.currentTime > currentTime ){
        break; 
    }
    if( DM.currentTime < currentTime && !DM.isDisplaying ){
        DM.hasShowed = true;
        continue;
    }
    DMsystem.refresh(DM);             //更新位置
    Canvas.drawDM(cxt,DM,options);     //繪制
    DMsystem.recovery(DM,currentTime);          //判斷彈幕是否顯示完畢并回收相關(guān)行
}

其實(shí)在這一版之前我還寫(xiě)過(guò)1.0版，不過(guò)在移動(dòng)設(shè)備上的性能太糟糕所以舍棄了（你們可以用手機(jī)打開(kāi)這一版demo看看效果，性能其實(shí)還是可以的），原因是我把每一條彈幕都new了一個(gè)實(shí)例。。。當(dāng)時(shí)忙著js的偽面向?qū)ο缶幊虒?shí)踐：“彈幕嘛，每一條彈幕都應(yīng)該是一個(gè)成熟的個(gè)體，不僅有自己獨(dú)特的顏色，還有所在的位置.....”。然后呢？當(dāng)我把彈幕數(shù)調(diào)整為5000的時(shí)候---然后就沒(méi)有然后了。。。。too young too simple，sometimes naive.....瀏覽器直接炸掉了。。。。。所以說(shuō)我們?cè)诿嫦驅(qū)ο蟮臅r(shí)候要考慮哪些才是真正應(yīng)該new的。。（盡管看起來(lái)好像就我自己有點(diǎn)蠢....）

以上就是要寫(xiě)的所有的東西了，盡管我知道各位看起來(lái)可能有點(diǎn)不那么方便（畢竟代碼少，而且講得很籠統(tǒng)），當(dāng)你自己開(kāi)始寫(xiě)的時(shí)候就會(huì)明白項(xiàng)目中大部分東西都很簡(jiǎn)單（各種api的調(diào)用），真正麻煩的還是性能的優(yōu)化，以及對(duì)設(shè)備和瀏覽器差異的處理。。如果不懂的話歡迎留言詢問(wèn)，我這個(gè)還不是最終版，接下來(lái)還要加入模式的切換。。。比如說(shuō) 直播播放器模式（live）和視頻播放器模式（player）的優(yōu)化細(xì)節(jié)又有點(diǎn)不一樣，還有高級(jí)彈幕的處理（圖片，圖形等）。。后續(xù)有空閑時(shí)間可能會(huì)繼續(xù)更新，最后再說(shuō)一次------------提前祝大家新年快樂(lè)