Как эффективно стилизовать отдельные символы в элементе?

Question

Я работаю над 2D-графикой, работающей внутри всего текста HTML (то есть отдельные символы действуют как пиксели). Естественно, мне нужно, чтобы код был настолько эффективным, насколько это возможно, поскольку я стараюсь использовать его как можно ближе к 60 кадрам в секунду.

Каждая строка символов - это собственный элемент абзаца HTML. Я заметил, что когда я добавил функциональность для окраски каждого отдельного символа, код сильно пострадал от производительности (около 60 кадров в секунду примерно до 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);