Hi,

Mam takie pytanie, w silnikach webkit i mozilla (ie oczywiscie nie
obsluguje) mozna zaokraglic np rogi (-webkit-border-radius:4px). No i
okej, zaokraglilem sobie rogi na stronie, mam dluga liste <li> - kazdy
element ma zaokraglone rogi i co sie dzieje: strona wygląda ładnie
dzięki temu, ale to zaokrąglanie powoduje, że wykorzystanie procesora
dla przeglądarki w komputerze z Core 2 Duo jest na poziomie 60% a w
zwykłym komputerze na poziomie 85%! Strona po prostu się tnie -
podczas przewijania oczywiście.

I teraz moje pytanie - czy to wina renderingu przeglądarki - że musi
poradzic sobie z zaokrągleniami - czyli extra mozliwosci css są dla
komputerów nowszych czy zle napisany kod css? A jesli zle napisany kod
to w jaki sposob go dobrze napisac, aby wydajnosc strony była
normalna.

Pozdr,
Cheaken

do góry

On Fri, 04 Jun 2010 11:01:25 +0100, Maciek <c...@g...com> wrote:

> Mam takie pytanie, w silnikach webkit i mozilla (ie oczywiscie nie
> obsluguje) mozna zaokraglic np rogi (-webkit-border-radius:4px). No i
> okej, zaokraglilem sobie rogi na stronie, mam dluga liste <li> - kazdy
> element ma zaokraglone rogi i co sie dzieje: strona wygląda ładnie
> dzięki temu, ale to zaokrąglanie powoduje, że wykorzystanie procesora
> dla przeglądarki w komputerze z Core 2 Duo jest na poziomie 60% a w
> zwykłym komputerze na poziomie 85%! Strona po prostu się tnie -
> podczas przewijania oczywiście.
>
> I teraz moje pytanie - czy to wina renderingu przeglądarki - że musi
> poradzic sobie z zaokrągleniami - czyli extra mozliwosci css są dla
> komputerów nowszych czy zle napisany kod css? A jesli zle napisany kod
> to w jaki sposob go dobrze napisac, aby wydajnosc strony była
> normalna.

Nie zauważyłem, żeby zaokrąglone rogi aż tak spowalniały. Daj linka do
przykładu.

--
http://pornel.net
this.author = new Geek("porneL");

do góry

W dniu 2010-06-04 22:26, porneL pisze:
> On Fri, 04 Jun 2010 11:01:25 +0100, Maciek <c...@g...com> wrote:
>
>> Mam takie pytanie, w silnikach webkit i mozilla (ie oczywiscie nie
>> obsluguje) mozna zaokraglic np rogi (-webkit-border-radius:4px). No i
>> okej, zaokraglilem sobie rogi na stronie, mam dluga liste <li> - kazdy
>> element ma zaokraglone rogi i co sie dzieje: strona wygląda ładnie
>> dzięki temu, ale to zaokrąglanie powoduje, że wykorzystanie procesora
>> dla przeglądarki w komputerze z Core 2 Duo jest na poziomie 60% a w
>> zwykłym komputerze na poziomie 85%! Strona po prostu się tnie -
>> podczas przewijania oczywiście.
>>
>> I teraz moje pytanie - czy to wina renderingu przeglądarki - że musi
>> poradzic sobie z zaokrągleniami - czyli extra mozliwosci css są dla
>> komputerów nowszych czy zle napisany kod css? A jesli zle napisany kod
>> to w jaki sposob go dobrze napisac, aby wydajnosc strony była
>> normalna.
>
> Nie zauważyłem, żeby zaokrąglone rogi aż tak spowalniały. Daj linka do
> przykładu.

Ja od siebie napiszę, że text-shadow mocno Firefoksa obciąża.

--
Peter

do góry

On 4 Cze, 22:26, porneL <n...@p...net> wrote:
> On Fri, 04 Jun 2010 11:01:25 +0100, Maciek <c...@g...com> wrote:
> > Mam takie pytanie, w silnikach webkit i mozilla (ie oczywiscie nie
> > obsluguje) mozna zaokraglic np rogi (-webkit-border-radius:4px). No i
> > okej, zaokraglilem sobie rogi na stronie, mam dluga liste <li> - kazdy
> > element ma zaokraglone rogi i co sie dzieje: strona wygląda ładnie
> > dzięki temu, ale to zaokrąglanie powoduje, że wykorzystanie procesora
> > dla przeglądarki w komputerze z Core 2 Duo jest na poziomie 60% a w
> > zwykłym komputerze na poziomie 85%! Strona po prostu się tnie -
> > podczas przewijania oczywiście.
>
> > I teraz moje pytanie - czy to wina renderingu przeglądarki - że musi
> > poradzic sobie z zaokrągleniami - czyli extra mozliwosci css są dla
> > komputerów nowszych czy zle napisany kod css? A jesli zle napisany kod
> > to w jaki sposob go dobrze napisac, aby wydajnosc strony była
> > normalna.
>
> Nie zauważyłem, żeby zaokrąglone rogi aż tak spowalniały. Daj linka do  
> przykładu.
>
> --http://pornel.net
> this.author = new Geek("porneL");

Hej,

dzięki za odpowiedź. Link podeślę później(przygotuję jakiś pogląd), bo
mam to w wewnętrznym systemie i nie mam jak tego publicznie pokazać.
Nie wiem na ile tez js wpływa na każdy element, popróbuję i jeszcze
dam znać.

Gdyby ktos już miał tego typu doświadczenia proszę o info.

pozdr.
cheaken

do góry

W dniu 2010-06-05 14:06, Maciek pisze:
> Gdyby ktos już miał tego typu doświadczenia proszę o info.

Jeśli mi coś działa wolno, to robię następujące kroki:

1. Wyłączam JavaScript, aby sprawdzić czy jego działanie ma wpływ na
komfort pracy.
2. Jeśli po wyłączeniu JS nadal jest wolno, to badam arkusz stylów (lub
arkusze stylów, jeśli jest kilka).
3. Jeśli po wyłączeniu JS jest lepiej, to znaczy, że gdzieś w kodzie JS
znajduje się "spowalniacz". Trzeba wtedy sprawdzić czas działania każdej
funkcji i ewentualnie słabe punkty eliminować.
4. Arkusz stylów badam w ten sposób, że wycinam po kolei po drobnym
kawałku z niego i sprawdzam jak zachowuje się przeglądarka. W ten sposób
dochodzę do miejsca, które mocno obciąża przeglądarkę. M.in. tak
doszedłem do tego, że -moz-box-shadow i text-shadow w dużej ilości na
stronie obciążają Firefoksa. Tak samo bardzo powoli renderuje <select>-a
Firefox, jeśli chcemy mu dodać "zebrę":

select option:nth-child(even){
background-color:#eee;
}

Przy kilku nie ma znaczenia, ale jeśli <select> ma już kilkaset
elementów <option>, to już Firefox bardzo spowalnia przy renderowaniu listy.

W innych przeglądarkach nie ma to wpływu żadnego. Ogólnie rzecz biorąc w
ostatnim czasie najbardziej musiałem optymalizować kod pod Firefoksa.
Mówiąc krótko: "stał się przyciężką przeglądarką". Dość dużo działań
zabiera mu zbyt dużo czasu. To, co np. Opera wykona w JS w np. 23 ms, to
Firefox potrafi w 523ms. A to już jest znaczna różnica.

--
Peter

do góry

Posprawdzałem wszystko, robiłem cuda, wyłączałem css całkiem,
wyłączałem przezroczyste pliki png.

Co się okazało. Używałem suggestera. Wyłączyłem suggester i ... jak
ręką odjął. Moge wrzucac cienie, zaokraglenia, cienie pod stekstem,
cienie pod boxami, pełne mozliwosci css 3 i przegladarka moze w 5%
odczuwa zmiany. Jakis kosmos! Skontaktuje sie z Panami z suggestera i
sie dowiem czym to bylo spowodowane. Jednak testy jakie
przeprowadzilem dowiodly w 95% ze css 3 - jego mozliwosci wplywaja
moze w 5-max 10% na obciazenie procesora, a nie w 80%! jak to bylo z
sugesterem.

Pozdrawiam,
cheaken

ps. zachęcam do zobaczenia juz publicznie www.lit.pl - w nowej
odswiezonej grafice

do góry