如何有效地为元素中的单个字符设置样式?

时间:2014-09-18 20:37:58

标签: javascript html css performance

我一直在研究仅在HTML文本中运行的2D图形框架(即单个字符充当像素)。当然,我需要代码尽可能高效,因为我的目标是尽可能接近60 fps。

每一行字符都是它自己的HTML段落元素。我注意到当我添加了为每个角色着色的功能时,代码的性能大幅下降(大约60 fps下降到大约5或6)。

我为单个%字符着色的方法

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

其中color是所需颜色的十六进制值。

我现在已经看了一段时间,但我们找不到任何与我试图做的造型动态性相符的解决方案。有人知道一种更有效的方式来设计个性化角色吗?此外,深入了解上述方法效率如此低效的原因也会有所帮助。

谢谢(有关上下文中的代码,请查看https://a8afefdfe4646d1a727ae236e436a4e29773afd3.googledrive.com/host/0BwftsCVGDOiwQ0I4WUxRTEFuWkU/TextCanvas.js,drawChar和render函数是样式代码所在的位置)

1 个答案:

答案 0 :(得分:1)

首先,不推荐使用font标签。使用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 );