こんにちは。
今回は、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ボタンで記事のシェアをしていただけると嬉しいです！
コメント