Home > HTML5 > [PL] Wesołych świąt… z przeglądarką.

[PL] Wesołych świąt… z przeglądarką.

December 24, 2011 Leave a comment Go to comments

[EN] English version of this post you can find on Goyello blog.

[PL] W tym wyjątkowym dniu najlepiej zapomnieć o programowaniu, algorytmach, skąplikowanych zapytaniach LINQ i zająć się czymść przyjemniejszym. Na przykład możemy sprawdzić jak wydajna jest nasza przeglądarka sprawdzając ile płatków śniegu zdoła ona wyświetlić.

W zeszłym roku poruszałem podobny temat w moim poście analizując dwie aplikacje z IE Test Drive. Od tamtego czasu czekałem co nowego zespół MSu wymyśli nowego.

W końcu parę dni temu doczekałem się pewnego świątecznego demka o nazwie Let it snow. Szczerze nie byłem zainteresowany samym demkiem, ale wydajnością w różnych przeglądarkach.

Sprawdziłem to na moim stacjonarnym PCcie (Intel i7 950 @3.07GHz, NVidia GeForce 460 GTX) oraz przenośnym ‘tablecie’ (HP Tm2 Intel i5 U 470 @1.33 GHz, ATI Radeon HD 5450 lub Intel HD Graphics). Test uruchomiłem również pod Windows 8, który jest zainstalowany natywnie na HP.

100 250 500 1000 2000 4000 Auto
W7 PC IE 9 60 60 60 60 60 42 2300~2800
Chrome 5 5 5 5 5 4
Firefox 60 59 28 14 7 3 ~258 (~57fps)
Opera 6 6 6 5 5 4
HP IE 9 60 60 60 60 43 22 1300~1500
Chrome 4 4 4 4 4 3
Firefox 60 45 21 10 5 5 190~200
Opera 6 6 6 5 5 4
W8 IE 10 26 25 23 19 16 12 440~470 (53~55fps)
Chrome 4 4 4 4 4 3
Firefox 26 25 23 15 5 3
Opera 5 5 4 4 4 4

Tabela powyżej przedstawia wyniki: ile śnieżynek (100, 250, 500…) jest wyświeltanych oraz ile ramek na sekundę przeglądarka jest w stanie wyświetlić płatków. Użyłem do testu najnowszych dostępnych przeglądarek: Chrome 16.0.912.63, Firefox 9.0, Opera 11.90, IE 9, a na Windows 8 IE PP4).

Wyniki mówią za siebie i są najlepsze pod przeglądarkami IE. W sumie nie jestem zdziwiony tym faktem. Jest to także przykład, że przeglądarki różnią się mimo że są w większym stopniu zgodne są ze standardami HTML5. Z pewnością inne dema zrobione przez Google będą działały szybciej pod Chrome niż pod innymi przeglądarkami – dla przykładu wpisz w google Let it snow.

Niektóre wyniki są na prawdę ciekawe. Dlaczego IE 10 PP4 z 250 śnieżynkami ma gorszy rezultat niż automatyczne ustawienie, które wyświetla 450 płatków z 55fps. Można także zauważyć spadek wydajności zależnie od użytej karty graficznej. IE ma zdecydowanie gorsze wyniki pod Windows 8, który ma włączoną u mnie domyślnie kartę Intela. Inny problem jest taki, że jedynie Chrome i IE odtwarzają muzykę w tle.

Jak to działa ?

Muzyka w tle odtwarzana jest w tagu audio. Jako źródło użyty jest format mp3, który obsługiwany jest jedynie przez IE9+ i Chrome (możesz usłyszeć ją klikając w link do źródła). Grafika z płatkami śniegu odtwarzana jest canvas i używa requestAnimationFrame do rysowania płatków. Bałwanek i tablica są grafikami png. Rosnąca górka śniegu jest ścieżką svg. Jeżeli tablica jest przykryta śniegiem (do tego celu użyty został osobny canvas), można zrzucić śnieg za pomocą myszy lub dotyku (pod Windows 8). Taki prosty przykład może dać tyle frajdy.

Ukryta niespodzianka w zestawie

Wciskając sekretny przycisk (jest to F3 – ale ja musiałem zmodyfikować kod w IE Developer tool bar) – muzyka zmienia się na tą ścieżkę oraz bałwanek zmienia się na inny – możesz zobaczyć to na obrazku.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: