Javascriptを：多くの色

Question

を持つ大規模なテキストの最適化挿入私はHTMLで事前に環境を持っている、と私はそれに大きな文字列を挿入するにはJavascriptを使用しています：

$my_environment.innerHTML = my_large_text; 

文字列は、約100,000文字の長さ。文字列がクリーンテキストのみで構成されている場合、すべてが良好です。私は（そう1/3程度）の文字の多くに色を追加しようとする場合しかし、私は顕著な遅延、中にブラウザのウィンドウがあります

<span style="background-color:some-color;"></span> 

によって、個々の文字をラップすることによってそれを行う - とFirefoxの場合、ブラウザ全体が停止しています。

事前環境自体はサイズが限定されており、オーバーフローを使用しているため、実際にはテキストの変更中に塗りつぶす必要があります。

遅延の原因は何ですか？それを修正することは何ですか？

1. 私はpreの代わりに別の環境を使用できますが、私はむしろそうしたくありません。
2. 色は並行ではありません。ランダムに配色さ​​れなければならない文字を考えてください。
3. 私は、物事をスピードアップするには、単にスパン環境でそれらをラップするのではなく、文字に色を割り当てるより良い方法を考えていきたいと思います。

Answer 1

最適化のステップの1つは、「スタイル」タグではなく「クラス」タグを使用することです。あらかじめ定義されたCSSクラスを使用する場合、正確なシナリオに応じて、レンダリング時間を短縮することができます。

もう1つのアプローチは、すべての文字をモノクロでレンダリングすることですが、idを持つスパン要素でレンダリングすることもできます。 Javascriptを使用して、変更が必要な文字を色付けできます。