async属性とは
HTMLのscriptタグにasync属性を付けると非同期で読み込むことができる。
非同期で読み込むことができるということはDOM構築をブロックさせないため通常よりも速く読み込むことができるというメリットがある。
そのため単純に「async属性を付ければJavaScriptを速く読み込めるんだ!」と、既存のコードにasync属性を深く考えずに追加してしまうWebサイトがたまにある。
DOMContentLoadedが動作しない
結論から言うとasync属性で読み込んだJavaScriptはDOMContentLoadedが動作しないためコード内にDOMContentLoadedが使用される場合はasync属性を使ってはいけない。(loadイベントも同様)
// <script src="main.js" async></script> document.addEventListener('DOMContentLoaded', function() { document.getElementById('r').textContent = 'DOMContentLoaded'; });
jQueryの$(function()は動作する
jQueryの$(function(){や$(document).ready(function(){の場合はasync属性が付いていてDOMContentLoadedが失敗してもページの読み込みが完了したらスクリプトが実行されるようになっているため問題ない。
// <script src="main2.js" async></script> $(function() { $('#r').text('jQuery Loaded'); });