増分更新がダウンロード速度に与える影響。 Yandex.Mailエクスペリエンス

Yandex.Mailは、大規模で複雑なWebアプリケーションです。 最初のダウンロードには、1 MBを超える静的リソース（JS / CSS /テンプレート）が必要です。 同時に、Yandex.Mailは週に2回、場合によってはより頻繁に更新されます。

ただし、バージョンからバージョンにアップグレードする場合、特に修正プログラムの場合、コードの変更はそれほど多くありません。 これはフリーズでも示されています。 新しいバージョンがリリースされたときのメールの読み込み時間を短縮するために、すでに次のことを行っています。

• gzipをオンにします。
• キャッシングヘッダーを設定します。
• Freezim CSS、JS、テンプレート、写真 。
• CDNを使用します。
• クロスドメインAJAXリクエストを介して静的データを並行してロードします。

しかし、これだけでは十分ではありません。 フリーズであっても、リリースで変更されるファイルが1行のみで、その中に複数の行がある場合、このファイルの内容からのハッシュが変更され、キャッシュが無効になるため、ファイル全体が再ロードされます。 この問題を回避し、新しいリソースをさらに効率的にロードするために、インクリメンタル更新メカニズムを考案しました。

「しかし、古いバージョンのファイル（localStorageなど）をどこかに保存し、新しいファイルが出てきたら、そのファイルとユーザーが保存したファイルとの差分のみを転送するとどうなりますか？」 それが何から来たのか、そしてパンヤと私がどのような結論に達したのかを読んでください。

実際、この考えは新しいものではありません。 HTTPにはすでに標準があります。たとえば、 RFC 3229 「HTTPでのデルタエンコーディング」やGoogle SDHCなどがありますが、さまざまな理由により、ブラウザやサーバーに適切に配布されていません。

JSで独自のアナログを作成することにしました。 この更新メソッドを実装するために、JSでdiff実装を探し始めました。 人気のあるコードホスティングサイトで次のライブラリが見つかりました： VCDiff 、 google-diff-patch-match 、 jsdiff 、 Pretty Diffおよびjsdifflib 。

最後の2つのライブラリ（jsdifflibとPretty Diff）は、パッチを適用する方法がわからず、行間の変更のみを表示するため、すぐには私たちに合いませんでした。 また、jsdiffはgoogle diffパッチマッチに似た形式でパッチを生成しますが、オーバーレイは5倍遅くなります。 その結果、2つの候補が残っています。

ライブラリを最終的に選択するには、2つの主要なメトリックを使用してライブラリを比較する必要があります。 最初は、生成されたパッチのサイズです。 さまざまなバージョンのさまざまなリソース用のパッチを生成し、google diff patch matchとvcdiffをさまざまなブロックサイズで比較しました。

Vcdiff（ブロックサイズ3）	Vcdiff（ブロックサイズ10）	Vcdiff（ブロックサイズ20）	google diff patch match
13957	3586	3431	9297
865	367	309	910
4615	1854	1736	6740

結果の表からわかるように、20バイトのブロックサイズのvcdiffのパッチサイズは最小です。 2番目の重要な指標は、パッチがクライアントに適用された時間です。

図書館	IE 9	Opera 12	Firefox 19	クロム
vcdiff（ブロックサイズ10）	8	5	5	3
google diff patch match	1363	76	43	35

ここでも、vcdiffが大幅に勝ちます。 IE 9以下では、google-diff-patch-matchは1秒以上でパッチを適用します。

勝者はvcdiffです。 このアルゴリズムは2002年に提案されました（ RFC3284 ）。 これは非常に人気があり、C ++、Java、JSなど、さまざまな言語で多くの実装があります。

diffのライブラリを決定したら、クライアント上の静的データをどこにどのように保存するかを決定する必要があります。 Yandex.Mailは最新のWebアプリケーションであり、古いブラウザーはないため、ほぼ全員がlocalStorageをサポートしています。 これは、静的を保存するのに便利な場所です。 そこには個人ユーザーのデータがないため、セキュリティ上の問題はありません。 各ファイルは個別のキーに保存されます。 このキーには、リソースの名前だけでなく、そのバージョンも含まれます。 これにより、ファイルとそのメタデータが異なるキーに保存されている場合に、バージョンがlocalStorageに書き込むことができたが、ファイル自体は書き込みできなかった（またはその逆）場合の問題を回避できます。

新しいリリースを作成するとき、各リソースのいくつかの以前のバージョンのパッチを生成します-まず、3つを選択しました。 以前のバージョンのパッチの入手可能性に関する情報は、ブートローダーに提供されます。

プロジェクトのパッチを含むファイル形式は次のようになります。
[ { "k": "jane.css", "p": [patch], "s": 4554 }, { “k”: “jane.js”, “p”: [patch], “s”: 4423 }, ...]

つまり、通常のオブジェクトの配列です。 各オブジェクトは個別のリソースです。 各オブジェクトには3つのプロパティがあります。 「K」は、このリソースのlocalStorageのキー名です。 「P」は、vcdiffが生成したリソースのパッチです。 「S」は現在のバージョンのリソースのチェックサムであるため、後でクライアントにパッチを適用することの正確性を確認できます。 Chexummaは、Fletcherアルゴリズムによって計算されます 。

CRC16 / 32やmd5のような他の一般的なアルゴリズムではなく、なぜ完全にフレッチャーアルゴリズムですか？ なぜなら、それは高速で、コンパクトで、実装が簡単だからです。

更新プロセス

最初に、ブートローダーはlocalStorageを調べます。 ユーザーが何も持っていない場合、またはバージョンが古くてパッチがない場合、すべてのファイルが全体としてダウンロードされます。

localStorageに古いバージョンが保存されている場合、パッチファイルのリクエストを送信します。 次に、すべてのリソースを更新し、チェックサムを確認します。 すべてのチェックサムが一致する場合、localStorageのキーの内容を更新します。

これで更新プロセスが完了します。 次に、必要なすべてのリソースをlocalStorageから取得します。 新しいFunction（）を介してJSモジュールとコンパイル済みテンプレートのコードを実行し、動的タグ挿入を介してCSSを接続します .


80-90% . :
7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159

?
. ?

. . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — .

, — , , . , , , — , .

, , , JS . JS , — . CSS . CSS , , ( ). , CSS , — .

. 30% . , . HTTP-. , , — , , . , , . . « », , , .

VS. — . , . , , . , . , .

, , localStorage, , , .


, 146% . , — , . , , .

, HTTP/2 , RFC3229, . . .

.


80-90% . :
7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159

?
. ?

. . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — .

, — , , . , , , — , .

, , , JS . JS , — . CSS . CSS , , ( ). , CSS , — .

. 30% . , . HTTP-. , , — , , . , , . . « », , , .

VS. — . , . , , . , . , .

, , localStorage, , , .


, 146% . , — , . , , .

, HTTP/2 , RFC3229, . . .

.


80-90% . :
7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159

?
. ?

. . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — .

, — , , . , , , — , .

, , , JS . JS , — . CSS . CSS , , ( ). , CSS , — .

. 30% . , . HTTP-. , , — , , . , , . . « », , , .

VS. — . , . , , . , . , .

, , localStorage, , , .


, 146% . , — , . , , .

, HTTP/2 , RFC3229, . . .

. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .	. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .	. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .
. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .	. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .	. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .
. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .	. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .	. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .
. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .	. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .	. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .
. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .	. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .	. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .
. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .	. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .	. 80-90% . : 7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159 ? . ? . . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — . , — , , . , , , — , . , , , JS . JS , — . CSS . CSS , , ( ). , CSS , — . . 30% . , . HTTP-. , , — , , . , , . . « », , , . VS. — . , . , , . , . , . , , localStorage, , , . , 146% . , — , . , , . , HTTP/2 , RFC3229, . . .

.


80-90% . :
7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159

?
. ?

. . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — .

, — , , . , , , — , .

, , , JS . JS , — . CSS . CSS , , ( ). , CSS , — .

. 30% . , . HTTP-. , , — , , . , , . . « », , , .

VS. — . , . , , . , . , .

, , localStorage, , , .


, 146% . , — , . , , .

, HTTP/2 , RFC3229, . . .

.


80-90% . :
7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159

?
. ?

. . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — .

, — , , . , , , — , .

, , , JS . JS , — . CSS . CSS , , ( ). , CSS , — .

. 30% . , . HTTP-. , , — , , . , , . . « », , , .

VS. — . , . , , . , . , .

, , localStorage, , , .


, 146% . , — , . , , .

, HTTP/2 , RFC3229, . . .

.


80-90% . :
7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159

?
. ?

. . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — .

, — , , . , , , — , .

, , , JS . JS , — . CSS . CSS , , ( ). , CSS , — .

. 30% . , . HTTP-. , , — , , . , , . . « », , , .

VS. — . , . , , . , . , .

, , localStorage, , , .


, 146% . , — , . , , .

, HTTP/2 , RFC3229, . . .

.


80-90% . :
7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159

?
. ?

. . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — .

, — , , . , , , — , .

, , , JS . JS , — . CSS . CSS , , ( ). , CSS , — .

. 30% . , . HTTP-. , , — , , . , , . . « », , , .

VS. — . , . , , . , . , .

, , localStorage, , , .


, 146% . , — , . , , .

, HTTP/2 , RFC3229, . . .

.


80-90% . :
7.7.20 — 7.7.21 397 174 549 7.7.21 — 7.7.22 383 53 995 7.7.22 — 7.8 18 077 611 378 7.8 — 7.8.50 2 817 137 820 7.8.50 — 7.8.8000 14 868 443 159

?
. ?

. . 20, Opera 12 IE9 — 100. . , JavaScript — , , 120, — .

, — , , . , , , — , .

, , , JS . JS , — . CSS . CSS , , ( ). , CSS , — .

. 30% . , . HTTP-. , , — , , . , , . . « », , , .

VS. — . , . , , . , . , .

, , localStorage, , , .


, 146% . , — , . , , .

, HTTP/2 , RFC3229, . . .