項目要求兼容4K，市面上插件對高分辨率屏兼容性不是很好玩敏，故手動實現(xiàn)此插件
1斗忌、實現(xiàn)無縫功能
如圖，將外部傳入的slot展示兩份旺聚，頁面滾動到底部不會出現(xiàn)空白
2织阳、實現(xiàn)滾動（由于功能簡單，出于性能考慮砰粹，最終選擇的css animation方式）
a.keyframes：由于css的局限性唧躲，必須配合樣式表實現(xiàn)，因此采用在head的style標(biāo)簽對中動態(tài)插入@keyframes的方式寫入動畫
b.滾動原理：計算出動畫時長(下圖this.seconds)碱璃，設(shè)置動畫位置從translateY(0)的到translateY(domHeight)弄痹，設(shè)置translate屬性為infinite，即可循環(huán)滾動
3嵌器、兼容1080和4K分辨率（主要解決滾動速率不一致的問題肛真，下圖是得到真實domheight，轉(zhuǎn)換成vh單位爽航，以此計算出上圖中seconds的真實滾動時間）
4蚓让、性能優(yōu)化（為何不使用js動畫）
a.大屏項目動畫效果多乾忱，CPU消耗大，常用的定時器動畫（setInterval）延遲較高凭疮，卡頓饭耳、掉幀現(xiàn)象明顯（若有js操作行為，動畫直接卡停n秒）
b.使用瀏覽器動畫API：requestAnimationFrame優(yōu)化動畫执解，CPU使用量大寞肖，卡頓、掉幀現(xiàn)象減少許多（但若有js操作行為衰腌，動畫直接卡停n秒）
c,使用css動畫新蟆，CPU使用量大，但動畫流暢不掉幀（若有js操作行為右蕊，動畫依舊流暢運(yùn)行）
css動畫流暢運(yùn)行原因：JS動畫主線程要一直參與計算琼稻，增加了不必要消耗，而css動畫在定義了keyframe后饶囚，使用will-change:transform;等屬性帕翻，直接交給GPU管理，CPU不參與運(yùn)算萝风，側(cè)面降低CPU的開銷（約2%左右）嘀掸，同時js的同步操作不會阻塞動畫的執(zhí)行。
5规惰、組件的復(fù)用性考慮（組件封裝睬塌，提升組件的可維護(hù)性）
為了在其他項目中復(fù)用，有瀏覽器對css3兼容性比較差歇万，只能犧牲性能揩晴，讓項目能看，因此也沒有放棄js動畫贪磺，并對此做了兼容硫兰，開發(fā)時候可以手動選擇動畫運(yùn)行方式（如下圖所示，此時的動畫運(yùn)行原理也稍有區(qū)別缘挽，見下圖）瞄崇。
