बड़े तारों के लिए जावास्क्रिप्ट टूलटिप्स के प्रदर्शन में सुधार कैसे करें?

Question

मैं एक वेबपृष्ठ के लिए टूलटिप-एस्क्यू एप्लिकेशन पर काम कर रहा हूं, और जब भी कोई उपयोगकर्ता किसी शब्द पर चलता है तो जावास्क्रिप्ट ईवेंट को निकाल दिया जाना चाहिए।

वर्तमान में मैं इसे प्रत्येक शब्द के आसपास <span> टैग डालकर काम कर रहा हूं, उदाहरण के लिए <span id="word1">word1</span> <span id="word2">word2</span> <span id="word3">word3</span> और फिर प्रत्येक के लिए माउसओवर/आउट ईवेंट को संभालना।

यह ठीक काम करता है, लेकिन कभी-कभी इनपुट टेक्स्ट हजारों शब्द होते हैं और ये सभी टैग ब्राउज़र को धीमा करते हैं (कम से कम IE को धीमा कर देते हैं)। मैं इवेंट प्रतिनिधिमंडल का उपयोग करता हूं इसलिए हजारों इवेंट हैंडलर संलग्न नहीं हैं, और यह एक बार प्रस्तुत होने के लिए पर्याप्त तेज़ है। यह समस्या 8+ सेकेंड है जो व्यक्तिगत रूप से टैग किए गए शब्दों को प्रस्तुत करने के लिए पहली जगह ले सकती है जब मैं इसे आंतरिक HTML के माध्यम से सेट करता हूं, प्रक्रिया में ब्राउज़र को जमा करता हूं। उपयोगकर्ता पाठ की एक स्ट्रिंग में प्रवेश करती है, यह ajax द्वारा सर्वर के लिए भेजा है और HTML टैग सर्वर साइड जोड़ रहे हैं ajax सफलता कॉलबैक में, मैं सेट - बस स्पष्ट करने के लिए मैं क्या मतलब है:

(संपादित करें। तत्व का आंतरिक HTML सीधे सेट करके नया HTML। देरी सभी आंतरिक HTML सेटिंग पर है, सर्वर-साइड नहीं।)

क्या वैसे भी इसे <span id="line1">word1 word2 word3</span> में बदला जा सकता है और अभी भी काम कर सकता है? क्या यह जानने का कोई तरीका है कि उपयोगकर्ता ने किस विशिष्ट शब्द को माउस के अंदर एक अलग टैग डाले बिना माउस किया?

Answer 1

this page में आने के बाद यह कम से कम कुछ हद तक संभव है। नीचे दिया गया समाधान केवल आईई में काम करता है, लेकिन वास्तव में मुझे बस इतना ही चाहिए कि अन्य ब्राउज़र व्यक्तिगत टैग समाधान के साथ पर्याप्त रूप से तेज़ थे।

<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> 

Answer 2

इस लिंक पर एक नज़र डालें (बिंदु 7): http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip7।

आप मूल रूप से एक ही अवधि/div के अंदर अपने सभी स्पैन लपेटेंगे और फिर उस एकल डोम तत्व को डालेंगे।

Answer 3

उपयोग Document Fragment's इससे पहले कि आप अपने दस्तावेज़ में लंबे एचटीएमएल इंजेक्षन।

पढ़ें John Resig's (jQuery पुस्तकालय के creater) lengthy article दस्तावेज खंडों