レンダリングブロックを考慮したリソースの読み込み（JavaScript編） - Qiita

追記 「打倒レンダリングブロック！（JavaScript編）」として公開していましたが、CSS編の記事追加に伴い共通部分を分割し別記事にしました。 はじめに こちらの記事はレンダリングブロックを考慮したリソースの読み込み（レンダリングの基本）の続きです。 前述の記事を読んでおくと、当記事の内容も理解しやすいかもしれません。 それでは早速、レンダリングブロックを意識したJavaScriptの読み込みについて3つに分類して紹介していきます。 推奨パターン アンチパターン ケースバイケース 推奨パターン async・defer属性で読み込み scriptタグに属性がない場合、パースの途中でリソースを見つけるとパース作業を中断しリソースの読み込み・実行を行います。（これがいわゆるレンダリングブロックです。） async・defer属性を付けることで非同期で（HTMLのパース/DOM構築を阻害するこ