スポンサードリンク

【ajax】非同期通信をフル活用して処理時間を短縮できた話

公開日:
更新日:
カテゴリー: Ajax

ajaxを使うとページの遷移をすることなく別ページ(例えばPHPの処理ページ)に閲覧者が気づかない裏側でHTTPリクエストを行い、その結果を取得してページにコンテンツを表示させることができます。

また非同期通信なので他のajax送信の結果を待たずに別のajax送信で同じページに処理を投げることも可能です。

この便利な機能を今回フル活用できたので、方法(というか考え方)をメモしておこうと思います。

スポンサードリンク

これまでの方法

これまでajax送信でPHP処理ページ「hoge.php」に3つのデータを渡し、その3つのデータを一つずつ処理していました(3回ループ処理していた)。イメージは以下。

ajax送信で「hoge.php」に3つのデータを送信

データを受け取った「hoge.php」は処理を開始(ここを3回繰り返す)

処理結果を呼び出し元に返す

ページに結果を出力

至って普通の処理ですが、今回のプログラムは上の赤文字部分の処理時間が長く、それを3回繰り返すのでけっこうな待ち時間が発生していました。

「どうにかしたいなー」と思っていたのですが、ふと「こういうときにajaxの非同期通信をフル活用すべきだ!」と考え、次のようにしました。

3回のajax送信を同時に行う

これまでajaxは非同期通信であることは知っていたのですが、特にその恩恵を受けることを考えることなく使っていました。

しかし「1回のajax送信で3つのデータを送信するのではなく、3回のajax送信を同時に行ったらいいじゃん。非同期通信だし」と思いつき、次のような方法にしました。

「ajax送信A」「ajax送信B」「ajax送信C」でそれぞれ「hoge.php」にデータを送信

データを受け取った「hoge.php」は処理開始(1回で済む)

処理結果をそれぞれの呼び出し元に返す

ページに結果を出力

これだとわかりづらかったので、ajax送信の部分を記載。

これまでのajax送信部分

jQuery(function($){
	//ajax送信
	$.ajax({
		url : "http://ysklog.net/hoge.php",
		type : "POST",
 		data : {data_1:"AAA", data_2:"BBB", data_3:"CCC"},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			console.log("ajax通信に失敗しました");
		},
		success : function(response) {
			console.log("ajax通信に成功しました");
		}
	});
});

6行目にあるように、1回のajax送信で3つのデータを送信していました。

変更したajax送信部分

これを下にあるように、3つのajax送信で1つずつデータを送信する方法に変更しました。

jQuery(function($){
	//ajax送信A
	$.ajax({
		url : "http://ysklog.net/hoge.php",
		type : "POST",
 		data : {data_1:"AAA"},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			console.log("ajax通信に失敗しましたA");
		},
		success : function(response) {
			console.log("ajax通信に成功しましたA");
		}
	});
	//ajax送信B
	$.ajax({
		url : "http://ysklog.net/hoge.php",
		type : "POST",
 		data : {data_2:"BBB"},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			console.log("ajax通信に失敗しましたB");
		},
		success : function(response) {
			console.log("ajax通信に成功しましたB");
		}
	});
	//ajax送信C
	$.ajax({
		url : "http://ysklog.net/hoge.php",
		type : "POST",
 		data : {data_3:"CCC"},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			console.log("ajax通信に失敗しましたC");
		},
		success : function(response) {
			console.log("ajax通信に成功しましたC");
		}
	});
});

どのくらい早くなったのか?

 数回しか測っていませんが、平均26秒くらいかかっていた処理時間が平均11秒に短縮されました。

単純に3分の1にはならなかったですが、まずまずの結果といったところです。

おそらく多くの処理時間がかかるものにはかなりの時間短縮が見込めるのではないかと思います。

まとめ

結局PHP側からすると3回の処理を行っていますが、順番に3回処理するのではなくajaxの非同期通信を利用して一度に3回分の処理をさせているため処理時間が短縮されました。

今まで『非同期通信』の特性を考慮することなく実装していましたが、今後は意識して実装できるところには実装していきたいと思います。

自分の中ではけっこう大きな発見だったので、「そんなの常識でしょ」「今更知ったのかよ」というツッコミはなしでお願いします!

コメント

まだコメントはありません。

コメントフォーム
お名前
コメント