提高工具提示性能，但現在不能在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

回答