jQueryでDOMのappendを爆速化（１５０倍界王拳）

複数選択セレクトボックスを２つ並べて、未選択＜＞選択済　とやりとりするようなプログラムを作ってたんですよ

まあだいたいこんなかんじ

<select id="#notSelected">
  <option value="1">りんご</option>
  <option value="2">ごりら</option>
  <option value="3">らっぱ</option>
</select>
<input id="buttonSelect" type="button" value="選択する" />

<select id="#selected">
</select>
<input id="buttonCancel" type="button" value="未選択に戻す" />

ほんでこんなかんじのjsかくよね　まあほんとは重複チェックとかいろいろ面倒な処理とかあるけどだいたいこんなかんじ

$("#buttonSelect").on("click", function() {
  var options = $("#notSelected").find("option:selected");
  $("#selected").append(options);
});

$("#buttonCancel").on("click", function() {
  var options = $("#selected").find("option:selected");
  $("#notSelected").append(options);
});

ほんでこれがめっちゃ重いわけ　候補が数百件とか数千件とかあると、全件移動すると数分とかかかるわけ　具体的には４０００件で８０秒くらいかかる！　これさすがにお客さんに納品できないよね！　どうしよう！

$("#buttonSelect").on("click", function() {
  var html = "";
  $("#notSelected").find("option:selected").each(function(i){
    html += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>'
    $(this).remove(); // 移動元から削除
  });
  $("#selected").append(html);
});

０．５秒になった！　はやすぎ！！！！　富豪的プログラミングするほどセレブじゃなかった！　ぜんぜん圧倒的に貧乏人だったわ！！！！！！！

イジョーーーー！！！！！１１１１

　　　　　　　　　 ξ
　　　　　　　　ξξξ
　　　　　　　　ξ・・ξ
　　　　　　　　ξ | ξ
　　　　　　　　ξ o ξ　
　　|￣￣￣￣.　￣　￣￣￣￣|
　　.￣￣￣￣|　　　.|￣￣￣￣
　　　　　　　　|　 _　 |
　　　　　　　／／ ＼＼
　　　　　　　|　|　　　|　|
　　　　　　　|　|　　　|　|
　　　　　　／　)　　 (　 ＼
　　　　　 ￣￣　　　 ￣￣