2009-08-31 13 views
14

Şimdiye kadar bir JS geliştiricisi yok (aslında, neredeyse hiç geliştirici :) ama belirli bir web sayfasında birkaç unsuru gizlemek için küçük bir Greasemonkey komut dosyası yazmayı denemek istedim. Bir kere dalga geçmeye başladığımda, jQuery'yi kullanmaya karar verdim, sadece bunu kolaylaştırmak için. Her şey yolunda gitti, senaryo çalışıyor, ama şimdi hazır, detayları merak etmeye başladım.Elemanların görünürlüğünü değiştirirken web tarayıcısının boyalarını nasıl dondururuz?

Komut dosyasının bir parçası olarak, önceki ve sonraki kardeşleriyle birlikte belirli bir öğe bulup gizlemem gerekiyor. O okunabilir değil ile sona erdi, ama çalışma satır: Burada

$('div#some-weird-box').prev().toggle(w).next().toggle(w).next().toggle(w); 

Benim endişe ben üç ayrı adımda üç ayrı div'leri kaldırarak olduğumu vardır. Bu, tarayıcının sayfayı üç kez "yeniden çizmesine" neden olur, değil mi? Bu üç div ile ilgili bir problem değil, muhtemelen daha fazla element olduğunda önemli olmaya başlayacaktı. Yani, sorum şu: tarayıcıya "sayfayı yenilemeyi/yeniden çizmeyi durdur" diyebilmenin bir yolu var mı? Varsa bunu kullanabilir, rastgele sayıdaki öğeyi gizleyebilir ve sonra tarayıcıyı ekrana güncellemesini isteyebilirim.

cevap

18

Bunun için endişelenecek bir şey yok.

Ben jsbin.com bu iyi bir örnek yayınladı: http://jsbin.com/ecuku/edit

Güncelleme: Genellikle DOM değiştirerek yeniden akışlara (değil repaints) neden oluyorsa, çünkü DOM dışında düğümleri değiştirmek için önerilir. Yeniden taramalar, tarayıcının bir şey değiştiği için sayfanızdaki konum ve boyutlardaki öğeleri yeniden hesaplaması gerektiğinde gerçekleşir. Javascript uygulamanız birden fazla yeniden akışa neden olsa da, yalnızca bir kez yeniden boyamaya neden olur (kodunuz bittiğinde). Bu yeniden akışlar büyük bir performans isabeti olabilir, ancak az sayıda DOM değişikliği için (örneğin, yalnızca 3 kodunuz varsa) muhtemelen değişikliklerinizi sayfanın dışında yapmak için çalışmaya değmez. Ayrıca, bir düğümü klonlamak ve sayfanın dışına yerleştirmeden önce onu değiştirmek, beklenmedik sonuçlara neden olabilir. Örneğin, olay işleyicileri eklendiyse, yeni düğümlere yeniden bağlanması gerekir. DOM ile işlem yapmanız gerekiyorsa, cloneNode hiçbir zaman iyi bir fikir değildir.

+1

İlginç. Bana gösterebileceğin iyi bir okuma var mı? Bu durumda, öğeyi ağaçtan kaldırmak, değişiklikleri uygulamak, sonra geri getirmek için tüm bu önerileri neden görüyorum? http://www.slideshare.net/nzakas/writing-efficient-javascript - slayt 77 veya 88 ...? – yacoob

+0

Bu oldukça cesur bir battaniye ifadesi, Bu zamanın% 100 olacağı söylenemez. –

+0

Ben battaniye beyanında bulunmadım. Yayınladığı kodla ilgili bir açıklama yaptım. Bununla ilgili endişelenecek bir şeyi yok. Herhangi bir tarayıcıda yalnızca bir rötuş görecek ve 3 düğümü değiştirdiğinde, düğümü klonlamamalı ve sayfanın dışına değiştirmemelidir. – Prestaul

2

cloneNode'u kullanabilirsiniz. Klonlamadan sonra tüm manipülasyonları klon üzerinde yapabilir ve orijinal düğüm yerine 'dan daha fazlasını yapabilirsiniz. Bu, görüntülediğinizde içeriğinizin yanıp sönmesini engeller: J-P'nin önerdiği gibi. Javascript yürütme, tarayıcıyı kilitler ve kod yürütme tamamlanana kadar bir rötuş görmezsiniz.

+0

Eski düğümdeki herhangi bir gönderme, klonlanan düğüme ve orijinal düğümdeki herhangi bir eventHandler kaybolmayacak şekilde güncellenmez. – Flexo

İlgili konular