2012-09-10 19 views
9

ウェブサイトでは、ページロードの間に発生する白い「フラッシュ」が発生しています。背景画像を使用しているために悪く見えます。ページが読み込まれると、背景画像が画面に表示される前に点滅します(take a look for yourself)。この問題は、クロームとIEでは発生しますが、Firefoxでは発生しません。ページロード間で点滅する

サイトには事前に読み込む方法があります。ページのすべての要素は、最初はdisplay:noneにあるdivラッパー#websiteにあり、すべての画像はdivラッパー#website-imagesに隠されています。次に、サイト(jqueryプラグインを使用)は、#website-imagesのすべての画像が読み込まれているかどうかを確認します。クッキーが設定されていると、このユーザーは既に画像を読み込んでいますので、彼らは別のページに移動するか、現在のページをリロードすると、$("#website").show()への呼び出しが行われ、Webページが表示されます。

ページの読み込み中にこのちらつきが発生する原因は何ですか?画像をプリロードするのは私のやり方ですか?私は別のdoctypesを追加し、メタ情報を変更しましたが、何も働いていません。私はここで本当に迷っています。誰にもアイデアや洞察力がありますか?

答えて

38

これは、ページが実際にレンダリングされる前にDOMLoadedイベントが十分にミリ秒で発生するためです。

要するに、これはウェブサイトのスピードを最適化する必要があることを意味します。これは、ダウンロードをより早くにすることを意味するものではありませんが、正しい順序で、ノンブロッキングの方法でダウンロードすることを意味します。

ステップ1:あなたのマークアップ

1) あなたのマークアップを最適化するために行うことができますがたくさんあるようです。まず、スタイルシートとJavaScriptの順序を最適化することができます。 CSSファイルが非同期にダウンロードされるようにするには、外部JavaScriptファイルの前に必ず外部CSSを含める必要があります。 style.cssは、JavaScript呼び出しの一部またはすべての後にダウンロードされます。

外部CSSファイルと別のリソースの間には、先頭に1つのスクリプトブロックがあります。パラレルダウンロードを可能にするには、外部CSSファイルの前、または次のリソースの後にインラインスクリプトを移動します。

2) あなたのメインのJavaScriptファイルは、マークアップ内にインライン展開されています。スクリプトがダウンロードを完了するまでページをダウンロードするだけでなく、の前にのコンテンツがおそらく白いフラッシュを引き起こしている(または追加している)。

スクリプトを頭に非同期で読み込むことが私の推奨する方法です。 DOMの読み込みが完了したらスクリプトをトリガーするか、bodyタグの最後にスクリプトを置いて同じ結果を得ることができます。

ステップ2:ハーネスブラウザの機能

1)HTTPヘッダを見ると、HTMLページなどのブラウザにキャッシュされていない別のHTTP呼び出しとして提供されている28の項目、(、JPG画像があります、スタイルシート、およびJavaScriptファイル)。

これらの項目は明示的にキャッシュできません。これはウェブサーバーの設定を編集することで簡単に修正できます。

2)gzip圧縮を有効にします。ほとんどのWebブラウザ(はい、IEでも可能)はgzip圧縮解除をサポートしています。ほとんどの場合、gzipを使用して圧縮をサポートしています。あなたは過度の挑戦をして、(ChromeとFirefoxでサポートされている)代わりの軽いHTTPプロトコルであるSPDYを調べることもできます。

ステップ3:コンテンツは、あなたのドメインから提供された約30個々の項目があります

サービスを提供しています。まず、この数のリクエストを減らす方法を検討します。ページビューごとに30のHTTPリクエストがたくさんあります。

1)複数のホスト名にまたがってダウンロードすることができます。現在、ブラウザは単一のドメインへの同時接続数を制限しています。別のドメイン(img.bigtim.caなど)から画像を配信すると、他のコンテンツと並行して配信することができます。

2)複数のアイテムを1つにまとめます。ダウンロードされる多くのアイテムは、ロゴ、メニュー要素などの純粋にスタイルのコンテンツです。これらは1つのイメージにまとめられ(1回だけダウンロードされます)、CSSを使用して分割できます。これはCSSスプライトと呼ばれます。スタックオーバーフローはこれを行います:look here

3)ダウンロードが必要な項目を減らすことができない場合は、cookielessドメインから静的コンテンツを提供することで、サーバー(およびクライアントのブラウザ)の負荷を軽減できます。 Stack Overflowは、イメージ、スタイルシート、スクリプトなどの静的コンテンツすべてでこれを行います。

ステップ4:あなた自身のコードを最適化

HTTPとブラウザ技術があなたのウェブサイトのスピードを助けるために行うことができます唯一そんなにがあります。この最後のステップはあなた次第です。

1)jqueryを自分でホストする理由はありますか? Jqueryのダウンロードページには、複数のCDNが表示され、迅速にキャッシュされたスクリプトのダウンロードを指示できます。

2)あなたのスタイルシートには、CSSファイル全体の36%という、未使用のCSSルールが20以上あります。本当に必要なことを再考してください。

3)JavaScriptのメインチャンク(bodyタグの先頭)が高速化しようとするハックのようですが、おそらく何か助けにはならないでしょう。

ページがまだ色あせているかどうかを指定するクッキーが設定されています。 CSSでうまく実行できるトランジションを実行するためにJavaScriptを使用しているだけでなく、スクリプトの半分以上がクッキーを読み書きするための機能を定義するために使用されます。

このようなものを見て:$("body").css ("background-image", "url('images/background.png')");$("#website").show();は通常、私は「関心事の分離」についてわめき散らすますが、この答えは今、うまくいけば、あなたは同じコードでスタイルと機能性を混合する悪い習慣であることがわかります十分な長さです。

補遺:コードを見てみると、すべてのjqueryのための必要は にありませんあなたは何をしているかを実行します。しかし、もう一度、あなたがやっていることを実行するために をする必要はありません。だから、 JavaScriptをまったく使わなければ、おそらくもっとうまくいくでしょう。

+0

これは素晴らしいです! –

4

bodyタグを閉じる直前にjavascriptをhtmlの最後に移動します。時にはそれが役に立ちます。