JavaScriptはWEB制作・WEB開発共に非常に多く使われている言語です。その中で「処理の実行順」というのは非常に重要です。ほんのわずかな実行順序の違いでエラーを引き起こすのがJavaScriptの難しいところです。
私自身がJavaScriptを使用した制作や開発において、他の処理よりも早く実行したいときに、window.onloadで実行なのか、$(document).readyで実行なのか、言語構造や仕組みを理解しないまま処理を書いていることが多かったので、整理を兼ねて記事にしました。今回はload系のイベントを処理速度比較を踏まえて解説しています。
処理構造を理解する
JavaScripの前にHTML構造を理解する必要があります。HTMLのコードは基本的に上から下へと読み込まれて解析されます。
JavaScripを記述する場所としては
・headタグ内 : script読み込み => DOMを読み込み => 表示
・bodyタグ内 : DOM読み込み => 表示 => script読み込み
の2箇所ですが、基本的にはbody要素内に記述することが奨励されています。
理由としては実行順序が関係しており、body要素内にscriptを記述した場合は先にDOMが描画されるので表示速度は早く表示されます。
一方で<head>内に書いた場合は、scriptなどの読み込みが完了してからDOMが読み込まれる関係で、表示速度が遅くなる傾向にあります。
基本的にWEBサイトを構築する際には、運用の過程でページ数も当然増える前提で作成する必要があるので、記述の増えるJavaScripなどをheadで読み込むと、表示速度に影響します。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
load系のイベントの処理速度比較
window.onload = function(){}
HTML = DOM並びに、画像などのリソースが全て読み込まれたタイミングで処理を実行します。注意点としては複数のonloadイベントを記述した場合は上書きが発生し、最後に書いたイベントだけが実行されてしまうので、注意が必要です。
window.onloadは関数を代入するという特性があるので、最後に代入された関数が上書きされて実行される仕組みになっています。とは言ってもチーム開発などで複数人で実装を行う場合には複数のonloadが派生することもあります。これらを回避する記述としてはaddEventListenerを使用します。
window.addEventListener(‘load’, function(){})と記述することで、複数のonloadイベントを実行させることができます。
$(document).ready(function() {})
jQueryを使用したloadイベントで、画像などを除いてHTML = DOMの読み込みが完了したタイミングで処理を実行する記述です。JavaScriptでは、特にDOM操作系の処理を記述する場合、HTMLが正しく読み込まれていないとエラーになるケースが多々あるので$(document).readyの後に実行する処理を書きます。
window.onload との違いは、画像も含めて全て読み込みが完了したタイミングかそうでないかの違いです。ページの中に大量の画像や動画などのコンテンツが含まれている場合、$(document).ready(function() {})を使用して処理速度を考慮することが適切です。
document.addEventListener(‘DOMContentLoaded’, () => {});
上記でwindow.onloadは画像などのリソースを読み込む性質上、処理速度に問題があると解説しましたが、こちらの記述をすることで$(document).ready(function() {})と同じタイミングで処理を実行することができます。
画像などのリソースの読み込みに依存しないDOM操作の場合は、基本的にDOMの読み込み完了のタイミングが適切かと思いますが、使用する記述についてはサイトのコンテンツの量などを踏まえて適切に選択できるようにしましょう。
【参考サイト・ドキュメント】
window.onload
$(document).ready
document.addEventListener(‘DOMContentLoaded’
https://developer.mozilla.org/ja/docs/Web/API/Document/DOMContentLoaded_event
