我如何优化qTip?

时间:2010-09-08 17:35:45

标签: javascript jquery performance optimization qtip

我一直在对我正在开发的应用程序进行一些分析,而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!

2 个答案:

答案 0 :(得分:3)

就像其他人说的那样,只有在他们徘徊或完成任何要求时才尝试将它们附加。

$(".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 :(得分:1)

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

您可以尝试使用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
            }
        }
    });