最近、インターネットでは、データの使用に関するより多くの出版物uri css spritesが登場し始めました。 Googleで世界的に有名な「オプティマイザー」であるSteve Soudersブログから2つのリンクを提供します。
CSSEmbed-自動的にデータ：URI-ize
最適化：リアルタイムスプリッティングなど
私たちの国内のヒーローである「webオプティマイザー」 sunnybearは、データの使用に関する質問を以前に提起しました。cssの uriで、多くの研究を共同で実施しました。 そのとき、 以前の記事で書いた多くの興味深い点と機能が登場しました 。 最近の実験により、データuri cssスプライトを使用したブラウザーの動作に関する多くの未知のポイントが明らかになりました。
問題は、データの不適切な使用 ：uri cssスプライト技術では、サイトの読み込み（表示）の速度を遅くすることができることです。
例を考えてみましょう
通常、データ：uri cssスプライトを使用する場合、背景画像はメインスタイルから分離され、base64に変換されてから、個別に接続されているスタイルシートに配置されます。 すべての（またはほとんどすべての）背景画像がこのファイル内に配置されるという事実により、そのサイズは非常に大きくなります。
データの接続：uriからHEAD
両方のスタイルファイル（メインおよびbase64画像）をHEADに接続すると、これらのスタイルが読み込まれるまでサイトに「フリーズ」が表示されます。データの重み：uri cssファイルが大きいため、今回は非常に重要です。
HEADでの接続例
より明確にするために、示された例では、データの発行のために10秒の遅延が行われました：uri css。
ブラウザの結果
データ：uri cssのダウンロードが完了するまでページを表示しないでください：
-Chrome 3.0.195.33
-FF 3.5.5
-Safari 4.0.3
-IE 8.0.6001
データを待たずにすぐにページを描画します：uri cssが読み込みを完了します：
-Opera 9.62
データを接続します：FOOTERのuri（</ body>付近）
メインスタイルシートをHEADに接続し、FOOTERのbase64画像を含むスタイルシートが「フリーズ」しない場合、目的の最適化効果が得られます。 base64イメージ。
FOOTERでの接続例
ブラウザの結果
データ：uri cssのダウンロードが完了するまでページを表示しません：
-IE 8.0.6001
データを待たずにすぐにページを描画します：uri cssが読み込みを完了します：
-Chrome 3.0.195.33
-FF 3.5.5
-Safari 4.0.3
-Opera 9.62
結論
データを使用する場合：uri css spritesテクニックを強くお勧めします
1）基本スタイルおよびスタイルのファイルをbase64イメージと共有します（データ：uri css）
2）データを接続する：文書の最後にあるuri css、終了</ body>タグに可能な限り近い
3）js-cssブリッジ（不凍液）を使用してデータを接続する：IEのuri css
PS：IEでの冒険が安定していることを嬉しく思います。第8バージョンでも、仕事をより面白くする楽しい驚きに出会うことがよくあります。
広告
フライアエロフロート飛行機