Google Analyticsのコードが使っているような、サードパーティのスクリプトを非同期にロードする方法を「createElement-insertBeforeパターン」と言うことくらいは知っていました。けど、ふと「なんでappendChildじゃ駄目なんだ？」と思って調べたのでメモ。

参考: appendChild vs insertBefore

サードパーティーのスクリプトを、レンダリングをブロックさせないように非同期に読み込むという目的から汎用性を突き詰めたハック。という感じですかね。
スティーブ・サウダーズさんも「エレガント」と言っていますが、機能的でシンプルで美しいですね。

appendChild()の弱点

appendChild()を使う場合、要素を追加する時に親にしたい要素を指定する必要があるので、最悪の場合親にしたい要素が存在しない事を考えてコードを書かないといけません。イレギュラーケースのためにコードが肥大化するのはできるだけ避けたいですよね。

insertBefore()を使ったハック

しかし、insertBefore()を使う場合は、要素の追加先に”最初のscript要素”を指定しておけば、少なくとも自分自身のscript要素は必ずあるよね。というわけですね。