Question

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

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

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

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();一次加载一个，这样他们就不会挂断用户界面了吗？虽然我不确定它会起作用。

或者，只有在用户专注于该字段时才应用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
            }
        }
    });

我如何优化qTip？

2 个答案: