如何优化qTip？

我一直在对我正在开发的应用程序进行一些分析，而qTip确实正在减慢它的速度！我喜欢这个插件，但在文档准备中添加提示需要花费将近2整秒（页面上的约300个提示）。我知道这有很多小窍门，但无论如何明显或不是很明显的方法来加速这一点？如何优化qTip？

我使用的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转换为传统的循环。这为我节省了大约100毫秒。再次，与总运行时间相比，存储桶下降了。

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

整个功能需要2069运行。这是1931年的qtip函数。所以我对加速循环和选择器不太感兴趣。他们很好。我需要减少花在做实际练习上的时间。

希望很清楚我在找什么。

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

来源

2010-09-08 Patricia

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

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

来源

2010-09-08 18:02:41

这是非常好的！我不得不将mouseover.qtip更改为鼠标悬停。但它的作用像一个魅力！非常感谢！ – Patricia 2010-09-09 14:17:31

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

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

来源

2010-09-08 17:46:00 CaffGeek

我把它放在一个循环中，因为我正在做一些其他的东西，我试图优化时拿出来。我现在就试试看吧 – Patricia 2010-09-08 17:51:41

@Patricia，不知道它会有所作为，jQuery可能在内部循环播放。我会猜测，如果你尝试FF中的页面，FF中的速度会更快。这可能是因为IE不能很好地处理大型DOM（或其操作）。这是你想要做的。这就是为什么我建议只以更加“按需”的方式添加提示，而不是全部提前 – CaffGeek 2010-09-08 17:55:40

年，这需要1/3的时间，或更少的FF。 – Patricia 2010-09-09 13:37:17

如何优化qTip？

回答

相关问题