Кеширование

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

В Tooltipster кеширование работает через опцию contentAsHTML и методы управления содержимым, в сочетании с функцией functionBefore, которая может подгружать данные динамически. Основная идея заключается в том, чтобы при первом запросе контент сохранялся и повторно использовался при последующих открытых тултипах.

Опция content и кеширование

Библиотека позволяет задавать контент двумя способами: статически и динамически. Статический контент, переданный в content, автоматически хранится и не требует повторной загрузки:

$('#element').tooltipster({
    content: 'Статический текст',
    theme: 'tooltipster-shadow'
});

Для динамического контента используется функция в functionBefore:

$('#element').tooltipster({
    functionBefore: function(instance, helper){
        if (instance.content() === 'Загрузка...') {
            $.get('/api/data', function(data){
                instance.content(data);
            });
        }
    },
    content: 'Загрузка...',
    theme: 'tooltipster-light'
});

Здесь ключевой момент: контент запрашивается только один раз. После того как instance.content(data) устанавливает данные, Tooltipster автоматически сохраняет их для последующих открытий тултипа.

Управление кешем через instance.content()

Метод instance.content() служит не только для установки, но и для получения текущего содержимого тултипа. Это позволяет реализовать более сложные сценарии кеширования:

$('#element').tooltipster({
    functionBefore: function(instance, helper){
        let cached = instance.content();
        if (cached === 'Загрузка...') {
            $.ajax({
                url: '/api/data',
                success: function(data){
                    instance.content(data);
                }
            });
        }
    },
    content: 'Загрузка...'
});

Важно: если в content передан объект jQuery или HTML-элемент, Tooltipster создаёт внутренний клон при каждом открытии. Для кеширования необходимо либо использовать строку HTML, либо хранить jQuery-элемент отдельно и подставлять его повторно.

update и контроль кеша

Метод update позволяет обновить содержимое тултипа после его инициализации, не теряя при этом других настроек:

let tooltip = $('#element').tooltipster().tooltipster('instance');

tooltip.update('Новый контент');

Если требуется очистить кеш и заставить Tooltipster повторно подгрузить данные, можно использовать content('Загрузка...') перед новым AJAX-запросом:

tooltip.content('Загрузка...');
$.get('/api/data', function(data){
    tooltip.content(data);
});

Динамическое кеширование для множества элементов

При работе с группой элементов удобно хранить кеш вне Tooltipster, особенно если контент приходит с сервера:

let cache = {};

$('.items').tooltipster({
    functionBefore: function(instance, helper){
        let id = $(helper.origin).data('id');
        if (!cache[id]) {
            cache[id] = 'Загрузка...';
            $.get(`/api/item/${id}`, function(data){
                cache[id] = data;
                instance.content(data);
            });
        } else {
            instance.content(cache[id]);
        }
    },
    content: 'Загрузка...'
});

Такой подход позволяет:

  • исключить дублирующиеся AJAX-запросы;
  • ускорить отображение подсказок;
  • централизованно контролировать кеш для большого количества элементов.

Настройка TTL (времени жизни кеша)

Tooltipster не имеет встроенной поддержки TTL для динамического контента, но его можно реализовать вручную через объекты кеша и setTimeout:

let cache = {};

$('.items').tooltipster({
    functionBefore: function(instance, helper){
        let id = $(helper.origin).data('id');
        if (!cache[id] || (Date.now() - cache[id].time > 60000)) { // 60 секунд
            cache[id] = {content: 'Загрузка...', time: Date.now()};
            $.get(`/api/item/${id}`, function(data){
                cache[id] = {content: data, time: Date.now()};
                instance.content(data);
            });
        } else {
            instance.content(cache[id].content);
        }
    },
    content: 'Загрузка...'
});

Ключевые моменты кеширования

  • Статический контент хранится автоматически, повторная подгрузка не требуется.
  • Динамический контент можно кешировать через instance.content() или внешние структуры данных.
  • Обновление кеша выполняется через update или повторное присваивание content().
  • Время жизни кеша нужно контролировать вручную, если данные часто изменяются.
  • Кеширование jQuery-элементов требует аккуратного клонирования для избежания побочных эффектов.

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

Оглавление