scriptタグのasync属性はスクリプトはhead内で完結したい派の自分にはありがたい限りの機能でした。

scriptはレンダリングの後方で処理した方がよいという事でbodyの最後で読み込んだり記述したりするという方法がありましたが、自分は見難いのが嫌いなので、頑なにheadタグ内に記述してきました。

html5ではscriptタグにasync属性を付けることでレンダリングと非同期に読み込むことができるそうです。
これを使うことで後方にスクリプトを記述する必要も無視して良さそうな感じに思えました。

とりあえず、すぐに使用するもの以外（イベント発火等の後で使用するもの）には基本asyncを付けておけば良さそうです。(コメント指摘により追記: 依存性のあるスクリプトやイベント時に読み込まれていない可能性のあるスクリプトはasyncは使うべきではないということです。)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SAMPLE</title>
<head>
<script src="moment.min.js" async></script>
<script src="underscore-min.js" async></script>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function(){
    var now = moment();
    console.log(now.toDate());
    console.log(_.min([10, 5, 100, 2, 1000]));
});
</script>
</head>
<body>
<div>BODY</div>
</body>
</html>

jqueryはすぐに使用するのでasyncを付けてしまうと

Uncaught ReferenceError: $ is not defined

となります。

defer属性はDOMContentLoadedの直前に読み込まれるという事でした。