我如何优化qTip？(How Can i optimize qTip?)

我如何优化qTip？(How Can i optimize 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！

i've been doing some profiling on an app i'm working on and qTip is really slowing it down! I love this plugin but adding the tips on document ready is taking almost 2 whole seconds (about 300 tips on the page). I know it's a lot of tips, but is there anyway obvious or not so obvious ways to speed this up?

i'm using the daily build of 2.0 here:

http://github.com/craga89/qtip

and the main function i'm using to add the tips is this:

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 } } }); }

now i know selecting by class is not the most efficient. but i tried switching it to a span.TipMe and it only saved about 10 miliseconds out of 2069 so for readability i took it back out. i've already switched it from using .each to being a traditional for loop. this saved me about 100 miliseconds. again, a drop in the bucket compared to the total running time.

i've been using dynaTrace to track down the slow parts.

the entire funcction takes 2069 to run. 1931 of that is the qtip function. so i'm not overly interested in speeding up the loop and selector. they are fine. i need to cut down on the time spent doing the actual qtiping.

hope it's clear what i'm looking to do.

i'm willing to try almost anything, and willing to ditch qTip if there is a more efficient tooltip plugin out there!

最满意答案

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

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

Like the other guy said, try attaching them only once they've hovered or done whatever the requirement is.

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