ページの読み込み間で点滅
Webサイトで、ページの読み込みの間に発生する白の「フラッシュ」が発生しています。背景画像を使用しているため、見栄えが悪く、ページが読み込まれると、画面に表示される前に背景画像が点滅します（ 自分で確認してください ）。この問題はchromeおよびIEで発生しますが、Firefoxでは発生しません。
このサイトには、コンテンツをプリロードする方法があります。ページ上のすべての要素は、最初は_#website_にあるdivラッパー_display:none_にあり、すべての画像は、同じく非表示になっているdivラッパー_#website-images_にあります。次に、サイト（jqueryプラグインを使用）は、_#website-images_内のすべての画像の読み込みが完了したかどうかを確認します。Cookieが設定されると、このユーザーが既に画像を読み込んだことを記憶するように設定されているため、画像は通過しません。別のページに移動するか、現在のページを再読み込みすると、プリロードプロセスが実行され、$("#website").show()が呼び出されてWebページが表示されます。
では、ページの読み込み間でこのちらつきが発生する原因は何でしょうか。画像をプリロードする私の方法ですか？さまざまなDoctypeを追加し、メタ情報を変更しましたが、何も機能しませんでした。私はここで本当に迷っています、誰かが何かアイデアや洞察を持っていますか？
これは、ページが実際にレンダリングされる数ミリ秒前にDOMLoadedイベントが発生したために発生しています。
一言で言えば、これはあなたがあなたのウェブサイトの速度を最適化する必要があることを意味します。これは、ダウンロードを速くするという意味ではありませんが、正しい順序ででダウンロードすることを意味します。ノンブロッキングの方法。
ステップ1：マークアップ
1）マークアップを最適化するためにできることはたくさんあるようです。まず、スタイルシートとJavaScriptの順序を最適化できます。 CSSファイルが非同期でダウンロードされるようにするには、外部JavaScriptファイルの前に常に外部CSSを含める必要があります。 _style.css_は、JavaScript呼び出しの一部またはすべての後にダウンロードされます。
外部CSSファイルと別のリソースの間のヘッドに1つのスクリプトブロックがあります。並列ダウンロードを許可するには、インラインスクリプトを外部CSSファイルの前、または次のリソースの後に移動します。
2）メインのJavaScriptファイルはマークアップ内でインラインです。これは、スクリプトのダウンロードが完了するまでページのダウンロードをブロックするだけでなく、コンテンツの前に、おそらく白いフラッシュを引き起こしている（または追加している） 。
スクリプトを非同期でヘッドにロードするのが私の好ましい方法です。次に、DOMの読み込みが完了したときにスクリプトをトリガーする必要があります。または、bodyタグの下部にスクリプトを配置することで同じ結果を得ることができます。
ステップ2：ブラウザの機能を活用する
1）httpヘッダーを見ると、ブラウザーにキャッシュされていない28個のアイテムが個別のHTTP呼び出しとして提供されています（htmlページ、jpg画像、スタイルシート、JavaScriptファイルを含む）。
これらのアイテムは明示的にキャッシュ不可であり、これはWebサーバーの構成を編集することで簡単に修正できます。
2）gzip圧縮を有効にします。ほとんどのWebブラウザ（はい、IEでも）はgzip解凍をサポートしており、ほとんどの（すべてではないにしても）Webサーバーはgzipを使用した圧縮をサポートしています。やり過ぎて、代替の軽量HTTPプロトコルであるSPDY（ChromeおよびFirefoxでサポート））を調べることもできます。
ステップ3：コンテンツの配信
ドメインから提供される個別のアイテムは約30あります。まず、このリクエスト数を減らす方法を検討してください。ページビューあたり30のHTTPリクエストはたくさんあります。次の方法を使用してこれと戦うことができます。
1）複数のホスト名にわたる並列ダウンロード。ブラウザは現在、単一ドメインへの同時接続の数を制限しています。別のドメイン（たとえば、img.bigtim.ca）から画像を提供すると、他のコンテンツと並行して画像を提供できます。
2）複数のアイテムを1つに結合します。ダウンロードされるアイテムの多くは、ロゴやメニュー要素などの純粋なスタイルのコンテンツです。これらは1つの画像に結合して（1回だけダウンロード）、CSSを使用して分割できます。これはCSSスピリットと呼ばれます。 Stack Overflowはこれを行います： ここを見てください 。
3）ダウンロードが必要なアイテムの量を減らすことができない場合は、Cookieのないドメインから静的コンテンツを提供することで、サーバー（ひいてはクライアントのブラウザー）の負荷を減らすことができます。 Stack Overflowは、画像、スタイルシート、スクリプトなどのすべての静的コンテンツでこれを行います。
ステップ4：独自のコードを最適化する
HTTPとブラウザ技術があなたのウェブサイトの速度を助けるためにできることはたくさんあります。この最後のステップはあなた次第です。
1）jqueryを自分でホストすることを選択した理由はありますか？ Jqueryのダウンロードページには、キャッシュされたスクリプトを迅速にダウンロードするためにポイントできる複数のCDNが表示されます。
2）現在、スタイルシート内には20を超える未使用のCSSルールがあります（これは、CSSファイル全体の36％です）。本当に必要なものを再考してください。
3）JavaScriptのメインチャンク（bodyタグの上部）は、処理を高速化するためのハックのようですが、おそらく何の役にも立ちません。
ページがまだフェードインしているかどうかを指定するためにCookieが設定されています。 JavaScriptを使用して、CSSで問題なく実行できる遷移を実行しているだけでなく、スクリプトの半分以上を使用して、Cookieの読み取りと書き込みの機能を定義しています。
$("body").css ("background-image", "url('images/background.png')");と$("#website").show ();は通常、「関心の分離」について怒鳴りますが、この回答は十分に長いので、混合するのは悪い習慣であることがわかるといいのですが。同じコード内のスタイルと機能。
補遺：コードを見ると、実行していることを実行するためにjqueryはまったく必要ありません。ただし、繰り返しになりますが、実行していることを実行する必要はないため、JavaScriptをまったく使用しなくても実行できる可能性があります。
Bodyタグを閉じる直前に、JavaScriptをhtmlの最後に移動します。時々それは役に立ちます。
CSSはレンダリングをブロックしています。 CSSを2つの部分に分割します-
- 重要なCSS
- 重要でないCSS
クリティカルCSSをページでロードします。ヘッドタグ内に埋め込まれている必要があります。 ajaxを介して重要ではないCSSの遅延読み込みを行います。
これにより、Webページのパフォーマンスが大幅に最適化され、ホワイトスクリーンの時間が短縮されます。
また、非同期/遅延方式でJavascriptをロードすることを検討できます。
私はこれが古いスレッドであることを知っていますが、これが私が試したハックです。 CSSが完全にロードされている間は何も表示しないという考え方です。
htmlファイル：
<body style="display:none">
cSSの最後の行：
body{display:block !important}