DOMParserのインスタンスについて

Question

ブラウザサイドJavaScriptにDOMParserというクラスがあって、HTMLやXMLのパースを行えます（MDN）。

…それ自体はいいのですが、特にDOMParserインスタンスで設定すべきことがないにもかかわらず、new DOMParserでインスタンスを作ってから、instance.parseFromStringとする必要があります。

HTML LSいわく、「歴史的経緯でこんな形となってしまっている」とのことですが、「都度(new DOMParser).parseFromString()のようにインスタンスを作成してパースを行う」のと、「事前に一度new DOMParserで作ったインスタンスを変数に入れておいて、毎回の呼び出しを同じインスタンスから行う」のと、どちらがより好ましいコードなのかが気になるところです。

「このような点を考えればこちらがいい」という情報をいただけましたら幸いです。

Comments

[yambejp]

具体的に何と何を比較したいのでしょうか？

[maisumakun]

「インスタンスを使い回すことで悪影響が出ないか」vs「毎回インスタンスを作成するコスト」といったところです。

Answer 1

DOMParserの実装は Blink も Firefox も WebKit もとくに重いことはしていないので、「インスタンスを使い回すべき」とまでは言えないです。ごく少量のメモリ確保のコストとコード可読性のトレードオフで好きにしましょう。

Answer 2

インスタンスを再利用する予定がないならダイレクトに処理すればよいでしょう
（強制ではないのですきなようにすればいい）

const html = `<h1>test</h1>
<div>test</div>`;
const dom=new DOMParser().parseFromString(html,'text/html');
console.log(dom.querySelector('body').innerHTML);

複数のDOM生成が必要かどうかしだいですよね

const html1 = `<h1>test1</h1>`;
const html2 = `<h2>test2</h2>`;
const parser=new DOMParser();
const dom1=parser.parseFromString(html1,'text/html');
const dom2=parser.parseFromString(html2,'text/html');
console.log(dom1.querySelector('body').innerHTML);
console.log(dom2.querySelector('body').innerHTML);

parserを使い回すくらいならcreateDocumentFragmentの方が楽なような気がします

const html1 = `<h1>test1</h1>`;
const html2 = `<h2>test2</h2>`;
const dom1=Object.assign(document.createDocumentFragment(),{innerHTML:html1});
const dom2=Object.assign(document.createDocumentFragment(),{innerHTML:html2});
console.log(dom1.innerHTML);
console.log(dom2.innerHTML);