JavaScriptで処理速度を向上させるコードの工夫

Question

###実現したいこと

以下の流れでAJAXを使ってHTMLを挿入するのですが、この速度を向上させたいと考えています。
###HTML挿入の流れ
HTML挿入の流れはこうです。

記事一覧にはタイトルとサムネイルが表示されており、それをクリックします。

そのとき通信はせず、まず先にタイトルとサムネイルを表示します。さらにそれ以外の部分の外郭HTMLも表示し、「読み込み中」とします。

そしてAJAXでその他のデータを取得し、できたらその中身を挿入する。という流れです。

###速度の問題
AJAXの前にすでにあるデータを表示したり、外郭のHTMLを表示したりするというのは体感速度を上げる狙いです。

しかしHTMLの挿入速度に問題があります。

上図のように「外郭を先に表示し、データは後で挿入」でなく、「AJAXでの取得が終わったそのときに、データが挿入されたHTMLを表示」とした方が、処理が早いようなのです。

その計測が次のソースコードになります。

###該当のソースコード
ご覧のように「keisoku_1();」と「keisoku_2();」で計測しました。

「keisoku_1();」の方は上図のように「外郭を先に表示し、データは後で挿入」という方法です。

「keisoku_2();」の方は「AJAXでの取得が終わったそのときに、データが挿入されたHTMLを表示」という方法です。

それぞれ実行すると分かるとおり、「keisoku_2();」の方が圧倒的に速いのです。

/*
keisoku_1();
外郭のHTMLを取得し、後からデータを入れる方法を計測
----------------------------------------------*/
// 計測を実行
keisoku_1();
function keisoku_1(){

	var time_before = new Date().getTime();

	var lis = '';
	for ( var i = 0;  i < 1000;  i++ ) {
		var data = { num:i, ttl:'hello_'+i };
		var html = get_outline_html( i );
		var html = update_outline_html( html, data );
		lis += html;
	}
	$( 'body' ).html( lis );

	var time_after = new Date().getTime();
	console.log( 'keisoku_1() = ' + parseInt(time_after - time_before) );
}

// 外郭のHTMLを取得
function get_outline_html( i ){
	return `
	<div class="box num${i}">
	<p class="ttl"></p>
	<p class="num"></p>
	</div>`;
}

// 後からデータを入れる
function update_outline_html( html, data ){
	var $html = $( html )
	.find( '.ttl' ).text( data.ttl )
	.find( '.num' ).text( data.num ); 
	return $html[0];
}


/*
keisoku_2();
データを入れたHTMLを取得する方法を計測
----------------------------------------------*/
// 計測を実行
keisoku_2();
function keisoku_2(){

	var time_before = new Date().getTime();

	var lis = '';
	for ( var i = 0;  i < 1000;  i++ ) {
		var data = { num:i, ttl:'hello_'+i };
		var html = get_all_html( i, data );
		lis += html;
	}
	$( 'body' ).html( lis );

	var time_after = new Date().getTime();
	console.log( 'keisoku_2() = ' + parseInt(time_after - time_before) );
}

// データを入れたHTMLを取得
function get_all_html( i, data ){
	return `
	<div class="box num${i}">
	<p class="ttl">${data.ttl}</p>
	<p class="num">${data.num}</p>
	</div>`;
}

###質問
そこで質問ですが、上述した「HTML挿入の流れ」はそのままで、もう一歩速度を向上させられるようなソースコードの工夫などございましたらご教授頂けますでしょうか。

当方JavaScript初心者のため上のソースコードにおかしな点などあるやもしれませんので、もし意図が伝わりにくい等の不備がございましたらどうぞご指摘ください。

以上です。何卒、宜しくお願い申し上げます。

###改善の追記
maisumakun様のアドバイスを受けまして、以下「keisoku_3();」です。
【改善1】として「.clone()」を使い、【改善2】としてクラス付与を変更致しました。

ですが「$html」が取得できないようで、要素の挿入がされない状況になってしまいました。
困ったことにエラーも出ておらず、悪いところがわかりません。

お気づきの点ございましたらご指摘いただければと思い、ここに追記させて頂きました。

/*
keisoku_3();
maisumakun様のアドバイスを受けて
----------------------------------------------*/
// 計測を実行
keisoku_3();
function keisoku_3(){

	var time_before = new Date().getTime();

	var $html;
	for ( var i = 0;  i < 3;  i++ ) {
		var data = { num:i, ttl:'hello_'+i };

		if ( i == 0 ){
			// 【改善1】1回目だけjQeury化する
			var html = get_outline_html( '' ); // 【改善2】iを渡してクラス付与しない
			var $html = $( html )
			.find( '.ttl' ).text( data.ttl )
			.find( '.num' ).text( data.num )   
			.find( '.box' ).addClass( 'num'+i ); // 【改善2】ここでクラス付与する
		}else{
			// 【改善1】2回目以降は.clone()する
			var $html = $html.clone();
			$html
			.find( '.ttl' ).text( data.ttl )
			.find( '.num' ).text( data.num )
			.find( '.box' ).addClass( 'num'+i );
		}
		$( 'body' ).html( $html[0] ); // $html が取得できていない様子
	}

	var time_after = new Date().getTime();
	console.log( 'keisoku_3() = ' + parseInt(time_after - time_before) );
}

Comments

[m.ts10806]

念のため、計測結果をご提示ください

[thyda.eiqau]

質問の本質とは関係ないですが、処理時間の計測をしたい場合は console.time が便利です
https://developer.mozilla.org/ja/docs/Web/API/Console/time

[x_x]

Ajax による通信が一番遅いと思うのですが、コードではそんなことは関係なしにデータを受け取った後にいかに早く表示するかということしかないように見えます。そういう質問なのでしょうか？

[risu]

大変失礼致しました。こちらのコメント欄に今気づきました。

>m.ts10806さん、thyda.eiqauさん
ご指摘ありがとうございます。

>x_xさん
はい、質問の意図はそうです。しかし、何か含みというか、思うことがあるご様子とお見受けしました。よろしければお聞かせいただけませんでしょうか？例えばAJAXによる通信より早い手段があるとか、そういったことございましたら、質問の意図に関わらずアドバイス戴けましたら幸いでございます。尚、特にそういった含みなどなく純粋に質問の意図のご確認であったでしたら無視して頂いて結構です。

[x_x]

いや、「箱を表示して体感速度を上げる」のが狙いであるなら中のデータなど入れる必要などないので、いったい何を計測しているのかわからないのです。

[risu]

箱を表示した後、その箱の中のデータを取得して挿入しなければならないのですが・・その必要がない、と仰いますと？申し訳ございません。疑問の意図をはかりかねております。

もしかして、「箱を表示できた時点で体感速度の向上は成っており、計測しているのは”箱の表示の体感速度”ではなくて、”箱の表示後に、中身が表示されるまでの体感速度”ではないか？」という疑問ですか？もしこの疑問であればまったくその通りですが、違いますよね？

[x_x]

いやそうですね。
箱がすでにある状態から詰めるのとは効率が違うと思いますが、すでに解決したようですのでデータを受け取った後に生成するということでもいいのでしょう。

[risu]

また何かございましたらどうぞ遠慮なく仰ってください。ありがとうございました。

Answer 1

それぞれ実行すると分かるとおり、「keisoku_2();」の方が圧倒的に速いのです。

これは、keisoku_1()ではHTML1つに対して毎回DOMノードを作成してそれを書き換えているのに対して、keisoku_2()では文字列操作で済ませているからです。

ただし、そのままkeisoku_2()の形で行うことはおすすめしません。HTMLを文字列連結で作ると、不正なHTMLを構築してしまうXSSの危険があります。

keisoku_1()を高速化する方法としては、「HTMLのjQuery化は最初の1回だけにしておいて、あとは.clone()でコピーする（外側のクラスも文字列で流し込まず、jQuery操作で書き込む）」という方法があります。HTMLのパースがいちばん手間のかかる処理です。

Comments

[risu]

早速のご回答をありがとうございます。毎回のDOM変換がネックで、それが「.clone()」を使うと変わりますか！理由が気になりますが、今出先で実行できないので後ほど試させて頂き、改めてご報告申し上げたいと思います。

[maisumakun]

HTML→DOMが1回で済みます（cloneはHTMLのパースよりずっと軽い処理です）。

[risu]

なるほど、「.clone()」は良さそうですね。それぞれの処理の重さなど調べたこともありませんでした。ありがとうございます。

[risu]

ところで勉強不足で大変恐縮ですが、XSSについて少し教えてください。

私にとってXSSとは、以下の状況においてのみありえるリスクで、以下の対策でもって完全に回避される脆弱性だという認識です。

状況
→掲示板のようにユーザーがDBに値を保存できるときにありえるリスクである。

対策
→その値はサニタイズして出力すれば、スクリプトとして実行されないので問題はない。

さて今回の質問の場合ですが、文字列で連結されたHTMLの途中に何かフロントで仕込むことは可能と思いますが、その仕込んだスクリプトが実行されるのはあくまで仕込んた本人に対してのみですよね？

では、その本人が例えばどのようなスクリプトを実行すると、本人以外にどのようなリスクが想定されるのでしょうか？？

[maisumakun]

> 文字列で連結されたHTMLの途中に何かフロントで仕込むことは可能と思いますが、その仕込んだスクリプトが実行されるのはあくまで仕込んた本人に対してのみですよね？

元のデータに不適当な値が入る状況になると、見た全員に影響します。

[risu]

ご返信誠にありがとうございます。「元のデータ」というのは「AJAXでDBから引っ張ってくる値」ですよね？そして「見た全員」とは「仕込んだ本人以外の誰かを含む」ですよね？この解釈があっているとすると、やはり次のように分かりません。

DBの値が管理者しか保存できないような仕様だとすると、「HTMLを文字列連結で作ると、不正なHTMLを構築してしまうXSSの危険」は、例えばどのようなフローで想定されますか？

不正なHTMLが構築されうるのはわかります。しかしそれがどのようなフローで「仕込んだ本人以外の誰か」に影響するのでしょうか？

仕込んだ本人が自分のフロントで不正なHTMLを構築し、その本人だけにしか影響しないのではないか？という考えでおります。

お手数おかけし大変申し訳ございませんが、そのフローについて事例など教えて頂けましたらと思います。
どうぞ引き続き宜しくお願い申し上げます。

[maisumakun]

> DBの値が管理者しか保存できないような仕様だとすると、「HTMLを文字列連結で作ると、不正なHTMLを構築してしまうXSSの危険」は、例えばどのようなフローで想定されますか？

仮に「いまの現状では問題ない」としても、「のちのち仕様が変わっていった」、あるいは「データベース自体に不正な書き込みがあった」など、実際のシステム運用では何が起きるかわかりません。

そのようなことも考えて、あえてHTMLを出力したい用事があるのでもなければ、「できるだけ安全な側になるように設計しておく」というほうが適切です。フレームワークなどを使った開発では、「HTMLエスケープがかかるのが基本で、外すときだけ特殊な書き方をしないといけない」という用になっている例も多いです。

[risu]

>「できるだけ安全な側になるように設計しておく」というほうが適切です。
まったく仰る通りかと存じます。質問とずれてしまいましたが、アドバイス感謝申し上げます。文字列連結は避けるように致します。

[risu]

お世話になっております。さっそくご回答の件試させて頂きましたが、質問に「改善の追記」とした通り、bodyへの要素の挿入がされない状況になってしまいました。

再三お手数おかけして誠に・・申し訳ございませんが、ご査収いただけましたら幸甚に存じます。

Answer 2

テキストコントロールのみのkeisoku_2には劣りますが、
バニラJSを使った方が遥かに早くなりますよ。
createDocumentFragmentと、createElementを使っていく方法です。

keisoku_1();
function keisoku_1(){

  var time_before = new Date().getTime();

  // メモリ上でDOMを保持できる、createDocumentFragmentを使用
  var lis = document.createDocumentFragment();
  for ( var i = 0;  i < 1000;  i++ ) {
    var data = { num:i, ttl:'hello_'+i };
    const li = get_outline_html( i );

    const html = update_outline_html( li, data );
    lis.appendChild(html);
  }
  document.body.appendChild(lis);

  var time_after = new Date().getTime();
  console.log( 'keisoku_1() = ' + parseInt(time_after - time_before) );
}

// 外郭のHTMLを取得
function get_outline_html( i ){
  // バニラJSで要素を生成すれば、レンダリングせずに、メモリ上で処理するので、速い  
  const div = document.createElement('div');
    pTtl = document.createElement('p'),
    pNum = document.createElement('p');
  div.classList.add('box');
  div.classList.add(`num${i}`);

  pTtl.classList.add('ttl');
  pNum.classList.add('num');

  div.appendChild(pTtl);
  div.appendChild(pNum);
  return div;
}

// 後からデータを入れる
function update_outline_html( html, data ){
  html.querySelector('.ttl').textContent = data.ttl;
  html.querySelector('.num').textContent = data.num;
    
  return html;
}

計測結果は、12ms前後を計測していました。
質問者さんのコードだと、70ms前後なので、だいぶ早くはなっているかと。

追記：update_outline_htmlがなぜ動作しないのか

というか、そもそも、元々のkeisoku_1は動きません。
なぜなら、.findを実行した時点で、返ってくる値は、.findで見つかった要素のjQueryオブジェクトだからです。
（今回の場合はp.ttlが入る。その後にメソッドチェーンで.findしているので、当然、p.numは見つからず、$htmlには空のjQueryオブジェクトが入ってしまう）

下記に何が起きているか段階的に説明します。

// 後からデータを入れる
function update_outline_html( html, data ){
  // 最初の取得は、大枠のdiv>p.ttl+p.numという構造で取得できている
  var $html = $( html )
    // この時点で、p.ttlの取得になる。なので、textメソッドも動く
    .find( '.ttl' ).text( data.ttl )
    // この時点で、"p.ttlの中"の.numと探しにいく（find）ので、当然、.numは存在しないため、失敗する
    .find( '.num' ).text( data.num );
  // 2回目のfindにて、要素が見つからなかったので、$htmlには、空のjQueryオブジェクトが入る
  return $html[0];
}

なので、下記にする必要があります。

// 後からデータを入れる
function update_outline_html( html, data ){
  // 一回取得で止める
  const $html = $( html );
  // 変数に再代入はせず、メソッドの実行だけ行う。
  $html.find( '.ttl' ).text( data.ttl );
  $html.find( '.num' ).text( data.num );
  // $htmlには、div>p.ttl+p.numが入ったままなので、その後の処理も動作する
  return $html[0];
}

もしくは下記です。

// 後からデータを入れる
function update_outline_html( html, data ){
  // メソッドチェーンでやるなら
  const $html = $( html )
    .find( '.ttl' ).text( data.ttl )
    // 一回親（div）に遡る
    .parent()
    // divから探してるので、.numは見つかる
    .find( '.num' ).text( data.num )
    // 最終的に親に遡って、親を返す
    .parent();

  // $htmlには、div>p.ttl+p.numが入ってるので、その後の処理も動作する
  return $html[0];
}

それと、varだったとしても、同スコープ内で、同じ変数名で、varでの再宣言は止めましょう。
メンテナンス性最悪になる上、自他共に混乱しか生みません。
やるにしても、2回目以降は、varをつけずに、再代入に留めましょう。
（別スコープなら、varで宣言し直すのはあり。ただし、varよりletの方が絶対にいい）
※let、constがなんなのか、は、本件から外れるので、ご自身でお調べください。

Comments

[risu]

ご回答誠にありがとうございます。バニラJSとは何だ！？と調べてしまいました（笑）
それにしても「createDocumentFragment」というのは初耳で、これから重宝しそうなテクニックに心躍りました。

欲を言えば「get_outline_html()」のHTMLは、バックティックで囲んだ質問の状態のように「HTMLっぽい見た目」で書いておければ初心者にとっては見やすくメンテナンスもしやすいとは思いますが。

しかしバニラJSではそれは不可能で、要素１つ１つについてまず「createElement」してから、次に「classList.add」や「setAttribute」等をする。という流れになりますよね。

メンテナンス性か速度かと悩ましいところですが、今回は速度優先とし、仰る流れを採用させて頂こうと思います。

[risu]

>というか、そもそも、元々のkeisoku_1は動きません。

大変失礼致しました。実行するとHTMLにはkeisoku_2の方が1000件描画されるので、keisoku_1もされているだろうと思い気づきませんでした。

「.find()」はメソッドチェーンにはつかないんですね。しかし、この動かないものを動かすためにはどのように修正すべきでしょうか？

次のように「.find()」をわけた修正版としてもうまくいきませんでして、もしよろしければこちらについてもご教授いただけませんでしょうか。

// 後からデータを入れる → 修正版
function update_outline_html( html, data ){
var $html = $( html ).find( '.ttl' ).text( data.ttl ); // findをわける
var $html = $( html ).find( '.num' ).text( data.num ); //findをわける
return $html[0];
}

[miyabi_pudding]

なるほど。
メンテナンス性に関しては最終的にはコードを使った方が上がりますが、
初心者にもわかりやすく、だと仰る通りですね。
そこはあとは天秤にかけてどちらにするか、ですね。

ちなみに、バニラでももちろんテキストでの処理もできますよ。
（途中のcreateElementを使わない方法）
ただ、それすると、keisoku_2とやってること大した変わらなくなるので、
比べる意味がなくなってしまうかと思います。

[miyabi_pudding]

メソッドチェーンがつかないのではなく、findで見つかった要素に対してメソッドチェーンが効いてしまうのです。
あくまで、divのなかに入っている、p.ttlと、p.numにたいしてテキストを挿入ですが、
一回目の.findした時点で、
p.ttlが、$htmlに入ってるので、
p.ttlには当然p.numが入っていないので、失敗します。

その点回答に追記しますので、お待ち下さい。

[miyabi_pudding]

なぜ、うまくいかないのか、コードで、改善案とともに追記しました

[risu]

>ただ、それすると、keisoku_2とやってること大した変わらなくなる
なるほど、メモリ上でのことではなくなってしまう感じですね。

>メソッドチェーンがつかないのではなく
２回目のfindは、１回目のfindのものを拾ってしまうということですね。

>その点回答に追記しますので、お待ち下さい。
どうもありがとうございます。お待ちしております。

ひとまず速度について圧倒的に早くなる方法を教えて頂きましたのでベストアンサーにさせて頂きます。ご回答誠にありがとうございました。

[risu]

>なぜ、うまくいかないのか、コードで、改善案とともに追記しました
これは大変ご丁寧に・・痛み入ります。変数に再代入に罠があったとはわかりませんでした。本旨と逸れた質問についてまで手取り足取りと色々すみません。本当に、どうもありがとうございました。大変勉強になりました。

[risu]

失礼致します。ふと思い立った方法がございます。

質問の「keisoku_1();」ではテキストをパースする処理が重いとのことで、ならば、テキストのまま扱ってみてはどうかと思いました。つまり「.replace()」です。
https://jsfiddle.net/hjqdxeLg/

上記リンクですが「keisoku_1();」は質問と変わりありません。変えたのは「get_outline_html()」 で置換すべき場所に「r<!--replace_●●-->」などを書いたことと、「update_outline_html()」でその場所を「.replace()」で置換したことです。

このような処理はどう思われますでしょうか？わかりにくいですかね。

[miyabi_pudding]

わかりにくいというよりは、メンテナンス性が落ちるかと思います。
なんにせよ、テキストですと、
要素を変えたい、という時に（例えばdiv → section）定義した静的テキスト、置換の対象文字列などを、全て検索置換しなくてはなりません。
createElementなどを使う利点は、
一箇所修正しただけで、他は修正せずに済むという点です。

よって、わかりやすさは、コメントアウトで補うといいでしょう。
速さに関しては、
レンダリング回数を減らした処理の仕方（私の回答が一例）で、だいぶ遜色ないスピードは出るものと思います。

そして、これ以上は本質問要件から外れていくので、
どうしてもわからない部分は別途質問を立ててください。

[risu]

たしかにヘタな工夫の前にコメントアウトで書いた方がいいですね。

本質問要件はこれにて解決でございます。長々とコメントしてしまいご迷惑をおかけしました。またお目にかかる機会がございましたらその節はどうぞ宜しくお願い申し上げます。それでは、失礼致します。