Размер строки с классом CSS

Question

Привет, у меня есть собственный класс для переноса текста. и я столкнулся с небольшой проблемой, она довольно медленная, потому что мой скрипт, который проверяет размер шрифта, помещает строку в div с классами, но это в большом масштабе для DOM. так есть ли другой способ?

Как вы можете видеть, я пытался построить контроллер кеша, но это замедляет его

var textMetrics = function (appendTo) {
    var span;
    var cache = [];

    this.init = function () {
        span = document.createElement("span");
            appendTo.appendChild(span);
            span.style.position = 'absolute';
            span.style.left     = -9999 + 'px';
    };

    this.checkCache = function (word, style) {

        for (var i = 0; i < cache.length; i++) {
            if (cache[i].word == word) {
                return cache[i].value;
            }
        }
        return false;
    };

    this.addCache = function (word, style, value) {
        cache.push({
            "word": word,
            "style": style,
            "value": value
        });
    };

    this.getSize = function (word, style) {
        word = word.replaceAll(" ", "&nbsp;");

        //var inCache = this.checkCache(word, style);
        var inCache = false;
        if (inCache === false) {

            span.innerHTML = word;

            for (var i in style) {
                span.style[i] = style[i];
            }

            var coords = {
                "width": span.offsetWidth,
                "height": span.offsetHeight
            };


            for (var i in style) {
                span.style[i] = "";
            }

            span.innerHTML = "";

            this.addCache(word, style, coords);

            return coords;
        }
        else {
            return inCache;
        }

    };

    this.init();
};

Answer 1

Поскольку вы в основном используете словарь, лучшим форматом для вашего кэша является простой объект javascript, который ведет себя как хэш-карта.

var cache = {};

Затем вы можете назначить ему слова следующим образом:

this.addCache = function (word, style, value) {
    cache[word] = {style: style, value: value};
};

И проверьте их следующим образом:

this.checkCache = function (word) {
    return cache[word];
};

Итак, вы можете:

var cachedItem = this.checkCache(word);
if (cachedItem ) {
    alert(cachedItem.value);
}

Это должно значительно ускорить поиск в кеше, так как вам не нужно проходить черезмассив, который становится все больше и больше.

Answer 2

Вы могли бы рассмотреть возможность сделать ваш кеш словарём (объектом JS) вместо списка:

var cache = {};

this.addCache = function (word, style, value) {
    cache[word] = value;
};

this.checkCache = function (word, style) {
    var value = cache[word];
    if (typeof value != "undefined")
        return value;
    return false;
};

Я не совсем понял, о чем ваша переменная style - возможно, вам стоит добавить ее и в ключ кеша.

Answer 3

Вы можете попытаться приблизить ширину текста, используя ширину отдельных символов. Это создаст проблемы, когда есть специальный кернинг для таких комбинаций, как "ff", конечно. Я написал функцию, которая кэширует ширину пар символов, чтобы приспособиться к этому. Таким образом, требуется только постоянное количество манипуляций с DOM. Это на http://jsfiddle.net/wbL9Q/6/ и https://gist.github.com/1562233 (здесь слишком много кода).

Однако, хотя у меня это работало в Safari (Mac), оно не дало правильных результатов в Firefox. По-видимому, там применяется еще более сложный кернинг. Может быть, расширение алгоритма на тройки символов (или даже больше) может помочь.

(Извините за публикацию моего второго ответа, но я подумал, что это имеет смысл, потому что это совершенно другой аспект.)