Кэширование шаблонов

В Backbone.js шаблоны представляют собой HTML-структуры с возможностью внедрения данных через механизмы вроде Underscore.js или других библиотек шаблонизации. Эффективная работа с шаблонами напрямую влияет на производительность приложения, особенно при рендеринге повторяющихся представлений.

Основная идея кэширования

При каждом рендеринге представления вызов метода _.template для одного и того же HTML-шаблона приводит к повторной компиляции шаблона, что снижает производительность. Кэширование шаблонов позволяет компилировать их один раз и многократно использовать в дальнейшем.

Ключевая идея:

var compiledTemplate = _.template($('#template-id').html());
var html = compiledTemplate(data);

Если шаблон используется многократно, компиляцию стоит вынести в отдельное хранилище.

Реализация кэширования

Простое хранилище шаблонов

Можно создать объект для хранения скомпилированных шаблонов:

var TemplateCache = {};

function getTemplate(id) {
    if (!TemplateCache[id]) {
        var templateHtml = document.getElementById(id).innerHTML;
        TemplateCache[id] = _.template(templateHtml);
    }
    return TemplateCache[id];
}

При использовании:

var html = getTemplate('item-template')({ name: 'Пример' });

Метод в Backbone.View

Реализация кэширования непосредственно в представлении упрощает работу с шаблонами:

var MyView = Backbone.View.extend({
    templateId: 'item-template',

    render: function() {
        this.$el.html(this.getTemplate()(this.model.toJSON()));
        return this;
    },

    getTemplate: function() {
        if (!this.constructor.templateCache) {
            this.constructor.templateCache = {};
        }
        if (!this.constructor.templateCache[this.templateId]) {
            var templateHtml = document.getElementById(this.templateId).innerHTML;
            this.constructor.templateCache[this.templateId] = _.template(templateHtml);
        }
        return this.constructor.templateCache[this.templateId];
    }
});

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

Подход с ленивой загрузкой

Если приложение использует большое количество шаблонов, стоит применять ленивую загрузку: шаблон компилируется только при первом обращении, что уменьшает время инициализации.

var TemplateLoader = {
    cache: {},

    load: function(id) {
        if (!this.cache[id]) {
            var element = document.getElementById(id);
            if (element) {
                this.cache[id] = _.template(element.innerHTML);
            } else {
                throw new Error('Шаблон с id ' + id + ' не найден');
            }
        }
        return this.cache[id];
    }
};

Использование:

var html = TemplateLoader.load('header-template')({ title: 'Главная' });

Интеграция с динамическими шаблонами

Для шаблонов, загружаемых через AJAX, также можно реализовать кэширование:

var AjaxTemplateCache = {
    cache: {},

    get: function(url, callback) {
        if (this.cache[url]) {
            callback(this.cache[url]);
        } else {
            $.get(url, function(templateHtml) {
                AjaxTemplateCache.cache[url] = _.template(templateHtml);
                callback(AjaxTemplateCache.cache[url]);
            });
        }
    }
};

Применение:

AjaxTemplateCache.get('/templates/item.html', function(template) {
    var html = template({ name: 'Товар' });
});

Преимущества кэширования

Снижение нагрузки на CPU: компиляция шаблона выполняется один раз.
Повышение скорости рендеринга: при повторном использовании шаблон вставляется сразу.
Упрощение поддержки кода: централизованное хранение шаблонов позволяет легко менять структуру без повторной компиляции.