著者|アリエンターテインメントフロントエンドテクノロジーエキスパート-サージ
編集担当| Zheng Liyuan
ヘッドピクチャー| Visual ChinaからのCSDNダウンロード
究極のユーザーエクスペリエンスの追求は永遠のテーマです。PC、モバイル、IOTを問わず、誰もが2番目の開封率の向上、白い画面の時間の短縮など、さまざまな技術的ソリューションを試しています。
OTT側でマーケティング活動を展開している私たちもこの課題に直面しています。PC側とモバイル側の両方に成熟した技術ソリューションがありますが、大画面側になると、端末の違いにより、多くの技術ソリューションを完全にコピーできません。
YoukuのOTT側でのユーザーエクスペリエンスの探索を振り返ると、Webview期間、カスタムカーネルBlitz期間、weexステージの3つの段階を経ています。
現在、weex（RAX）はOTTの主要な技術ソリューションです。フロントエンドページ全体の開発を通じて実行されます。アクティブページ、ハーフスクリーンインタラクション、または常駐ページ開発のいずれの場合も、この技術ソリューションを採用しており、同様のH5のページの流暢さに比べて、クライアントのユーザーエクスペリエンスは大幅に向上しています。
開発パス
1.ウェブビュー期間：
アクティブなページは、ネイティブWebビューを使用してレンダリングされますが、パフォーマンスエクスペリエンスの点では不十分ですが、OTTデバイスのハードウェア環境が弱く、ビデオ再生用の拡張機能をカスタマイズできないため、ネイティブWebビューには特定の制限があります。
2.カスタムカーネル期間：
Blitz Webエンジンは、webviewに似たレンダリングエンジンのセットです。エンジンは初期段階で多くの人的資源を投入しましたが、後期段階では、ビジネス調整エンジンの停滞により、ローカルキャッシングやzcache介入など、多くのパフォーマンス要件を達成できません。このプロセスでは、ページの読み込みのタイミングに従ってページを読み込み、終了後に全体的な表示を行い、読み込み時間を短縮し、1％の解像度の背景をぼかし画像として設定するなど、ユーザーエクスペリエンスを改善するための多くのソリューションを試しました。非同期読み込みなどの他の最適化ソリューション： js、画像の遅延読み込み、事前読み込みなど、フロントエンドで実行できるすべての方法を試しましたが、結果は非常に小さかったです。
パフォーマンス最適化スキーム：[読み込み時間、プリロード、静的ファイルキャッシュ]
3. Weex期間：
Alibaba Groupでのweexテクノロジーの普及により、OTTの幕開けが終わりました。クライアントの学生はweex機能をOTTエンドに出力しようとしましたが、最終的なページパフォーマンスエクスペリエンスは質的に変化しました。
OTTエンドとトラディショナルエンドの違いにより、クライアントの学生はweexの導入中に多くの差別化を行いました。jscoreの除去（OTT側のandriodのみ）、フォーカスエンジンの導入（OTT側のリモコンで操作）、カスタムコンポーネントなど。
パフォーマンス最適化スキーム：[最初の画面のレンダリング効果、マルチ画面のスクロール表示、ビデオの再生、画像のレンダリング]
weex実装計画
1.実装手順：
•weex出力を視覚的に構築する能力を高め（元のARKプラットフォームはH5ページの出力のみをサポートし、プラットフォーム側はweexパッケージ機能を追加します）、ビジネスシナリオの問題の80％を解決できる元の40以上のH5コンポーネントをweexizeします。 。
•ソースコードweex開発。ダブル11やその他の大規模なイベントやバトルなどのカスタマイズされたシナリオの20％を解決するために、この部分はカスタマイズされたソースコード開発用であり、H5ソースコード開発方法をweexテクノロジースタックに切り替えます。
2.技術的な詳細：
•OTT側のweexの違いは、写真は1000語に相当します。
•技術的な変革計画を視覚的に構築する
3.関連データ：
•データインジケーター：[ページの読み込みの改善] [ページのレンダリングがスムーズ] [ユーザーエクスペリエンスの改善]
4.エフェクト表示：
•フルスクリーンweex
•半画面インタラクション
•ページアプリ
一緒に構築する
OTTエンドのRax機能をAli Groupにエクスポートし、詳細な開発ドキュメントを提供する
テクノロジースタックをアップグレードして最適化した後、weexはAli EntertainmentのOTTエンドフロントエンドビジネスの主要な開発テクノロジースタックになりました。HTML5テクノロジースタックと比較して、weexは安定性とパフォーマンスにおいて大きな進歩を遂げました。ページ読み込み効率を例に取ると、weexを使用すると、平均ページ読み込み時間が50％以上短縮され、その効果は顕著です。
更多精彩推荐
☞谷歌软件工程师薪资百万，大厂薪资有多高？
☞CSDN 创始人蒋涛：选择长沙作“大本营”，打造开发者中心城市
☞杜甫在线演唱《奇迹再现》、兵马俑真人还原……用AI技术打破次元壁的大谷来参加腾讯全球数字生态大会啦！
☞开放源码，华为鸿蒙HarmonyOS 2.0来了
☞20张图，带你搞懂高并发中的线程与线程池！
☞跨链，该怎么跨？
点分享点点赞点在看