jQueryのオブジェクトにするにはコストがかかる

$('<div>hello</div>')

こんな感じで、HTMLをjQueryのオブジェクトにすることがよくあるけど、渡してるHTMLが巨大になってくるとこの処理って意外とコストがかかる処理らしい。さっき、下コードのような感じでロードしたHTMLを元にjQueryUIのダイアログを作ろうとしてたんだけど・・。

$.get('./dialog_form.html',
    function(response) {
        // HTMLのロード完了後
        var d = $('<div>' + response + '</div>');
        d.dialog({
            title: 'Sample Form',
            width: 800,
            height: 500,
            modal: true
        });
    });

このdialog_form.htmlってのが結構なボリュームのHTMLで、

var d = $('<div>' + response + '</div>');

この部分ですげー時間がかかってた。どうすんだこれ、と思ったんだけど、何も全部jQueryのオブジェクトにすることはないらしい。以下のようにすることですげー早くなった。

$.get('./dialog_form.html',
    function(response) {
        // HTMLのロード完了後
        var d = $('<div></div>'); // ここでは空っぽの要素を作っておく
        d.dialog({
            title: 'Sample Form',
            width: 800,
            height: 500,
            modal: true,
            open: function() {
                // ダイアログがオープンしたら、ここで、ロードされたHTMLをdiv要素(d)に追加する
                d.append(response);
            }
        });
    });

こうしておけば、ダイアログが開いた後、単純にHTML要素がdivの中に挿入されるだけなんだろうね。