昨年 (2015 年) 4 月、私は杭州旅行のハイブリッド方向への探求の締めくくりとして、QCon 北京カンファレンスでアリババ トラベル ハイブリッドの実際の経験を共有しました。現在、グループの重量級アプリ (タオバオ、ウォレットなど) は H5 コンテナの構築に基づいて急速に成長し、壮大な技術システムを形成しており、昨年のダブルイレブンまでに、H5 コンテナによって運ばれるトラフィックは制限されたネイティブをはるかに超えていました。ページ。杭州に関する限り、H5 はアプリの少なくとも 4 倍のトラフィックを伝送します。間違いなく、アプリケーション層の Web テクノロジー スタックは、独自のランタイム環境 (WebKit)、普遍的な技術標準 (W3C および ES 5、6)、および非常に有利な研究開発の柔軟性を備えており、UI およびインタラクティブ指向のテクノロジー スタックとなっています。ワイヤレスの研究開発向け。 H5 のオフライン テクノロジー システムが徐々に成熟したことにより、H5 とネイティブの統合は前例のないほど深くなりました。
オフライン リソースの考え方は単純ですが、シナリオは複雑です。最も複雑なのは、オフライン H5 アクティビティ ページです。今日皆さんと共有したいのは、昨年の H5 イベント ページでのパッケージ プロモーション システムの構築における Air Travel の実践の一部です。
読み込みパフォーマンスの観点から、リソースのオフラインと解放頻度の間には矛盾があります。アクティビティ ページは単純な構造で、複雑なビジネス ロジックはありませんが、非常に頻繁に変更されるため、この更新頻度はダブル イレブン期間中に最も顕著になります。昨年4月に発足したユニコーンプロジェクトでは、この矛盾を克服するためにイベントページプッシュパッケージシステムの構築に注力しました。
脆弱なネットワーク上でモバイル Web を高速化する唯一の方法は、不必要な (実行時) ネットワーク リクエストを断固として排除することです。 、Json を除く フォーマット内の動的データとそれに含まれる製品写真に加えて、他のネットワーク リクエストがあってはなりません (埋め込まれたリクエストを除く)。したがって、HTML とビジネス データを分離する必要があります。これに基づいて、Hanglv の鳩プラットフォームは次の 4 つのタスクを完了するよう努めます:
Hanglv のページは、Zcache を通じてモバイル淘宝網でもオフラインになりますが、オンラインの監視が不足しているためです。ページが変更されるため、ダブル イレブン会場ページは依然として Zcache に HTML をキャッシュできませんが、JS、CSS、および Img のみをキャッシュできます。 HTML がキャッシュされるかどうかが、弱いネットワークの読み込み速度に大きな影響を与えることがわかっています。以下の図は、両端の 2G ネットワーク下での Hanglv Double イレブン メイン会場ページの読み込みウォーターフォールです。
タオバオ アプリでのレンダリングのタイミングが HTML ネットワーク リクエストによって遅延しており、更新された CSS ファイル リクエストによってレンダリングが不適切にブロックされていることがわかります。
したがって、H5 コンテナー用に、動的ページのキャッシュにおける Zcache の欠点を補う 2 つのプログラム、
もちろん、オフラインパッケージジェネレーターも不可欠です
このうち、増分パッケージを取得すると、携帯電話はローカルのオフライン ウェアハウスのバージョンを取得し、それをリモート tSync メッセージ内の更新パッケージのバージョンと組み合わせて、リソース パッケージの URL (実際の増分パッケージ URL)、形式は次のとおりです:
http://g.alicdn.com/trip/h5-op2op/{$线上最新版本}/{$本地包版本}.zipさらに、Diff Json は、「新規」、「削除」、「変更」を含む非常にクリーンなので、クライアントは次のことを行うことができます。新しいパッケージの適用後に古いファイルを削除します。プラットフォームの使いやすさに関しては、Xingge プラットフォームの操作インターフェイスには、「クイック オフライン」機能が追加されています。つまり、オフライン パッケージの更新到着率が十分ではないことが判明した場合、オフライン パッケージをオフラインにすることができます。すぐに端末の仮想ドメインがオンラインページに切り替わります。
システム全体の鍵は、伝書鳩プラットフォームと tSync サーバーという 2 つのプラットフォーム間の接続にあることがわかります。
アイデアが明確であれば、プッシュ パッケージ全体の論理設計は難しくありません。難しいのは、これらのモジュールの実装が信頼性が高く、堅牢であるかどうかです。 o2o タイミング クローラー プログラムと o2o タイミング プログラムは、@红树によって開発された独立したコマンド ライン スクリプトであり、リソースをオフラインにするプロセス中に、ファイル コンテンツに基づいてファイル パスのハッシュ値を決定する必要があります。ファイルの内容が変更されない限り、オフライン後も参照パスは変更されないため、増分ファイルを計算するには git-diff プログラムを使用する方が簡単です。結局のところ、ファイルが「新規」であるかどうかは、ファイルが「新規」であるかどうかによって決まります。内容が変更されているため、ファイル名（またはバージョン番号）の違いで判断しないでください。
o2o はリソースをキャプチャするために phantomjs に基づいているため、オンライン ページをローカルに完全に静的に変換する o2o-capture プロジェクトを派生し、TMS システム障害の災害復旧に使用されます。も素晴らしいです。
充実した周辺機能により、携帯電話はファイル IO のパフォーマンスの最適化に集中できます。前述したように、Hanglv H5 コンテナはローカル ファイルのファイルの読み取りと書き込みを高速化するために使用されます。一方では、不必要な IO を回避し、他方では、リソース プール管理とランタイム キャッシュ管理を分離して、それぞれのプログラム タスクが集中して効率的に行われるようにします。次の図は、携帯電話上の 2 つの重要なプロセスを示しています。
最後に、タイミングについて プログラムの助けを借りて、時間外の更新を心配することなく、HTML をオフラインで最後まで安全にアップロードできます。高性能な H5 コンテナーを使用すると、数秒でアップロードするのが自然です。 2G Gogo アプリとモバイル タオバオの杭州旅行カンファレンス ページの読み込み速度を比較してみましょう。最初の読み込みでも 2 回目の読み込みでも、オフライン バージョンの Go アプリの方が明らかにきれいで完全です。
これは、ネットワーク全体のパフォーマンス データからも当てはまります。下の図は、Hanglv Double イレブンの販売前段階のデータです。 10 月 28 日、メイン会場のページが Go.com、Wallet、Taobao などで利用可能になります。ネットワーク条件下での DomReady 時間の統計。 2G ネットワークの下では、Alipay と Taobao は基本的に HTML リクエストのブロックに陥っています。
3 つのネットワーク下の 3 つの端末の DomReady 時間 (秒単位) を比較すると、結果は明らかです。
これは淘宝網であることに注意してください。ウォレットには、アクティブなページの HTML リソースから取得したデータをキャッシュする条件がありません。理論的には、動的に更新されるページを半自動的にプッシュするための周辺ツール zcache プッシャーも作成しました。 2G オフライン アクセラレーションも実現できます。
さらに、Zcache は以前、オフライン操作を自動化するために新しいバージョンの TMS に接続することを計画していました。私たちと同様に、Zcache もこの問題に直面することになるでしょう。」リリース頻度とオフラインパッケージアップデート到着率」の問題。では、パケットの到着率に影響を与える要因は何でしょうか?
リリース頻度とオフライン パッケージ アップデートの到着率の比較
では、ダブルイレブンの実装中に、この矛盾は杭州旅行アプリにどのように現れたのでしょうか?下の図は、10 月 28 日の会場ページの最新のパッケージ プッシュ後のクライアントの更新率です。左の図はパッケージ プッシュの 1 時間後、右の図はパッケージ プッシュの 2 時間後です。
なんと、今日実行されたプッシュ パッケージの数を見てください。
過去の従来のオンライン ページの展開と比較すると、オフライン パッケージの展開の適時性は明らかに遅く、100% WYSIWYG ではないことがわかります。これも読み込み速度と引き換えに犠牲にしなければならないものです。ただし、基本的には、パッケージがプッシュされるたびに、更新の 90% 以上が 3 時間以内に完了します。ユーザーのネットワークや開始時間などの要因の影響を受け、携帯電話上に散在するオフライン パッケージの古いバージョンの断片化は依然として非常に深刻です。 どれだけ最適化方法を使用しても、頻繁なページ変更や頻繁なパッケージ プロモーションはページ エクスペリエンスに悪影響を及ぼします。
したがって、深夜に公開すると会場に切り替える必要がある場合など、時間に非常に敏感なページの場合は、すぐに有効になるようにページをすぐにデプロイする必要があります。オフラインにしたい場合は、次の 2 つのオプションがあります:
しかし、どの計画であっても、以前のように簡単にオンライン リソースを展開することはできません。 より高い適時性とより速い読み込み速度が必要な場合は、些細な需要の変更を適度に減らし、パッケージのプッシュ数を減らす必要があります。この観点から見ると、パフォーマンスを決定する要素はもはや主にテクノロジーではなく、エンジニアリングです。
今年のモバイル タオバオ (Tmall) ダブル イレブンのメイン会場のページでも、もともと Weapp は非常にエレガントに H5 ページをネイティブ ページに変換できましたが、理論的にはプロセスを大幅に高速化できました。ただし、ページの動的な更新とパーソナライズされた構成に対応するには、追加のネットワーク オーバーヘッドを導入する必要があります。これらのネットワーク オーバーヘッドは、レイアウトのレンダリングを適時にブロックし、弱いネットワークでは大きな影響を及ぼします。 Lauaa アプリの史上初の Hanglv メイン会場 (H5) と、モバイル 3G での淘宝網初の Tmall メイン会場の読み込み速度を見てみましょう:
ご覧のとおり、H5 ページは段階的に読み込まれますが、ネイティブ ページはリクエストが完了するのを待った後、即座にレンダリングされます。したがって、H5 であってもネイティブであっても、このような頻繁な変更や展開変更に対応するアクティブなページである限り、読み込みのボトルネックが発生します。 伝書鳩プラットフォームはこの矛盾を解決するための緩衝材ではありますが、基本的にはページの柔軟性を制御するという観点から依然として解決する必要があります。
ただし、この離散性は必ずしも悪いことではありません。インストール パッケージのボリューム拡張によるプレッシャーを適度に軽減できます。
信じられますか? タオバオとマオケのインストールパッケージは両方とも 100MB を超えています。これは、電子商取引アプリのパッケージ サイズの制限に達しています。前回の記事で述べたように、現在のクライアント テクノロジ アーキテクチャでは、爆発的に増加する新機能に対応できません。 H5 はリソースとコンテンツをリモートに配置するソリューションですが、クライアント エクスペリエンスは大幅に低下します。オフラインパッケージ技術は、この矛盾を埋めるのに非常に適しています。
しかし、初期のウォレット アプリと同様に、Hanglu アプリはインストール パッケージを構築するときにいくつかの重要な H5 リソースを「プレインストール」します。製品の反復速度は、このバッファでは十分とは程遠いです。現在、ウォレットとモバイル淘宝網は明らかにこのバッファを完全に占有しています:
Goa App v6.0 を例にとると、7M H5 オフライン パッケージにはセックス ページの機能のほぼ 40% が搭載されています。および 100% アクティビティ ページ。したがって、H5 ページの品質が十分に高い限り、H5 オフライン パッケージの消費量は非常にコスト効率が高くなります。 これは、非常にインタラクティブな「Go App 6.0 Trip」プロジェクトでも、一部の重要なページの開発に参加するためにフロントエンド チームの学生を動員し続けていることでもあります。誰もがもう H5 について心配していません。一方、エクスペリエンスのボトルネックは、「フロントエンドの学生がインターフェースを構築するのがとても速いです!!!」です。
したがって、高性能の H5 コンテナーは、効率的なオフライン パッケージ プッシュ システムと、高品質の H5 コード (確実に Clam Tools 経由) を組み合わせることで、ネットワーク全体に「シームレスなインスタント ダウンロード」エクスペリエンスを問題なく作成できます (エクスペリエンス ビデオ):
Xiahang Travel のダブルテンイベントも体験できます ワイヤレスカーニバルのパフォーマンスと 3G ネットワークでのゲームの実行、
上記のすべてを経て、最終的に期待した結果を達成しました:
これは、Hanglv ワイヤレス テクノロジー チームが行っていることです。とてもクールだと思いますが、そのことについて話しましょう。
WebView はアプリ プロセスのサンドボックスであるため、H5 ページのメモリ割り当てと CPU シャーディングは WebView によって独立して完了します。一般に、フロントエンド コードには詳細なメモリ管理がありません。 、メモリ リークが時々発生するため、H5 コンテナはクラッシュ率にある程度の影響を与えます。たとえば、Taobao Android では、メモリ負荷を軽減するために、開いている WebView スタックの数を制限します。
@小马との冗談で言ったように、ReactNative はソリューションです。「フロントエンドの学生は React を使用してアプリを構築し、Java 開発の学生は Bootstrap を使用してバックエンド インターフェイスを構築するのと同じくらい興奮しています。」 Bootstrap と同様に、ReactNative はアマチュアのネイティブ開発学生のための足場であり、C サイド向けの製品を作成することはできません。「Alibaba 内外」の規模のアプリケーションしか作成できません。
もう 1 つの方向性は、動的な Native ページ レイアウトを再設計することです。このグループの代表的なものは、Web コンポーネントに基づいて 3 つの端で同形にレンダリングされる Weapp です。今年の Double 11 では、依然として複雑なリストのパフォーマンスの問題が時々発生しますが、少なくとも UI 全体のレンダリングが WebView から分離され、メモリがより制御可能になりました。 また、実行時のパフォーマンスの点では、H5 変換ネイティブかネイティブ ネイティブかに関係なく、特に非常に長く複雑なリストのレンダリングにおいて H5 コンテナよりも優れていることも認めなければなりません。 Bird's Nest と Dynamic の完全な UI レンダリングと比較して、杭州は H5 と Native のクロス レンダリング テクノロジを試すことも計画しています。全体的なアイデアは、JSCore と Webkit カーネルの縮小版を使用して、翻訳された HTML フラグメントをレンダリングすることです。ページはネイティブに渡されます。組み立ててみましょう:
私たちはこの方向に向けてまだ始めたばかりですが、兄弟の BU と一緒に構築していきたいと考えています。
Hanglv がハイブリッド方向で行っていることは、Hanglv H5 が他の端末よりも速いことを証明することではありません。結局のところ、アプリケーションのシナリオは異なります (たとえば、モバイル ショッピングは選択的に使用されています)。 3G および 2G ネットワークは無視されます）。しかし、Hanglu とグループの BU の混合した開発慣行から判断すると、実際、Native は全員が同じ方向に取り組んでおり、H5 の迅速な開発および展開能力を獲得することを望んでおり、H5 はより高速でより高いハードウェア呼び出し許可を取得することを望んでいます。 2 つのアイデア:
私は、従来のフロントエンド エンジニアとして、PC 時代からワイヤレスに切り替えました。昨年、Hanglv がワイヤレスの研究開発モデルを検討し始めて以来、幸運なことに、最初からさまざまなネイティブ テクノロジーを試すことができました。 、これまでに多くのシステムやツールが実装され、一連の探索によって私自身の想像力が広がり、以前の固有のプログラミング概念が大きく破壊されました。過去 2 年間、人々は少し信じられないほどです。私は、一方では、PC Web 開発の急速な衰退が、ワイヤレス フロントエンド テクノロジーの急速な台頭の機会をもたらしたと思います。他方では、ワイヤレス テクノロジーの急速な台頭は、技術システム (H5) の混在をもたらしただけではありません。とネイティブ）だけでなく、より多くの人々の混合が求められます。多くのフロントエンドの学生が ReactNative を勉強し、多くのネイティブの学生が W3C と HTML5 を勉強していることを非常に嬉しく思います。技術的な境界を打ち破り、無線技術を受け入れるオールイン社が、好奇心に満ち、自社固有の技術概念を懐疑的な目で見つめ、無線技術の新たな変化に熱中し、楽しんでいるのはこのためではないかと思います。 Alibaba Wireless ビジネスの成長に伴い、エンドテクノロジーシステムは百花繚乱、多様化したバーを目指して歩み続けています。
続き...
いくつかの Q&A:
Q: 現在、Wifi が最も多くのユーザーを抱えるネットワークですが、なぜ弱いネットワーク ユーザーをわざわざ扱う必要があるのでしょうか?
A: まず、最も要求の厳しい環境で自分のスキルをテストしたいと考えています。次に、私たちは 4G を実際に体験し、3G のインターネット速度はどれくらいですか?
Q: この強力なハイブリッド R&D モデルは、フロントエンド テクノロジーのフレームワークにどのような影響を与えますか?
A: その影響は破壊的です。フロントエンドのモジュール型プログラミングはローダーと上位層のモジュールの仕様に依存しすぎている一方で、モバイル Web が依然としてローダーに大きく依存しているかどうかについては疑問符が付いています。実行時にリソースの依存関係を整理します。ロードすると、明らかに貴重なランタイム リソースが占有されるため、リソースの整理とロードは下位レベルの H5 コンテナまたはツールに任せる必要があります。
Q: H5 コンテナーはブラウザーであり、Web の読み込みパフォーマンスと実行時のパフォーマンスのバランスをとるにはどうすればよいですか?
A: この記事では主に読み込みパフォーマンスのソリューションについて説明します。実行時のパフォーマンスに関する一連のベスト プラクティスもあります。これについては、別の記事で紹介します。
Q: 結局のところ、H5 ベースのコンテナはブラウザとは異なります。オフライン パッケージのデバッグをすばやく有効にするにはどうすればよいですか?
A: これに関しては、モバイル ショッピングとウォレットに関するベスト プラクティスがあります。 Hanglv は、ツールを使用して zip オフライン パッケージをリアルタイムで構築し、携帯電話に直接コピーできます。これは現時点では最も安価で効果的な方法です。
Q: Hanglv は、7M オフライン パッケージを使用して、アプリ内の機能ページの 40% をどのように達成できますか?
A: 1年間かけて減量の最適化を行ってきましたので、別の記事で紹介します。
Q: 上記のオフライン データはどこから来たのですか?
A: Hanglv は非常に包括的な管理ソリューション トラッカーを提供します。現在の導入では十分ではありませんが、基本的に必要な重要なデータをより正確に取得できます。ほとんどのデータは魚眼レンズで表示できます。
この記事は、Alibaba Technology Association (ATA) コレクションからのものです
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
