JavaScriptの実行速度が遅い

現在JavaScriptからXMLHttpRequesを利用してCSVデータの読み込みを行っています。

ただ、この処理をOnLoad時に行っているため、ブラウザを立ち上げるとパソコンによっては10秒程度フリーズしてしまいます。

しかし、できればOnLoad時に読み込みたいので、なんらかの方法で実行速度を解決できないでしょうか？

各種条件や環境
・パソコンのスペック
　　CPU Core2duo E8400 メモリ 2GB グラフィックス オンボード
・読み込むデータ
　　縦2000ｘ横6のCSVデータ。
　　１つ１つのデータは日本語が保存されていて10文字～30文字程度
　　保存形式はUTF-8
・使用ブラウザ
InternetExplorer8(他のブラウザに変えることはできません)
・データを読み込んだ時のInternetExplorer8の状況(タスクマネージャーより)
（読み込み前メモリ使用量) 7,400K→(読み込み後メモリ使用量) 40,000K
(読み込み前CPU使用率) 0% →(読み込み中CPU使用率) 50% → (読み込み後CPU使用率)0%


・書いたコード

var data = [];

function CsvRead(){

//ファイルパスの取得
var FP = './testData.csv';
//空文字は許さない
if(FP == ""){
alert("ファイルパスを入力してください");
return;
}
//XMLHttpRequestオブジェクト参照変数
var Xhr;
if(window.ActiveXObject){
//IEの場合
try{
Xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
Xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else{
//IE以外のブラウザの場合
Xhr = new XMLHttpRequest();
}
//外部ファイルを同期で読み込む
try{
Xhr.open("GET", FP, false);
Xhr.send(null);
}
catch(e){
//ファイルの読込に失敗
alert(e.message);
return;
}
//テキスト要素の生成
XhrText = document.createElement('text');
//行ごとのデータを取得する(CRで分割)
var rowData =zxsa Xhr.responseText.split(String.fromCharCode(13));
//要素の取り出し
for(i=0;i<data.columnLength;i++){
XhrText.innerHTML = XhrText.innerHTML + "<HR>";
//列データに分解
var ColumnData = rowData[i].split(",");
var locInf = {"address":ColumnData[5],"name":ColumnData[4],"prop1":ColumnData[1],
"prop2":ColumnData[2],"prop3":ColumnData[3],"url":ColumnData[5],
"latlng":"","lat":"","lng":"","distance":"","direction":""};
data.push(locInf);
}
}


以上になります。ご回答お願いします。


　　　

No.3 回答者： wormhole 回答日時： 2011/12/14 20:12

＞しかし、ファイルサイズが170KBなのであまり大きくないと思われます。

推測ではなく実測してみた方がよいのではないでしょうか。

この回答への補足

説明が不足していて申し訳ありません。

作成したプログラムをローカル環境で実行した時と比べて、変化がありませんでしたので
そのように書きました。

ご忠告ありがとうございます。

補足日時：2011/12/14 23:08

No.2 回答者： semisemi 回答日時： 2011/12/14 16:57

ブラウザを別のもっと新しいものに変えれば、JavaScriptのエンジンも改良が加えられているので、根本的に高速化できると思うのですが、IE8のみということになると、難しいかもしれません。

ソースの書き方などを改良すれば多少は速くできるかもしれませんが、小手先の最適化で速くできるのには限界がありますし、劇的な改善は難しいかと思います。


>データは直ぐに使うので出来ればさっさと読み込んでもおきたいです。

とのことですが、どのみち読み込みが完了してCSVを切り分ける処理が終わるまで何もできないなら、
せめてフリーズしたようにならないように非同期にして、処理中である旨を知らせるメッセージか何かを表示させておくのはどうでしょうか？

No.1 回答者： semisemi 回答日時： 2011/12/14 12:38

処理が重いというよりも、CSVファイルをダウンロードしたりするのに時間がかかっているのではないでしょうか。

システム全体の構成がわからないので、何とも言えませんが、
Xhr.open("GET", FP, false);
の部分を、
Xhr.open("GET", FP, true);
にして、Ajaxの通信を非同期にしてみてはどうですか？
とりあえず、ページを開いた時に固まったようになるということはなくなると思いますが、
CSVを処理するのは、バックグラウンドでの読み込みが終わるのを待ってからでないとだめですが。
そういう構成ではまずいですか？

この回答への補足

csvデータですが、ファイルサーバに置いています。
よって、ダウンロードによる遅延あると思います。
しかし、ファイルサイズが170KBなのであまり大きくないと思われます。

データですが、非同期で読み込んでもよいのですが、
データは直ぐに使うので出来ればさっさと読み込んでもおきたいです。

補足日時：2011/12/14 12:50