Najlepsze sposoby na zmniejszenie liczby elementów DOM

Question

Wszyscy zgadzają się, że mniej elementów DOM oznacza lepszą wydajność strony. Oznacza to lepszą wydajność javascript, szczególnie w starszych przeglądarkach.

Ale gdzie są najlepsze miejsca do zmniejszenia elementów DOM? Jakie są typowe osoby, które napotkaliście, a które są łatwymi krokami, aby zmniejszyć tę liczbę?

Answer 1

zastosowanie:

<ul id="navigation-main"> 
    etc.. 
</ul> 

w zastępstwie:

<div id="navigation-main"> 
    <ul> 
     etc.. 
    </ul> 
</div> 

... jeśli to możliwe, że jest. Czasami potrzebny jest dodatkowy div dla celów układu. Ale gdy nie jest to konieczne, nie używaj go.

Answer 2

Wszędzie tam, gdzie używasz elementu wpływającego na układ, zwykle jest to coś, o czym możesz pomyśleć. Często można używać mniej elementów w połączeniu z CSS, aby osiągnąć ten sam rezultat. Trudne reguły są trudne, ponieważ wiele zależy od konkretnego przypadku.

Answer 3

Jeśli używasz kontrolek serwera ASP.NET, to może być dobrym miejscem do rozpoczęcia. Niektóre kontrolki po stronie serwera, które świetnie nadają się do szybkiego tworzenia, będą renderować się z nadmiernym znaczeniem. Nie twierdzę, że nie używasz kontroli po stronie serwera, ale możesz znaleźć kilka modułów witryny, które są dobrymi kandydatami do redukcji DOM przez:

1) przepisanie znacznika samodzielnie lub 2) tworzenie znaczników za pomocą System.Web.UI.HtmlControls namespace.

Dobrymi kandydatami do tego podejścia są często występujące w witrynie elementy (nagłówek, stopka, menu nawigacyjne). Kandydaci również nie są często modyfikowani lub modyfikowani, chyba że czuje się komfortowo w utrzymaniu tego stylu.

Inną techniką specyficzną dla programu ASP.NET jest użycie funkcji System.Web.UI.WebControls.PlaceHolder do pracy z dynamiczną zamiast elementu div lub panelu z atrybutem runat="server". Formant symboli zastępczych nie renderuje żadnych dodatkowych elementów, a jedynie to, co do niego dodano.