「html」タグアーカイブ

appendChild()ではなくinsertBefore()を使ってスクリプトをロードするのはなぜ？

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

Chromeの開発者ツールを開くとコンソールに何か出てるな。というのは気になってたんだけど、スルーしてたらこんな投稿があることを教えてもらった。
「遅い通信だとChromeはdocument.writeで外部のスクリプトを読み込んでも動かなくなるらしい(A Parser-blocking, cross-origin script …)」

async属性がついているとはいえ、重複したscriptは少ない方がパフォーマンスは良いでしょうと思い調べてみた。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

の部分は一つでOKということなので、ページ最下部に一つだけにしてみた。
今のところ問題なさそうです。

HTML5の仕様らしいんですが、知らなくてハマりました…

<div id="tweets">
 <script>
   if (typeof(tweets) != 'undefined'){
     document.write(tweets);
   }
  </script>
</div>

というのがあったとして、”何も出力されない”ことを期待していたんだけど、

[object HTMLDivElement]

が、出力されます。