上一章： OTT端登入态裝置穿透：掃碼登入與掃碼反登入 | 《優酷OTT網際網路大屏前端技術實踐》第二章>>> 下一章： OTT端技術賦能之前端收單能力建設 | 《優酷OTT網際網路大屏前端技術實踐》第四章>>> 點選免費下載下傳 《優酷OTT網際網路大屏前端技術實踐》>>>
作者| 阿裡巴巴文娛技術 默吉
追求極緻的使用者體驗是個永恒的話題。無論在PC端、移動端，還是IOT端，大家都在嘗試着各種技術方案，如提高秒開率，降低白屏時間等等。
在OTT端進行營銷活動開發的我們，也面臨這一挑戰，盡管PC端和Mobile端都有成熟的技術方案，但是到了大屏端，由于終端的差異性，很多技術方案不能完全照搬照抄。
回顧優酷在OTT端的使用者體驗探索之路，經曆了三個階段：webview時期、自定義核心Blitz時期、weex階段。
目前weex(RAX)是OTT端的主要技術方案，它貫穿着整個前端頁面的開發，無論是活動頁面、半屏互動，還是常駐頁面的開發，我們都采用這種技術方案，它帶來了類似用戶端的使用者體驗，相對H5的頁面流暢度，體驗效果上有明顯的提高。
一、發展曆程
1、webview時期：
活動頁面采用原生的webview進行渲染，性能體驗上勉強夠用，但由于OTT裝置多為弱硬體環境，而且在視訊播放這塊無法得到定制擴充，是以原生的webview有一定受限。
2、自定義核心時期：
Blitz web引擎是一套類似webview的渲染引擎。引擎前期投入人力很大，後期由于業務的調整引擎處于停滞狀态，很多性能需求無法實作，如本地緩存，zcache介入等。在這個過程中我們嘗試了很多提升使用者體驗的方案，如根據頁面load加載時機，結束後再做整體展示，減少loading時間，設定1%分辨率的背景作為模糊圖；其它優化方案如：異步加載js、懶加載圖檔、預加載等等，前端能做的方式都嘗試了一遍，但結果都收效甚微。
性能優化方案：【loading加載時間，預加載，靜态檔案緩存】
3、weex時期：
weex技術在阿裡集團的廣泛推廣，為OTT端帶來曙光。用戶端同學嘗試将weex能力輸出到OTT端，最終頁面的性能體驗發生質的變化。
由于OTT端的互動方式與傳統端存在差異，是以在weex的引入過程中，用戶端同學做了很多差異化處理。如jscore的剝離（OTT端隻有andriod），焦點引擎的引入（OTT端靠遙控器操作），自定義元件等等。
性能優化方案：【首屏渲染效果，多屏滾動展示，視訊播放，圖檔渲染 】
二、weex實施方案
1、實施步驟：
• 增加可視化搭建weex輸出能力（原有ARK平台隻支援H5頁面的輸出，平台側增加weex的打包能力），将原有40+個H5元件進行weex化，這部分可以解決80%的業務場景問題。
• 源碼weex開發，解決20%的定制化場景，如雙11等大型活動及戰役，這部分針對定制化源碼開發，将H5源碼開發的方式切換到weex的技術棧上。
2、技術細節：
• OTT端weex的差異性，一圖勝千言。
• 可視化搭建技術改造方案
3、相關資料：
• 資料名額：【頁面加載提升】【頁面渲染流暢】【使用者體驗改善】
4、效果展示：
• 全屏weex
• 半屏互動
• 頁面APP化
三、共建
輸出OTT端的Rax能力到阿裡集團，提供詳盡的開發文檔
經過技術棧更新與優化，weex成為阿裡文娛OTT端-前端業務的主要開發技術棧。相較于HTML5技術棧，weex穩定性及性能均有了長足進步。以頁面加載效率為例，使用weex後，頁面平均加載時間縮短了50%以上，效果顯著。