Front-end (css) optymalizacja

Front-end (css) optymalizacja
PO
  • Rejestracja:prawie 9 lat
  • Ostatnio:prawie 9 lat
  • Lokalizacja:Starogard Gdański
  • Postów:11
0

Cześć,

Co myślicie o zwracaniu szczególnej uwagi na dobicie do 60fps-ów przy programowaniu frontu? Ostatnio usłyszałem opinie, że to nie ma sensu, ponieważ 'telefon, który pewnie masz w kieszeni ma na tyle pamięci aby poradzić sobie z płynnym malowaniem strony'.

Ja jestem fanem świadomego pisania w cssie i zastanawiam się czy faktycznie większość frontendowców uważa, że w dobie mocnych sprzętów nie ma sensu zbytnio spuszczać się nad wydajnością.

Poniżej linki na temat wydajności:

edytowany 1x, ostatnio: p.ossowski
grski
  • Rejestracja:ponad 9 lat
  • Ostatnio:8 miesięcy
  • Postów:245
3

Moim skromnym zdaniem więcej z tym zachodu niż to warto. No może javascripta czasem się przyda zoptymalizować, kod wyczyścić, ale żeby css'y czy inne sprawy, to niekoniecznie. Po prostu czysty, poprawny kod i tyle.
To nie '80, że każdy bajt się liczy. Liczy się za to czas programisty, bo jest on znacznie droższy od czasu pracy serwera, a na takie coś raczej dość dużo by trzeba go poświęcić.


Napisałem książkę - Programowanie z Górskim: Junior Python Developer
Pora na następny krok na drodze po pierwszą pracę w it i WCALE-NIE-MITYCZNE #programista40k? Zapraszam.
hauleth
Tylko, że tu nie chodzi o czas serwera a o czas klienta. Zwłaszcza klienta mobilnego.
PO
  • Rejestracja:prawie 9 lat
  • Ostatnio:prawie 9 lat
  • Lokalizacja:Starogard Gdański
  • Postów:11
0

Ja mam zupełnie odwrotne zdanie na ten temat. Według mnie diabeł tkwi w szczegółach. W świecie te tematy żyją i mają się dobrze. Dlatego jestem ciekawy jakie jest zdanie ludzi z rodzimej branży.

A co do zasobów serwera to nie ma to nic wspólnego chyba, że liczymy kb wysłane przez serwer.

mr_jaro
  • Rejestracja:ponad 13 lat
  • Ostatnio:około 3 lata
  • Lokalizacja:Grudziądz/Bydgoszcz
  • Postów:5300
4

Osobiście czystego cssu to już nie piszę, wszystko w sass, kompilowane i optymalizowane przez gulpa. Ja zwracam uwagę nie na cssy ale na grafiki. Mój zestaw optymalizatorów to pngslim i mozjpeg. Nie jedna strona dostała drugie życie tylko po zmniejszeniu wielkości grafik bez straty jakości.


It's All About the Game.
czysteskarpety
czysteskarpety
  • Rejestracja:prawie 10 lat
  • Ostatnio:ponad 4 lata
  • Lokalizacja:Piwnica
  • Postów:7697
0

mogę się tylko zgodzić z @mr_jaro nawet ostatnio przeglądałem stronki na laravelu i ze zdziwieniem zobaczyłem, że backend super, a właśnie jpegi\png klocki po pół mega, aż dziw że ludzie tego nie pilnują (podobnie np. z kompresją gzip czy cache)


SK
  • Rejestracja:około 9 lat
  • Ostatnio:ponad 8 lat
  • Postów:68
0

Nawet nie byłem świadomy tego klatkowania :D

Imo jeśli projekt mały za małe pieniądze i klient nie siedzi w 'css performance', to nie ma co się za bardzo tym przejmować.
Warto mieć jednak na uwadze, że coś takiego istnieje i jeśli nie wymaga to więcej 'klepania', czy myślenia to warto zastosować :)

0
grski napisał(a):

Moim skromnym zdaniem więcej z tym zachodu niż to warto. No może javascripta czasem się przyda zoptymalizować, kod wyczyścić, ale żeby css'y czy inne sprawy, to niekoniecznie. Po prostu czysty, poprawny kod i tyle.
To nie '80, że każdy bajt się liczy. Liczy się za to czas programisty, bo jest on znacznie droższy od czasu pracy serwera, a na takie coś raczej dość dużo by trzeba go poświęcić.

Idąc właśnie takim rozumowaniem, dlatego teraz żeby używać przeglądarki FireFox dosyć komfortowo potrzebujesz minimum 8-16gb ramu.

ŁF
Raczej okolice 1GB na samą przeglądarkę, czyli 4GB spokojnie na cały system powinno wystarczyć, ale masz 100% racji, że przeglądarki pożerają zbyt duże ilości pamięci. Od jakiegoś czasu grywam sobie w starożytne Settlers II, i tam cała gra zajmuje w pamięci kilkaset kB... Jak daleko zaszliśmy od tego czasu :/
aurel
@ŁF, zależy, w jaki sposób używasz przeglądarki - niektórzy lubię mieć 3 okienka po 100 zakładek w tym 5 youtube'ów ;)
ŁF
Mam jakieś 20 zakładek, ale jak ilość pamięci zeżarta przez FF robi się większa od 1GB, to restartuję FF.
ŁF
Moderator
  • Rejestracja:ponad 22 lata
  • Ostatnio:dzień
0
p.ossowski napisał(a):

'telefon, który pewnie masz w kieszeni ma na tyle pamięci aby poradzić sobie z płynnym malowaniem strony'.

Co ma ilość pamięci do płynnego renderowania strony? Za szybkość odpowiedzialne jest CPU i GPU, a nie RAM.


mr_jaro
  • Rejestracja:ponad 13 lat
  • Ostatnio:około 3 lata
  • Lokalizacja:Grudziądz/Bydgoszcz
  • Postów:5300
0

Problem polega na tym, ze co ci da optymalizacja css gdy klient chce mieć coś oparte o angulara przy którym css to pikuś :p


It's All About the Game.
spartanPAGE
mówisz o tym tak, jakby biczowanie się w surowym js miałby być w jakiś sposób przyjemniejsze :p
mr_jaro
@spartanPAGE mówię o tym względem ciężkości aplikacji dla pamięci i procesora i czysty js jest w tym względzie "przyjemniejszy" dla przeglądarki
LI
@mr_jaro frameworki aż tak mocno obciążają? JQuery też? Czy angular to bestia w kwestii frameworków na JS? W sensie obciążenia.
LI
angular rozwala system...
MA
  • Rejestracja:ponad 8 lat
  • Ostatnio:około 7 lat
  • Lokalizacja:Göteborg, Szwecja
  • Postów:3
0

Miałem styczność ze stronami, w których animacje w css dość mocno potrafiły rozgrzać komputer. Generalnie jestem zdania, że warto wykonywać takie optymalizacje, jeśli masz tego świadomość. Jeśli wejdzie Ci to w nawyk, to nie jest to ani czasochłonne, a zawsze lepiej się patrzy na stronę, która płynnie działa. Warto też zwrócić uwagę na optymalizacje obrazków, bo to ostatnio zaczyna być spory problem. Widać strony, na których ładuje się obrazek 4-5mb. Gulp też sporo pomaga w optymalizacji. Na filmiku z YT było, ale warto jeszcze dodatkowo poczytać o https://dev.opera.com/articles/css-will-change-property/

LI
  • Rejestracja:około 11 lat
  • Ostatnio:ponad 3 lata
  • Postów:518
1

Przy frontendzie ma w ogóle sens 60 fps? Oglądałam program na ten temat w związku z grami wideo. Poprawa następuje w pewnych sytuacjach, ale lepiej aby było już 30 FPS niż jakby miało skakać. 60 FPS daje ułamki sekund(chyba ułamki a nie sekundy), mogą one się przydać w niektórych grach ponieważ zmniejsza to czas reakcji więcej widzisz możesz, szybciej zareagować.

Czy osoba która przegląda Twoją stronę potrzebuje tych ułamków sekund? Jak grasz to fajnie gdy szybciej reagujesz czasem o powodzeniu czy o wyniku stanowią właśnie ułamki sekund w reakcji. Na stronie to chyba nie jest potrzebne. Jeśli to jakaś gra na telefon, to chyba też nie ma sensu. Zakładam że jeśli to gra, to bardzo prosta dla relaksu. W takich grach raczej nikt nie zwraca takiej uwagi na wynik czy FPS. Znaczy wynik też ma znaczenie ale nie przesadzajmy.


Life is Strange
Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)