ページの読み込み速度を最適化するために、Google はスタイルとスクリプトの順序を最初に CSS、次に JavaScript にすることを推奨しています。
これが良い習慣であることを理解しています。
ただし、ドキュメントでは、「JS コードが CSS ファイルに依存していない場合は、CSS ファイルを JS ファイルの前に移動できます。JS コードが外部ファイルに含まれる CSS に依存している場合、スタイルなどJS コードでドキュメントに書き込んでいる出力に必要です — これは不可能です。」
後者の具体例を思いつくことはできません。
この「JSコードでドキュメントに書き込んでいる出力に必要なスタイル」の良い例は何ですか?
ドキュメントはこちら
編集:私の意図は、CSS ファイルの前に JavaScript を絶対に配置する必要がある場合を見つけることです。
簡単な例としては、JavaScript が CSS によってスタイル設定された特定の HTML 要素の寸法を必要とする場合があります。
その場合、スタイルシートの CSS を要素に適用してから、 を介してその寸法を読み取る必要がありますgetComputedStyle()。
ここでの例は、ボディがレンダリングされた後、ヘッダーの幅がボディの幅に応じて設定される、柔軟な幅のテーブルのスティッキー テーブル ヘッダーを定義することです。
このようなものを持っていると思いますか？
$("#someDiv").addClass("my_css_transition");
一般に、JavaScript で直接スタイル プロパティを設定するのではなく、add/removeClass を使用して CSS を介して JavaScript ですべてのスタイル変更を行うことをお勧めします。これにより、JavaScript が CSS に依存するようになります。CSS は、たとえば、fadeIn や slideIn などのトランジションを定義できます。ページの読み込み時にこれらを起動する必要がある場合は、JavaScript がクラスを追加する前に CSS を読み込む必要があります。
これは Google からの適切なアドバイスですが、これは非常に高度な内容であることを理解しておいてください。ありふれた CMS または Wordpress サイトを使用している場合、これについて心配する必要はありません。Google、Yahoo、または Facebook の場合は、そうです、心配する必要があります。