我如何优化qTip？

Question

我一直在对我正在开发的应用程序进行一些分析，而qTip确实在减慢速度！ 我喜欢这个插件，但是在文档准备上添加提示几乎需要2秒钟（页面上大约有300个提示）。 我知道这有很多提示，但无论如何有明显或不那么明显的方法来加快这个速度吗？

我在这里使用2.0的每日构建：

http://github.com/craga89/qtip

我用来添加提示的主要功能是这样的：

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，它只保存了2069年的大约10毫秒，所以为了可读性，我把它拿回来了。 我已经把它从使用.each转换为传统的for循环。 这节省了我大约100毫秒。 再次，与总运行时间相比，桶中的下降。

我一直在使用dynaTrace来追踪缓慢的部分。

整个功能需要2069才能运行。 1931年就是qtip功能。 所以我对加速循环和选择器并不过分感兴趣。 他们很好。 我需要减少用于实际qtiping的时间。

希望我很清楚我想要做什么。

我愿意尝试几乎任何东西，如果有更高效的工具提示插件，我愿意放弃qTip！

Answer 1

就像其他人说的那样，只有在他们徘徊或完成任何要求时才尝试将它们连接起来。

$(".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");
    }
});

Answer 2

我说你只是一次添加太多。

你可以尝试使用window.setTimeout();一次加载一个window.setTimeout(); 所以他们不挂机UI？ 虽然我不确定它会起作用。

或者，只有在用户专注于该字段时才应用qTip，而不是先加载它们...这显然会导致您的页面被删除。

用户实际想要显示所有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
            }
        }
    });