LoginSignup
4

More than 5 years have passed since last update.

Dropboxのサムネイル取得高速化

Last updated at Posted at 2014-07-08

Improving Dropbox Performance: Retrieving Thumbnails - Dropbox Tech Blog

メモを見つけたので共有。

問題

ブラウザではリクエストの並列数に上限があるため、サムネイル取得の全体のパフォーマンスが低下する。(Request queuing)

解決策

まずSPDYを検討したが、以下の理由により断念した。
* Amazon ELB (ロードバランサ)はSPDYをサポートしてない
* モバイルアプリではSPDYを使えない

HTTPSで画像のURLをbatch requestsしてdata URIで返すことにした。

GET https://photos.dropbox.com/thumbnails_batch?paths=
        /path/to/thumb0.jpg,/path/to/thumb1.jpg,[...],/path/to/thumbN.jpg
HTTP/1.1 200 OK
Cache-Control: public
Content-Encoding: gzip
Content-Type: text/plain
Transfer-Encoding: chunked

1:data:image/jpeg;base64,4AAQ4BQY5FBAYmI4B[...]
0:data:image/jpeg;base64,I8FWC3EAj+4K846AF[...]
3:data:image/jpeg;base64,houN3VmI4BA3+BQA3[...]
2:data:image/jpeg;base64,MH3Gw15u56bHP67jF[...]
[...]
  • base64にするとオーバーヘッドがあるが、gzip圧縮されるためそのオーバーヘッドは相殺される
  • キャッシュできる
  • progressiveロードできる

ので問題なく動く。

結果

全プラットフォームにデプロイし、Webではページ読み込み速度が40%向上した。

今後はSPDYの採用を計画している。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4