deferでライブラリを読み込みんだ後インラインのJSを実行する方法について

背景

ライブラリをdeferで読み込み、インラインでそのライブラリに依存したJSを実行していたためエラーが出ていたのですが、以下の方法で解決しました。

HTML
1<div id="hoge">Hoge!</div>
2<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" defer></script>
3<script>
4    document.addEventListener('DOMContentLoaded', function() {
5        console.log($('#hoge'));
6    });
7</script>

以下の記事とやっていることは同じです。
https://sakura.monte-verita.biz/3981

モヤモヤしていること

deferはもともとパフォーマンス向上のためにつけていたのですが、解決策を探している中で上記のように実行している記事が少なかったので、上記のようなやり方はあまり好ましくないのかと思い始めてきました。
上記のやり方は好ましくない実装でしょうか？Yesの場合その理由も教えていただけると助かります。

動いてるのに何が問題なの？というツッコミを受けそうですが、知識が浅く実装方法として好ましいのか判断できないため、ご質問させていただきました。
よろしくお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

上記のやり方は好ましくない実装でしょうか？Yesの場合その理由も教えていただけると助かります。

そうですね、好ましくはありません。
基本的にはHTMLとJavaScriptは別ファイルで管理するべきですので、
外部ファイル化して全てdeferで呼び出すようにしなさいというのがベストプラクティスです。

知識が浅く実装方法として好ましいのか判断できないため、ご質問させていただきました。

どうしてもインラインでコードを書かなければならないケースならばこれが最善です。
どこにそんな場面があるのかと突っ込みたいところですが、レガシーな現場だとなんだかんだでありそうですからね……

HTML5の仕様に準拠したブラウザを作ろうと頑張っているMozilla(MDN)が**「deferはDOMContentLoadedが発生する前に実行される」**と言ってるわけで、そんじょそこらの憶測で書いてあるブログ記事とは信憑性が段違いです。

不具合が出たら即死人が出るようなクリティカルな箇所でないならば、
基本的にMDNに従って書いて、「全然違うじゃん！」と怒られが発生してから正式な文献漁るくらいで良いと思いますよ。

投稿2018/12/18 02:50

miyabi-sun

総合スコア21158

退会済みユーザー

2018/12/19 17:27

大変参考になりました。ありがとうございます！

行動規範の内容に同意します

パフォーマンスと使いやすさを天秤にかけて、どちらが自分にとって良いかということになるかと思います。

インラインの箇所が少なければそれでも良いですが、今後、インラインで$(function(){})を多用したいという事が出てきたりした場合は、deferの使用を諦める必要が出てくるのかと思います。

代わりの対策としては、「//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js」の圧縮版を使ってなるべくjqueryの読み込み時間を短縮させるとか、
よりサイズの小さいjQuery３系を使うとか、jquery3系はAjaxなど一部の機能を削った軽量版のSlimビルドがあります。
あとは、javascriptの記載箇所をなるべく下の方に</body>の直前にまとめて、読み込むタイミングを遅らせるとかあるかとは思います。

投稿2018/12/17 23:50

編集2018/12/17 23:55