Bir işlemde çeşitli DOM işleme komutlarını kapsüllemek için bir yol var mı, böylece içerik "titreşimsiz" olmaz mı? Böyle bir şey:HTML DOM Çizim Hareketi Javascript?
window.stopDrawing(); // start transaction
$("#news").append("<div>a new news item</div>");
// ... do something more
$("#news").css("top", "-150px");
window.startDrawing(); // stop transaction
Her şey sen sadece tüm operasyonları gibi bir işlev oluşturdunuz elemanlarının büyük bir set güncellemeleri gerekir, mozRequestAnimationFrame (veya webkitRequestAnimationFrame) çağrısı, yalnızca işlev tamamen o değişiklikleri çekecektir yürütme bittikten sonra ekrana.
deDaha: https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame
Aslında, [requestAnimationFrame] (http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/Default.html) – sternr
olarak adlandırılan bu API'nin standartlaştırılmış bir sürümü var. Bu işlev, firefox veya chrome'da yok (I don ') IE 9 hakkında bilgi sahibi olmayın çünkü deneysel olduğundan, bu yüzden önekli sürümü kullanmanızı tavsiye ederim. – Shedokan
Senaryonun bile döngü döner yalnızca tarayıcılar belgeyi yeniden çizilmesi inanıyoruz, bu nedenle olmaz Senaryonuzun sonuna kadar bir şey oluşturur. Her neyse, bazı işlemler tarayıcıyı belge üzerindeki elemanların boyutlarını yeniden hesaplama gibi bazı masraflı işlemleri yapmaya zorlayabilir (ör. Bazı DOM manipulasyonları yapıldıktan sonra bir elemanın boyutlarını alırken). Bu yüzden DOM manipulasyonlarını mümkün olduğunca kapalı bir şekilde yapmalısınız. Bazı eleman üzerinde yapılacak birçok manipülasyonlar varsa
, , belge ağacının çıkarın senin manipülasyonlar yapmak ve tekrar ağaca eklemek için ucuz olabilir.
Tarayıcılar (daha yeni olanlar) bunu zaten dahili olarak yapabilirler. Ancak, açık bir kontrol yoktur. Gördüğünüz belirli bir durum hakkında daha fazla bilgi yazarsanız, bir kişi bir optimizasyon önerebilir. – Pointy