TwitterのUIはHTML5 iPhoneモバイルサイトでどのように素早く対応していますか？

Question

Twitterの新しいHTML5モバイルサイトは、モバイルブラウザでは激しく高速です。彼らのサイトにネイティブ体験を近づけるためにどのようなテクニックを使用していますか？

Answer 1

それは驚くほど高速であり、そしてそれが実現するために使用される技術の多くがあります。 HTTPは

だから、シンプル始めとソースを表示、あなたがの...すべて巨大な混乱よを要求最小化

：これらの一部をカバーしてみましょう。彼らは、HTMLページにすべてのCSSとJavascriptを含めるために、サーバーサイドの虚構をやっています。この利点は、単一のリクエストですべての初期レイアウトコードを取得できることです。それがページが最初に読み込まれたときに黒である理由です。 HTTP要求を最小化することは、サイトのパフォーマンスを改善するための最良の方法の一つであり、それに関連する技術のホストがある（spritemapを作成CSS圧縮、Javascriptの圧縮は、...）

に私たちをもたらしますどの：

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

は、ネットワークトラフィックに含まsprite.pngを見てみましょう。それはすべてのアイコンを持っています。リストを離れて、これがどのように機能するかを説明するのはかなり良い仕事をしていません：

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

簡単な説明は、あなたが大規模なグラフィックを持って、それの唯一の特定の部分を見て、ウィンドウを作成するためにCSSを使用しています。 HTTP要求を最小限に抑えるために、1つのグラフィックをもう一度表示することができます。特別な関心の

使用CSS3

、あなたはtwitter bootstrapでこれをさらに調査をすることができ、ボタンです。ボタンはグラフィックスではありません。 CSS3グラデーション（上にレイヤーがグラフィカルなアイコン）があります。このページを提供しているデバイスはCSS3グラデーションをサポートする必要があります。そのため、安全で軽快なインターフェースを作成することができます。

レイジーロード

それは事実の後にJavascriptを介して要求ているため、背景画像は、表示される秒かかります。それは最終的な虚栄心です。大きな画像のような重いものは、ページを使用できるようになると要求されます。あなたがいずれかを持っている場合は、このことができます

希望は、質問をします！