提高工具提示性能，但现在不能在IE7或IE6 jQuery和内联样式中工作

我已经创建了一个工具提示，该工具提示附带带有文本的DIV页面。提高工具提示性能，但现在不能在IE7或IE6 jQuery和内联样式中工作

我设法让它出现在我想要的位置，并随着鼠标移动。

我以前是用内联样式来做这件事，并且动态内联地更新顶部左边的绝对定位坐标。

这似乎会导致性能问题，所以我写了动态样式到<head>中的，它在Firefox中正常工作，但现在不在IE7或IE6中。

jsFiddle在这里;

我想我需要从删除标记鼠标移开时很好，但IE浏览器似乎在同一位置总是一次渲染一次，然后。

我当然会喜欢它在所有浏览器中都能正常工作，并且不会像编写内联样式时遇到任何大量的性能问题。

2010-09-07 RyanP13

如果您查看此叉 - http://jsfiddle.net/5YKNS/然后运行鼠标在工具提示持有人很多，那么你应该看到我遇到的性能下降。 – RyanP13 2010-09-07 22:38:37

不确定从哪里开始，那么my changes怎么样？正如你所看到的，它现在在Internet Explorer中工作得很好。每个变化说明：

Internet Explorer允许样式表的最大数量（31,32，我认为），你的鼠标移动事件你追加一个新的<style>元素头部。当达到极限时，工具提示不会再移动。我把它切换回css（）给你。
每次您将鼠标悬停在元素上时，都会附加一个新的mousemove事件。这里的问题是，你从来没有取消绑定这个处理程序，所以鼠标关闭，鼠标点击会导致每次连接一个新的处理程序，加倍的工作和压力过大的浏览器（穷IE！）。我将mouseover处理程序移到了它自己的空间，它只创建并附加一次。
每个鼠标悬停都会创建工具提示，然后在mouseoff上将其分开。更好地在DOM中开始，只需hide（）和show（）它。
你不这样做任何缓存选择器或变量。每次你写$('#tooltip')这是一个额外的查找。将$('#tooltip')的结果保存到一个变量中并使用该变量。

我做了一些工作缓存$('#tooltip')，但你应该这样做$(this)。 mousemove是一个相当紧张的事件，可以在几ms内调用很多次。这会导致渲染速度下降，因为它会等待脚本完成。

2010-09-07 22:55:38

这是伟大的安迪。非常感谢。尽管我正在学习如何编写代码，但它确实有助于了解如何优化代码，这是一个非常有价值的见解。 – RyanP13 2010-09-08 10:02:03

@Ryan：不用担心:-)你可能还想看看实现你的工具提示作为一个插件，这将使它更容易移植。搜索谷歌的“jQuery插件教程”，你应该能够找到一些让你开始。 – 2010-09-08 10:04:54

回答