javascript - Twitter の UI は、HTML5 の iPhone モバイル サイトでなぜこれほど迅速に応答するのでしょうか?

Question

iPhone 上の Twitter の新しい HTML5 モバイル サイトは、モバイル ブラウザで非常に高速です。サイトでネイティブに近いエクスペリエンスを作成するために、どのような手法を使用していますか?

Answer 1

それは非常に高速であり、それを実現するために使用される多くのテクニックがあります。それらのいくつかをカバーしましょう：

HTTP リクエストを最小限に抑える

したがって、単純なものから始めてソースを表示すると、すべてがめちゃくちゃになります。彼らは、HTML ページにすべての CSS と Javascript を含めるために、サーバー側のいくつかの奇抜な作業を行っています。これの利点は、単一のリクエストですべての初期レイアウト コードを取得できることです。そのため、最初に読み込まれたときにページが黒くなっています。HTTP リクエストを最小限に抑えることは、サイトのパフォーマンスを改善するための最良の方法の 1 つであり、それに関連する多くのテクニックがあります (CSS 圧縮、Javascript 圧縮、スプライトマップの作成など)。

これにより、次のことがわかります。

スプライトマップを作成します。

ネットワーク トラフィックに含まれる sprite.png を見てください。すべてのアイコンがあります。離れたリストは、これがどのように機能するかを説明するのにかなり良い仕事をします:

http://www.alistapart.com/articles/sprites

簡単な説明は、大きなグラフィックがあり、CSS を使用してその特定の 1 つの部分のみを表示するウィンドウを作成することです。グラフィックを 1 つにすることで、HTTP リクエストを最小限に抑えることができます。

CSS3 を使用する

特に興味深いのは、これをtwitter bootstrapでさらに調べることができるボタンです。ボタンはグラフィックではありません。これらは CSS3 グラデーションです (グラフィック アイコンが上に重ねられています)。このページに表示されるデバイスはすべて CSS3 グラデーションをサポートする必要があるため、安全で簡単な方法で適切なインターフェイスを作成できます。

遅延ロード

背景画像は事後に Javascript 経由でリクエストされるため、表示されるまでに 1 秒かかります。これが最後の空想です。大きな画像のような重いものは、ページが使用可能になったときにのみ要求されます。

これがお役に立てば幸いです。何かあれば質問してください。