html DOMノードの制限

Question

私は楽しみのためにターミナルエミュレータで作業しており、バックエンドの基本を持ち運びしています。しかし、私はフロントエンドでパフォーマンスの問題にぶち当たっています。

あなたが知っているように、端末ウィンドウ内の各文字は異なるスタイルを持つことができます。 （色、背景、太字、下線など）。だから、私の考えは、ビューウィンドウの各文字に<span>を使用し、必要な場合はインラインスタイルを適用して、必要な程度の制御ができるようにすることでした。

問題は、リフレッシュ時にパフォーマンスがひどいことです。クロムは約120 ops /秒、firefoxは80で私のPCでそれを処理することができます。しかし、インターネットエクスプローラはほとんど6になります。したがって、htmlで私の勢いでキャンバスを使用しようとしましたが、キャンバス上のテキストは非常に遅いです。オンライン私はキャッシュの読み込みに役立ちますので、文字ごとにキャッシュを実装し、いくつかの複合操作でビットマップフォントに色を適用できます。しかし、これはDOMよりも遅いです。

次に私はdomに戻ってdocument.createDocumentFragmentを使って試しましたが、標準を使用して少し悪化します。

今どこで最適化を開始するのか分かりません。私はキャラクターの変化を追跡することができましたが、ターミナルが多くの入力を受けたときにはまだこの遅さに遭遇します。

私は完全に間違って何かをするかもしれないので、私は任意のヘルプは高く評価され...

DOMに新しいです！あなたが要素にHTMLを追加するinsertAdjacentHTMLを使用する場合、文字列のテキストは、驚くほど効率的であるとして、HTMLの

http://jsperf.com/canvas-bitma32p-cache-test/6

Answer 1

直接挿入：ここ

は、いくつかのテストケースとjsperfです。

var div = document.getElementById("output"); 
 
var charCount = 50; 
 
var line, i, j; 
 

 
for (i = 0; i < charCount; i++) { 
 
    line = ""; 
 
    for (j = 0; j < charCount; j++) { 
 
    line += "<span style=\"background-color:rgb(0,0,255);color:rgb(255,127,0)\">o</span>"; 
 
    } 
 
    div.insertAdjacentHTML("beforeend","<div>"+line+"</div>"); 
 
}

#output{font-family:courier; font-size:6pt;}

<div id="output"></div>

このアプローチの欠点は明白です：あなたは（彼らはただの文字列です）JavaScriptでのオブジェクトとして各追加要素を治療する機会を得ることはありませんので、あなたがすることはできませんたとえば、イベントリスナーをそれぞれに直接アタッチすることができます。

本当に出力を画面に印刷するだけの場合は、insertAdjacentHTMLが完璧です。