script要素のdefer属性とasync属性による非同期読み込みについて
早速一日空いてしまった。
今日読んだ記事。
script要素はbody要素の閉じタグの直前に記述するのがセオリーだけど、なぜかというとscript要素内にdocument.write()メソッドがあるとDOMツリーに影響を与えてしまう。そのため、script要素があるとHTMLのパースを中断してscript要素を先に読み込む。これがパフォーマンス的によろしくないので、body要素の閉じタグ前に記述してパースを中断させないようにしよう、という話。
ここで、script要素にdefer属性、async属性を記述するとパースの中断がなくなる（その代わり、そのscript要素内のdocument.write()メソッドが無視されるようになる）。
defer属性の場合、読み込みが非同期になりHTMLパースの終了後にdefer属性が付与されている順番に実行される。async属性の場合、読み込みが非同期になり、ランダムな順番で実行される。タイミングの詳細については下記の記事参照。ぶっちゃけ完全には理解できてない…
以上が自分の理解できている範囲なんだけど、実際の用途としてはあまり思い浮かんでない。bodyタグの閉じタグ前に書くよりheadタグ内に書いたほうが見た目がよろしいから、defer属性を付与してscript要素はheadタグ内にまとめるとか？実際にどの程度パフォーマンスが向上するかはやってみないとわからないし、そもそも開発者ツールでのパフォーマンスの計測ってやったことなかった…
