• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

CSS vs JS jeśli chodzi o wydajność

VPS Starter Arubacloud
+1 głos
240 wizyt
pytanie zadane 21 grudnia 2020 w JavaScript przez k222 Nałogowiec (30,150 p.)
Cześć, mam problem, ponieważ potrzebuję ułożyć komponenty na stronie i niezbyt mi to idze z samym CSSem, za to używając JSa dałoby się to prosto zrobić.

To co chcę osiągnąć, to wybrać wszystkie elementy danej klasy, znaleźć ten o najmniejszej długości i we wszystkich pozostałych ustawić taką samą długoś. Jak już wspominałem, w CSSie powoli wyczerpują mi się możliwości, za to JSie jest to jakieś 5 linijek, pewnie max w 10 bym się zmieścił, tylko boję się o wydajność. Tylko dodam że tych elementów na stronie będzie max kilkanaście, a zwykle poniżej 10.

Dlatego pytam się tutaj czy mógłby mi ktoś podpowiedzieć, jak to jest z tą wydajnością? Czy używanie JSa do zmiany rozmiaru lub innych własności komponentów, będących częścią ich wyglądu znacząco wpływa na szybkość działania strony internetowej?
1
komentarz 21 grudnia 2020 przez imklau Nałogowiec (42,090 p.)
Używasz flexa albo CSS Grid do "ułożenia" tych elementów? Czy inaczej jakoś to rozwiązujesz? One są obok siebie?
1
komentarz 21 grudnia 2020 przez JAKUBW Nałogowiec (33,470 p.)

@k222, Weź pod uwagę, że używając JS musisz wziąć pod uwagę wykrywanie zmian w layoucie takich jak dodawanie i usuwanie elementów, zmiana ich rozmiarów, zmiana rozmiaru elementu nadrzędnego czy zmiana rozmiaru i proporcji okna. To może bardzo, bardzo skomplikować kod lub jeżeli to zignorujesz to doprowadzisz do anomalii takich jak to że po zmniejszeniu okna elementy nadal są ogromne.  Do tego JavaScript może wykonywać się z opóźnieniem od zmiany rozmiaru okna, przez co nawet wydajny kod może 'lagować'.

W przypadku CSS zmiany są szybkie, natychmiastowe oraz zoptymalizowane przez przeglądarkę. Np. przeglądarka wie co się zmieniło i może nie robić niepotrzebnych operacji.

Myślę, że powinieneś użyć CSSa i wykorzystać jego wszechstronne możliwości. Niektóre rzeczy można dość łatwo zrobić gdy zna się flexa, grida, zmienne CSSowe, zapytania media, funkcje min, max, clamp, repeat i inne. Dodatkowo CSS ma dużo wydajniejsze animacje, więc jak przyjdzie ci coś animować to możesz to łatwo podpiąć.

1 odpowiedź

+1 głos
odpowiedź 21 grudnia 2020 przez VBService Ekspert (251,210 p.)
edycja 21 grudnia 2020 przez VBService

Tu jest opisana wydajność css-a "ustawianego" z poziomu kodu (rendering), czy css-a "ustawionego" z poziomu js-a CSS and JavaScript animation performance, pod koniec tego artykułu, mamy takie ...

Summary

Browsers are able to optimize rendering flows. In summary, we should always try to create our animations using CSS transitions/animations where possible. If your animations are really complex, you may have to rely on JavaScript-based animations instead.

... , ale nie potrzeba popadać w "paranoje", jeżeli jest taka potrzeba i nie ma tego "dużo" (css-a ustawianego z poziomu kodu js-a) można śmiało używać js-a (bez wyraźnego spadku wydajności), ale zawsze trzeba najpierw spróbować, czy nie da się tego zaimplementować w "czystym" css-ie. wink. Dobrym trikiem jest tu napsanie class w css-ie, a z poziomu kodu js-a używanie: element.classList

Property Description
length Returns the number of classes in the list.

This property is read-only

Methods

Method Description
add(class1, class2, ...) Adds one or more class names to an element.

If the specified class already exist, the class will not be added
contains(class) Returns a Boolean value, indicating whether an element has the specified class name.

Possible values:

  • true - the element contains the specified class name
  • false - the element does not contain the specified class name
item(index) Returns the class name with a specified index number from an element. Index starts at 0.

Returns null if the index is out of range
remove(class1, class2, ...) Removes one or more class names from an element.

Note: Removing a class that does not exist, does NOT throw an error
toggle(class, true|false) Toggles between a class name for an element.

The first parameter removes the specified class from an element, and returns false.
If the class does not exist, it is added to the element, and the return value is true.

The optional second parameter is a Boolean value that forces the class to be added or removed, regardless of whether or not it already existed. For example:

Remove a class: element.classList.toggle("classToRemove", false);
Add a class: element.classList.toggle("classToAdd", true);

Note: The second parameter is not supported in Internet Explorer or Opera 12 and earlier.

Podobne pytania

+2 głosów
2 odpowiedzi 391 wizyt
0 głosów
1 odpowiedź 327 wizyt
+1 głos
2 odpowiedzi 244 wizyt
pytanie zadane 17 września 2022 w JavaScript przez kordix Gaduła (3,910 p.)

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...