如何提高大字符串JavaScript工具提示的性能？

我正在爲網頁提供一個工具提示式應用程序，並且希望每次用戶移動一個單詞時都會觸發一個Javascript事件。如何提高大字符串JavaScript工具提示的性能？

目前，我通過在每個單詞周圍放置一個標籤來工作。 word1 word2 word3，然後處理每個鼠標懸停/跳出事件。

這工作正常，但有時輸入文本是數千個單詞，所有這些標籤似乎減慢瀏覽器（至少減緩IE，至少）。我使用事件委託，因此不會附加數千個事件處理程序，並且一旦渲染就足夠快。問題是，當我通過innerHTML設置單個標記的單詞時，首先可能需要8秒以上的時間，並凍結瀏覽器。爲了澄清我的意思 - 用戶輸入一個文本字符串，它通過ajax發送到服務器，HTML標籤添加到服務器端。在ajax成功回調中，我設置了新的HTML通過直接設置元素的innerHTML。延遲是所有的innerHTML設置，而不是服務器端。）

是否有反正可以更改爲只是word1 word2 word3仍然有效？有沒有什麼方法可以知道用戶在沒有將每個標籤放在每個標籤周圍的情況下使用哪個特定字詞？

來源

2011-04-03 mikel

在遇到this page後，事實證明這是可能的，至少在某種程度上是可能的。下面的解決方案僅適用於IE，但這是我所需要的，因爲其他瀏覽器對於單個標籤解決方案來說足夠快。

<script> 
function getWordFromEvent (evt) 
{ 
    if (document.body && document.body.createTextRange) 
    { 
     var range = document.body.createTextRange(); 
     range.moveToPoint(evt.clientX, evt.clientY); 
     range.expand('word'); 
     document.getElementById("wordMouseIsOver").innerHTML = range.text; 
    } 
} 
</script> 
<span onMouseMove="getWordFromEvent(event)">word1 word2 word3</span> 
<BR> 
<span id="wordMouseIsOver"> </span>

來源

2011-04-03 13:03:17 mikel

你應該編輯你的問題，而不是回覆。 – Anax 2011-04-03 19:10:23

看看這個鏈接（點7）：http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip7。

您將基本上將所有跨度包含在一個span/div中，然後插入該單個DOM元素。

來源

2011-04-03 12:28:56

對不起的利益，我應該提到我已經這樣做。 – mikel 2011-04-03 12:44:37

使用Document Fragment's，然後再將長HTML插入到文檔中。

讀John Resig's（該jQuery庫的創建人）lengthy article使用文檔片段

來源

2011-04-03 14:53:53 adardesign

感謝您的鏈接，AFAIK無論如何，這種技術現在被納入到jQuery html（）方法中。 – mikel 2011-04-24 08:35:32

如何提高大字符串JavaScript工具提示的性能？

回答

相關問題