DOMContentLoadedとWebの最適化

パフォーマンス改善の一環として、DOMContentLoadedを確認することがあります。 このイベントは、DOMの解析を終了意した時点で発火するイベントで、 取得したHTMLの構文解析を行い、タグなどを識別しDOMツリーを構成した時点で発火します。

ここで注意点としてscriptとstylesheetがあるとHTMLのパースを一度やめてしまうことがあることが挙げられます。

例えばscriptは、document.writeでHTMLを上書きしてしまいパースした意味がなくなってしまい、再度構築し直さなければいけないかもしれません。そして同じようにstylesheetもHTMLパースを間接的に止めてしまいます。 これはstylesheetがscriptをブロックしてしまうことに起因します。

よく、asyncでscriptとstylesheetを読み込むようにすることがWebの最適化の手段として用いられているは上のような理由があるからです。

参考ページ