ページをレンダリングする前に、すべての css が計算されるまでブラウザを強制的に待機させたいと思います。
私の目標は、レンダリングされたプレーンな html とレンダリングされた css の間の「視覚的な不具合」効果 (ここで言及) を回避することです。私の目標は、ブラウザーでこのレベルの制御を取得できるかどうか、およびその方法を簡単に理解することでもあります。
これは可能ですか?
ページをレンダリングする前に、すべての css が計算されるまでブラウザを強制的に待機させたいと思います。
私の目標は、レンダリングされたプレーンな html とレンダリングされた css の間の「視覚的な不具合」効果 (ここで言及) を回避することです。私の目標は、ブラウザーでこのレベルの制御を取得できるかどうか、およびその方法を簡単に理解することでもあります。
これは可能ですか?
あなたが言うように「グリッチ」を回避するという標準的な意味でできることは何もないと思います。おそらく、特定の方法でファイルを提供できるソフトウェアがそこにあるかもしれませんが、それが可能であったとしても、それはどれほどやり過ぎでしょうか?!
最近のほとんどのブラウザーは、HTML と CSS を非常に高速にロードするので、気にすることさえありません。
グリッチの問題が発生している場合は、実際には CSS 自体ではなく、その後ページにダウンロードされるアセットに関連している可能性があります。
画像、スクリプト、さらには Web フォントなどのアセットを考えてみてください。これらもロードする必要があります。ページ デザインが何らかの方法でレイアウトを実現するためにこれらのアセットに依存している場合、ロードする必要があるため、もちろんわずかなグリッチ効果があります。
これはプロセスの「クライアント」側で行われるため、CSS がいつ読み込まれたかを計算することはほとんど不可能だと思います。人々のブラウザとインターネットの速度を、準備ができたときに提供できるレベルまで予測することはできません。
フォント レンダリング (ジャンピング) の不具合が発生している場合は、次の記事を参照してください: http://paulirish.com/2009/fighting-the-font-face-fout/
これに関係ない場合は、ページの構成方法を再考することを強くお勧めします.
これが何らかの形で役立つことを願っています。
最良のアドバイスは、CSS ファイルをページの head にロードし、JS をページを閉じる直前にロードすることです。
すでにこれを行っている場合は、開発者ツール (Chrome) の [ネットワーク] タブを見て、ネットワークが CSS ファイルの配信を遅らせていないかどうかを確認してください。