Web開発者の日常

主にプログラミング関連。たまに日常も綴ります。

script要素についての覚え書き(async, defer)

time 2011/05/10

ライブラリに頼らないピュアなJavaScriptでDOM弄ろうと思って、参考にしたGoogle Analyticsを埋め込むコードの6~8行目。

    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

scriptエレメントを作成して、type, async, srcプロパティを追加していますが、7行目のhttpsかhttpかを判別するところが簡潔でいいですね!

というのは置いておくとして、asyncってなんだろう… と思ったのでググッた結果↓

HTML5のscript要素でasync, deferを使ってパフォーマンスアップ

JavaScriptを非同期で実行したり、ページのロード後に実行して、ページの描画速度向上が見込めるようです。

ただ、jQueryなどのプラグインを使っていて、参照されるコードよりも先に読み込んで実行しなければいけない場合、jQueryの読み込みにはasync, deferが使えず、jQueryを使って書かれているコードには使うことができるが、あまり効果が無かった。

パフォーマンスの違いがこちらのページで検証されています。

scriptのdefer/asyncを理解し、ページの高速化方法を探る

Scriptは</body>の直前で読み込み、async, deferを使って、ページの描画をブロックしないようにすると幸せになれる …φ(`・ω・´)メモメモ

sponsored link

ブックマーク



アーカイブ

2017年3月
« 5月    
 12345
6789101112
13141516171819
20212223242526
2728293031