Manipulacje jQuery DOM - porównanie wydajności?

Question

Uczę się manipulacji DOM za pomocą jQuery i chcę poznać najlepsze praktyki związane z przeglądarką.

Powiedzmy, że mam dwa elementy DOM (div, p, ol, itp.) I chcę, aby użytkownik zobaczył tylko pierwszy element, a następnie zobaczy tylko drugi element.

Mógłbym:

1. Korzystanie zastąpić()
2. usuń() pierwszy element i add() drugi element
3. hide() pierwszy element i show() drugi element

Jakie są różnice w wynikach pomiędzy:

• 1 vs 2
• 2 vs 3
• 1 vs 3

Czy istnieją dodatkowe uwarunkowania skuteczności jeśli elementy są różnych typów? A może elementy to przyciski lub pola formularzy?

Answer 1

Usuwanie i dodawanie elementów do DOM jest kosztowne pod względem zasobów z powodu browser reflow, gdzie przeglądarka musi ponownie renderować część lub całą stronę. Chcesz uniknąć reflows kiedy tylko możesz; są kosztowne.

Wymiana jest zasadniczo usuwanie, a następnie dodanie, więc powyższe dotyczy.

Pokazywanie i ukrywanie jest najlepsze, ponieważ dodaje tylko style do elementów.

Typy elementów, które stosujesz te metody również nie powinny prowadzić do zmian w powyższym.

Podsumowując, należy użyć .show() i .hide(), aby uzyskać najlepszą wydajność.

Answer 2

Zasadniczo, jeśli chcesz coś ukryć, a następnie pokazać później, najlepiej jest ukryć() i pokazać(). Nie zmieni to niczego w domenie, tylko zmieni sposób wyświetlania.