Javascript windows.onloadが超遅い

プログラム

こんにちは。
今回は、Javascriptのプログラム作成で、動作が非常に遅かった原因とその対処法について、シェアしたいと思います。

スポンサーリンク

Javascriptのプログラムの動作が遅い!!

ホームページに当日の日付を表示するプログラムを作成していました。

仕組み的には、ページを開くと、Javascriptの日付を表示するプログラムが起動し、ページに日付が表示されます。

ローカル環境で、問題なく動作したので、サーバーにアップしてテストしてみると、日付は表示されるのですが、表示されるまで数秒かかりました

あまりにも遅いので、使い物にならないレベルでした。

プログラムが遅い理由、 windows.onload

ページを開いた時に、プログラムを起動させるトリガーとして、windows.onloadを使用していました。

window.onload = function () {
    // プログラム内容;
}

このwindows.onloadが遅い原因でした。

windows.onloadはページすべてが読み込まれてから実行される関数になります。

今回サーバーにあげた環境のホームページは、WordPressで作成しています。ページ内には、他のプログラムも含まおり、それらのプログラムが終了してから、自分のプログラムが実行されるので遅くなるのです。

ローカル環境では、必要なコードしかないので、動作が速いわけです。

対処法

windows.onloadを使用する代わりに、document.addEventListener(“DOMContentLoaded”, function(event){});を使用します。

document.addEventListener("DOMContentLoaded", function(event) { 
//プログラム内容
});

DOMContentLoaded イベントは、 HTML の初期文書が完全に読み込まれ解釈された時点で発生し、スタイルシート、画像、サブフレームの読み込みが完了するのを待ちません

(MDN Web Docsからの引用)

上記のようにページの読み込み完了まで待たないので、ページが表示と共にプログラムがすぐに起動することが出来ます。

まとめ

いかがだったでしょうか。

実際に関数を変えてみると、ローカル環境とほぼ同じように速く動作します。

今回、「document.addEventListener(“DOMContentLoaded”, function(event){});」を使用して動作が速くなった訳ですが、ホームページ内の他のプログラムの起動にも時間がかかっているということも分かったので、今後対処していきたいと思います。

役に立った!」と思れましたら、下のSNSボタンで記事のシェアをしていただけると嬉しいです!

JavaScript コードレシピ集
技術評論社
JavaScriptによるWeb開発のための、究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで余すところなく集めました。基本文法/文字や数値の取り扱い/データの取り扱い/ブラウザーの操作/ユーザーアクション/HTML要素の操作/アニメーション/画像、音声、動画/スマートフォンのセンサーなど、目的別にレシピを整理

コメント

タイトルとURLをコピーしました