Как я могу оптимизировать qTip? - PullRequest
Новая
       3

Как я могу оптимизировать qTip?

1 голос
/ 08 сентября 2010

Я занимался профилированием приложения, над которым я работаю, и qTip действительно замедляет его!Мне нравится этот плагин, но добавление советов в готовый документ занимает почти 2 секунды (около 300 советов на странице).Я знаю, что это много советов, но есть ли в любом случае очевидные или не очень очевидные способы ускорить это?

Я использую ежедневную сборку 2.0 здесь:1006 *

и основная функция, которую я использую для добавления советов, такова: 

var thingsToTip = $('.TipMe');
for (var currentItem, i = -1; currentItem = thingsToTip[++i]; ) {
    currentItem = $(currentItem);
    currentItem.qtip({
        style: {
            widget: false,
            classes: 'ui-tooltip-light' 
        },
        content: currentItem.attr('tooltip'),
        position: {

            at: 'bottomRight',
            my: 'topleft',
            adjust: {
                screen: 'flip',
                x: 0,
                y: 0
            }
        }
    });
}

теперь я знаю, что выбор по классу не самый эффективный.но я попытался переключить его на span.TipMe, и он сэкономил только 10 миллисекунд из 2069, поэтому для удобства чтения я взял его обратно.я уже переключил его с использования .each на традиционный цикл for.это спасло меня около 100 миллисекунд.Опять же, падение корзины по сравнению с общим временем выполнения.

Я использовал dynaTrace для отслеживания медленных частей.

вся функция занимает 2069 для запуска.1931 год - это функция qtip.так что я не слишком заинтересован в ускорении цикла и селектора.они в порядке.мне нужно сократить время, затрачиваемое на фактическое qtiping.

надеюсь, понятно, что я собираюсь сделать.

Я готов попробовать почти все и готов отказаться от qTip, если есть более эффективный плагин всплывающей подсказки!

Ответы [ 2 ]

3 голосов
/ 08 сентября 2010

Как сказал другой парень, попробуйте прикрепить их только после того, как они зависли или сделали то, что требовалось. 

$(".TipMe").live("mouseover", function () {
    var $this = $(this)
    if (!$this.data("toolTipAttached")) {
        $this.qtip({
            style: {
                widget: false,
                classes: 'ui-tooltip-light'
            },
            content: $this.attr('tooltip'),
            position: {

                at: 'bottomRight',
                my: 'topleft',
                adjust: {
                    screen: 'flip',
                    x: 0,
                    y: 0
                }
            }
        });

        $this.data("toolTipAttached", true);

        // the qtip handler for the event may not be called since we just added it, so you   
        // may have to trigger it manually the first time.
        $this.trigger("mouseover.qtip");
    }
});
1 голос
/ 08 сентября 2010

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

Вы можете попробовать загрузить их по одному, используя window.setTimeout();, чтобы они не зависали в интерфейсе?Хотя я не уверен, что это сработает.

В качестве альтернативы, применяйте qTip только тогда, когда пользователь сфокусировался на поле, вместо того, чтобы загружать их все ранее ... что явно убивает вашу страницу.1007 * Каковы шансы, что пользователь действительно захочет показать все 300 советов?И все же вы загружаете их все ...

На самом деле, почему вы зацикливаетесь?Разве это не сделало бы то же самое? 

    $('.TipMe').qtip({
        style: {
            widget: false,
            classes: 'ui-tooltip-light' 
        },
        content: this.attr('tooltip'),
        position: {

            at: 'bottomRight',
            my: 'topleft',
            adjust: {
                screen: 'flip',
                x: 0,
                y: 0
            }
        }
    });
...