Glean 瞬時に読み込まれるしくみ-Glean

で Glean、 スピード 私たちのお気に入りです 特徴。一部の企業とは異なり、広告を表示するためだけにユーザーの目をできるだけ長く留めたいというモチベーションに悩まされることはありません。個人やチームが必要なものを見つけ、できるだけ早く作業を開始できるように最適化することで、大きなことを成し遂げることができます。

Glean で何かをすばやく見つける方法の1つは、新しいタブページを使用することです。レイアウト、背景、お気に入りのサイト、推奨ドキュメントなど、各ユーザーによってパーソナライズおよびカスタマイズされます。このような動的なコンテンツがあっても、誰もが新しいタブがすぐに開き、目に見える遅延がないことを期待しています。それは私たちにとって楽しい挑戦でした エンジニアリングチーム —新しいソリューションが必要だったもの。

このビデオの結果を見てください。このテクニカルポストでは、その方法を説明しています。

‍

‍

ステップ 1-サービスワーカー

ウェブブラウザがページを読み込むとき、まずそのリソースをすべて取得する必要があります。これまでは、ネットワークを待つのに数秒かかりました。 サービスワーカー それを完全に変えました。そこで、私たちが最初にしたことは、セットアップすることでした ワークボックスは、オフラインでもキャッシュからページ全体を読み込むサービスワーカーを簡単に作成できる優れたオープンソースフレームワークです。

ステップ 2-リダックスパーシスト

コードとリソースのロードが速くなったので、次の問題は、プリファレンスを取得するためにサーバーへのラウンドトリップが必要だったことです。これを回避するために、以下を使用してすべてをローカルの IndexedDB にキャッシュしました リダックスパーシスト。

これは最初はうまくいったように見えましたが、特に負荷の高いマシンでは、アプリであらゆる種類のパフォーマンスの問題が発生しました。幸いなことに、GoogleのChrome Speedチームの創設メンバーのうち2人が現在Glean で働いているので、デバッグ用のツールを知っていました- クロームトレーシング。Chrome はデフォルトで、IndexedDB が書き込んだすべてのディスクへの書き込みを fsync 経由でフラッシュするのを待っていることがわかりました。Firefoxのような一部のブラウザはそうではありませんが、少なくともChromeはそれを回避するツールを提供してくれました— リラックスした耐久性。そこで、独自の redux-persist バックエンドを作成し、Workbox の修正も行いました。これで、ファイルシステムの操作が病理学的にバックアップされなくなりました。

ステップ 3-レンダリングキャッシュ

キャッシュは完全で効率的でしたが、それでも十分な速度ではありませんでした。ブラウザはまだJavaScriptのコンパイルと最初のレンダリングのためのReactの起動に数百ミリ秒を費やしていました。そこで、ヒントを得て、既成概念にとらわれずに考える必要がありました サーバーサイドレンダリング。これは、サーバー上で DOM をレンダリングし、その HTML をブラウザーに送り、React が読み込まれている間に CSS/HTML の解析とレイアウトのみですぐに表示できるようにする手法です。

その結果、これはクライアント上で動的に構築されたページでも機能する可能性があることがわかりました。ロード後、DOM の HTML のスナップショットを取得して Service Worker に保持します。これにより、次回のロード時に、表示するのに JavaScript を必要としない事前にレンダリングされた HTML ページがキャッシュにすでに存在するようになります。詳細は難解です。検索入力のクリア、不適切な水分補給、陳腐化の回避などの落とし穴を避けるために、慎重な検討が必要でした。

しかし、最終結果はそれ自体を物語っています。私たちが知る限り、これは新しい手法です。興味があれば、汎用的なWorkboxプラグインをオープンソース化しても構いません。

次は何？

ご理解いただければ幸いです。このような楽しい課題を解決し、私たちと一緒にウェブプラットフォームを限界まで押し上げることに興味がありますか？私たちをチェックしてください キャリア ページ。