如何有效地設置單個元素中的單個字符？

Question

我一直在研究只在HTML文本內部運行的2D圖形框架（即單個字符作爲像素）。當然，我需要的代碼儘可能高效，因爲我的目標是能夠儘可能接近60 fps。

每行字符都是它自己的HTML段落元素。我注意到當我添加用於着色每個單獨字符的功能時，代碼在性能方面遭受了大幅下降（大約60 fps下降到大約5或6）。

我的方法來着色各個％字符

"<FONT color=" + colour + ">%</FONT>" 

當顏色是所希望的顏色的十六進制值。

我已經環顧了一段時間，但一直沒有找到任何解決方案，我試圖做的樣式動態性兼容。任何人都知道更有效的方式來設計獨立角色的動態樣式嗎？此外，深入瞭解上述方法如此低效的原因也很有幫助。

由於（對於一看在上下文有關的代碼看一看https://a8afefdfe4646d1a727ae236e436a4e29773afd3.googledrive.com/host/0BwftsCVGDOiwQ0I4WUxRTEFuWkU/TextCanvas.js，所述drawChar和渲染功能是在造型代碼）

Answer 1

首先，字體標籤被棄用。使用span。

此外，這個答案假設你有這樣做，而不是更好的canvas元素繪製。

創建元素時，你應該做的是：

//An example of the colors 
var colors = [ "#e8e8e8", "#ffffff" ]; 

//This will hold them all for fast adding to your parent node 
var fragment = document.createDocumentFragment(); 

for (var i = 0; i < colors.length; i++) 
{ 
    //Create the element 
    var color = document.createElement("span"); 

    //Set its color 
    color.style.color = colors[ i ]; 

    //Add the % symbol (innerText is IE) 
    color.textContent = color.innerText = "%"; 

    //Add to fragment 
    fragment.appendChild(color); 
} 

//Now add it to the parent node (will add all the children) 
parentNode.appendChild(fragment);