Büyük dizeler için javascript araç ipuçlarının performansını nasıl geliştirebilirim?

Question

Bir web sayfası için bir araç ipucu uygulamasında çalışıyorum ve bir kullanıcı bir sözcük üzerinde her hareket ettiğinde bir Javascript olayının tetiklenmesini istiyorum.

Şu anda tek tek her bir kelimenin etrafına bir <span> etiketi koyarak çalışıyorum, ör. <span id="word1">word1</span> <span id="word2">word2</span> <span id="word3">word3</span> ve ardından her biri için mouseover/out olaylarını ele alır.

Bu işlem tamam, ancak bazen giriş metni binlerce sözcüktür ve tüm bu etiketler tarayıcıyı yavaşlatır (en azından IE'yi yavaşlatır). Olay temsilcisini kullanıyorum, böylece binlerce etkinlik işleyicisi bağlı değil ve işlendiğinde yeterince hızlı. Sorun, tarayıcıyı işlemde dondurmak için innerHTML ile ayarladığımda tek tek etiketlenmiş sözcükleri oluşturmak için ilk sırada yer alabilen 8+ saniyedir.

(Düzenleme:. Sadece ne demek açıklığa kavuşturmak için - kullanıcı metin dizesi girdiğinde, bu ajax sunucuya gönderilen ve HTML etiketleri sunucu tarafında eklenir ajax başarı callback'inde, ben set öğenin innerHTML'sini doğrudan ayarlayarak yeni HTML. Gecikme, sunucu tarafındaki değil, innerHTML ayarındadır.)

Yine de <span id="line1">word1 word2 word3</span> olarak değiştirilebilecek ve hala çalışabilecek durumda mı? Kullanıcıların her birine ayrı bir etiket koymadan hangi özel kelimeyi kullandığını bilmenin bir yolu var mı?

Answer 1

this page'a rastladıktan sonra, bunun en azından bir dereceye kadar mümkün olduğu ortaya çıkıyor. Aşağıdaki çözüm sadece IE'de çalışır, ancak diğer tarayıcıların zaten tek tek etiket çözümüyle yeterince hızlı olduğu için ihtiyacım olan tek şey budur.

<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

Bu bağlantıya bir göz atın (nokta 7): http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip7.

Tüm açıklıklarınızı temelde tek bir span/div içinde kaplayacak ve ardından bu tek DOM öğesini ekleyeceksiniz.

Answer 3

kullanım Document Fragment's belgenize uzun HTML enjekte önce.

Oku John Resig's (jQuery kütüphanenin creater)