Firefox3のレンダリングとCSSの関係

使用しながらうすうす勘付いてはいたのですが、Firefox3のウェブページのレンダリング（描画）は、Firefox2と微妙に異なるようです。
レンダリングやCSSについての設定は、「about:config」による変更も行っていないはずなので、これはデフォルトの差異と思います。

描画タイミング

Firefox2では、HTMLファイルが読み込まれると、このHTML内で指定されたCSSがサーバにリクエストされ、レスポンスでCSSが返され、これの解析が終わった段階で、ページの描画が行われていたように思います。内部的なことはわからないので、あくまでも「感じ」ですが。もちろんその後、JavaScriptなどによってHTMLやCSSの内容が変化すると再描画が行われます。

しかしFirefox3では、より早い段階でHTMLに対してCSSが適用されているようです。ページにもよりますが、レンダリングがページの上から下へ、順次行われていくような感じもあります。

LINK要素の扱いの変化

FirebugのHTMLパネルで見るかぎり、Firefox2ではBODY要素内に記述したLINK要素（外部CSSファイルの関連づけ）も、メモリーに読み込まれたHTML（DOM）上では、自動的にHEAD要素内に移動していましたが、Firefox3ではこれがBODY要素の中、HTMLソースコードに記述したとおりの位置にあります。

BODY要素内CSSに基づく描画のタイミング

より重要なことと思われるのですが、従来、こうしたBODY要素内にLINK要素を記述してCSSを関連付けた場合、ページ中LINK要素の位置でいったんレンダリングが停止され［追記：このような一時停止・再開を行うのはIEでした。Fxでは以前からブロックはしません］、CSSファイルのリクエスト発信、レスポンス受信、解析、レンダリングの再開、という動作が行われていました。

この点は、
Webサイトの高速化 フロントエンドのパフォーマンスの重要性 (Yahoo! developer netoworkより翻訳)
──などで指摘されていますし、実際自身の経験でもこの現象を見ることがありました。

しかしFirefox3では［追記：上述のわけでFx2でもそうでした］、前述のとおりレンダリング作業の開始のタイミングが早く、しかもBODY内に記述したLINK要素による外部CSSファイルの受信を待たずに、この要素より下の部分のレンダリングを行ってしまうようです。結果として、整形されていない生のHTML──ブラウザによって最低限のスタイルが適用されたHTML──が一瞬ですがもろに見えてしまう、という問題が発生します［追記：それはFx２でもおきたのですが、要するにレンダリングのタイミングが早まった？のとスピードの向上とにともない、よりハッキリと目に見えるようになった、ということのようです］。
これはXHTML＋CSSでページを作っているものにとっては、ゾッとする瞬間です。見てほしくないもの、今は見せたくないもの、そのような形では見てほしくないものが、すっかり見えてしまいます。

Firefox2までの、レンダリングの中断ですら、ちょっとマズいものでしたが、今度は「ちょっと」ではすみません。
私の場合は、某NGOで使用しているCMSの都合、以前は上記のようにBODY要素内にLINK要素を記述し、CSSを呼び出す、ということをしていました。
その後、レンダリングの中断への対策として、XOOPSを管理・保守していらっしゃるリモートのボランティアの方にお願いして、本来ならばBODY要素内に出力されてしまうLINK要素を、自動で検出、HEAD要素内に移動するようハックをしてもらいました。
対策をとっていなかったらどうなっていたか…。