javascript/dom - dom düğümlerin yeniden düzenlenmesi vs ne kadar pahalı oluyor?

Question

Yazdığım bir sıralanabilir tabloyu optimize etmeye çalışıyorum. Darboğaz dom manipülasyonunda. Şu anda tabloyu sıraladığım her zaman yeni tablo satırları oluşturup bunları ekliyorum. Hatları yeniden düzenlemek değil, sıraları yeniden düzenleyerek işleri hızlandırabilir miyim diye merak ediyorum. Bunun önemli bir fark yaratması için, düğümün yeniden düzenlenmesi, düğüm oluşturmadan çok daha fazla yanıltıcı olmalıdır. Bu dava mı? sayesinde -Morgan

Bazı kriterler için kullanışlı bu sayfayı bulabilir

Answer 1

:

http://www.quirksmode.org/dom/innerhtml.html

Answer 2

oluşturmadan veya manipüle hızlı olup olmadığını bilmiyorum, ama olacağım biliyorum Tüm tabloyu, sayfada bulunmadığında ve daha sonra bir kerede tümüyle değiştirdiğinizde daha hızlı. Bu satırlar boyunca, muhtemelen tüm tablo DOM'dan kaldırılmamışsa, mevcut satırları yeniden düzenlemek daha yavaş olacaktır.

This page, geçerli tabloyu klonlamak, istediğiniz gibi değiştirmek ve DOM üzerindeki tabloyu değiştirmek için en hızlı olacağını önerir.

Answer 3

Ben bir dize olarak tüm içeriğini bina yerine düğümleri tek-by ekleme innerHTML kullanarak, şu an yaklaşık iki kat daha hızlı bir şekilde bu tabloyu çiziyorum.

Answer 4

Eğer yapabilirsen, gerçek dom manipülasyon olarak değil dom manipülasyon yapmak daha iyidir, ancak komut dosyası içinde yöntemle ve daha sonra dom manipüle çeşit olarak. Yani daha doğrusu her düğümde bir rötuş ne denir yapmaktansa, sen neden daha sonra gerçek dom bağlı olacağını bir ebeveyn içine bu düğümleri takmak sonra kendi yöntem haline her düğüm üzerinde rötuş ne olurdu kümelenir ve yüzlerce yerine sadece iki repaints. Yeni verilerinizle güncellemeden önce iki b/c'nin dom içinde ne olduğunu temizlemeniz gerektiğini söylüyorum.

Answer 5

Bunun bir cevap arıyordu ve böylece saf bir kriter değildir ve çok başka yollarla muhtemelen çarpık var, o jQuery kullanan hızlı bir kriter http://jsfiddle.net/wheresrhys/2g6Dn/6/

kurmaya karar verdi. Ama verir sonuç DOM düğümleri hareketli her zaman