Przerywanie płynności okna przeglądarki podczas rozciągania


(WooQash) #1

Witam. Mam pewien problem z optymalizacją tworzonej strony, używam Google Chrome i wykonałem pewien test a mianowicie otworzyłem tę stronę i rozciągałem przeglądarkę w lewo i w prawo. Podczas przesuwania widoczne jest dość duże przerywanie płynności, dla testy otworzyłem inne strony takie jak onet czy tvn24 w których takiego efektu nie ma. Strona stworzona jest w standardzie html5/css3 i prawie zgodna ze standardami w3c (posiada kilka mniej ważnych błędów). Problem w tym, że nie wiem jak by się tego pozbyć, z tego co się zorientowałem to winę za to ponosi spora ilość kodu css3 który dość spowalnia stronę czyli gradienty, obramowania czy zaokrąglenia. Czy można temu zaradzić?


(manieKMP) #2

"...z tego co się zorientowałem to winę za to ponosi spora ilość kodu css3 który dość spowalnia stronę..."

A ile linii ma Twój arkusz stylu, jaki jest jego rozmiar? Rozumiem, że nie masz jakiś animacji (js/flash/gif) na stronie, jest zastosowane tylko to co podałeś?

Jeśli to faktycznie wina "rozpasanego" css'a to będziesz miał najprawdopodobniej niemiły zaszczyt jego optymalizacji, która będzie polegała na:

  • scaleniu wartości/własności powtarzających się, np. z

    .element1 {color:red; width:100px;}

    .element2 {color:green; width:200px;}

    .element3 {color:red; width:100px;}

na

.element1, .element3 {color:red; width:100px;}

.element2 {color:green; width:200px;}
  • dokonaniu kompresji plik(u)ów css (usuwane są niepotrzebne białe znaki, cały kod będzie w jednej linii - przed kompresją rób kopię, żebyś mógł dokonywać zmian w css'ie w cywilizowany sposób :wink:, a to co będzie na serwerze będzie skompresowaną wersją)

  • rozdzielaniu kodu na kilka plików css, oczywiście jeśli wiesz, że jakaś część nie jest używana na danej stronie (po co ma być wczytywana, skoro leży odłogiem)

  • zastosowaniu sprite'ów, jeśli korzystasz z plików graficznych (scalone w jedno grafiki, mniej odwołań, zmniejszone zapotrzebowanie na zasoby systemowe itp.)

W ostateczności będziesz musiał pójść na kompromis i zrezygnować z części fajerwerków wizualnych lub zastosować ekwiwalent, np. zamiast gradientu w css, dać zamiennik w postaci grafiki z repeat'erem ("klonowany" cienki pasek grafiki, "udający" tło gradientowe).

To chyba tyle (może mi coś z głowy wyleciało :wink:)


(WooQash) #3

Rozpocząłem budowanie kodu od początku, bo dodaniu jednego większego elementu zawierającego gradient i zaokrąglenia już był odczuwalny spadek płynności. Po za tym co napisałeś manieKMP , to jedyne co mogłem zrobić to dokonanie kompresji pliku, bo reszta jest względnie w najkrótszej postaci. Będę zmuszony używać standardowych grafik. Może gdy silniki przeglądarek będą już na tyle dopracowany by najnowsze technologie działały sprawnie wrócę do takiego budowania stron. Ok, dziękuję.