która metoda jest najlepsza dr inż. Marek Żabka Instytut Matematyki Wydział Matematyki Stosowanej Politechnika Śląska 20 września 2012r
Nowa metoda tworzenia grafiki na stronie internetowej: element,,canvas + JavaSript Można zadać pytania: Czy lepiej używać nowej metody czy raczej tradycyjnych? W jakich sytuacjach nowa metoda jest ewentualnie lepsza? Czy zależy to od przeglądarki?
Element,,canvas + JavaScript Język PHP pakiet,,gd2 Język C pakiet,,gd, (1) (1) z plikiem PHP użytym w roli pośrednika
Miejsce wykonania Canvas+JavaScript PHP Język C Klient Serwer Serwer Praca Bez kompilacji Bez kompilacji Po kompilacji Zależność od przeglądarki Alternatywa Możliwości powstawania stopniowego Duża, IE dopiero od IE9 Łatwo wstawić kod alternatywny Można tworzyć w krokach, widać postęp Niezależne Niezależne Automatycznie tekst (atrybut alt= napis ) Jednorazowo cały obrazek, potem następny ale cały od nowa.
1. Zwykłe, cienkie linie, okręgi oraz prostokąty w różnych kolorach 2. Grube linie, okręgi oraz prostokąty. Grubość zmienna 3. Rekurencyjne tworzenie grafiki 4. Fraktal, czyli dużo obliczeń + manipulacje na poziomie pikseli 5. Filtry graficzne (niestandardowe), też operacje na pikselach, różne głębokości barwne.
Serwer Xamp (oparty o Apache 2) Klient na tym samym komputerze 1) Google Chrome 21 2) IE 9 3) Firefox 14 4) Opera 12 5) Safari 5
Dla Canvas+JavaScript: Testy 1 do 4 po 16 razy na każdym kliencie Test 5 ma 3 wersje po 4 grafiki: 24b, 8b, 2b Każdą wersję wykonujemy po 16 razy (4 grafiki po 4 razy) Obliczamy średnie czasy Dla PHP oraz C Testy po 4 razy dla każdej z 5 przeglądarek, ale uśredniamy razem Łącznie uzyskujemy 7 x 7 serii wyników,
Strony startują automatycznie po załadowaniu Po zakończeniu pojedynczego testu, czas pracy jest zapisany w pliku, a potem automatycznie zostaje załadowana następna strona. Po zakończeniu testu na jedną przeglądarkę uruchomiony został test na następnej przeglądarce (prawie zawsze chodziła 1 przeglądarka + serwer) Czasy zostały uśrednione Komputer: 4 x Intel Core 2 Quad CPU Q6600 @ 2,40 GHz Nvidia GeForce 9800GT RAM: 4 GB System: Windows 7 Professional (64bity) Indeks wydajności: 5,9
Język C powinien być najszybszy Języki JavaScript oraz PHP powinny być porównywalne
Sekundy Polega na rysowaniu losowo 5000 linii, okręgów oraz prostokątów 7 6 5 4 3 2 1 Internet Serwer JavaSript 0 Google Chrome IE9 Firefox Opera Safari PHP C Zwraca uwagę ponad 10 krotna przewaga Google Chrome nad Firefox Program napisany w C jest kilkukrotnie wolniejszy od języka PHP
Sekundy 9 8 Polega na rysowaniu losowo 1000 linii, okręgów oraz prostokątów z losową grubością 7 6 5 4 3 2 Internet Serwer JavaSript IE9 jest tu lepszy od Google Chrome Program napisany w C jest za wolny Problemem był tu brak prawidłowo rysowanych grubych linii w C oraz PHP zastosowane zostały wypełnienia prostokątów rysowanych 4 odcinkami oraz wielokrotne rysowanie okręgów o różnych promieniach 1 0
Tu test rekurencyjnego rysowania, 9 wywołań w głąb 700 600 500 400 300 200 100 Internet Serwer JavaSript 0 Zwraca uwagę duży czas przesyłania obrazu w stosunku do jego uzyskania Tu najlepsza jest Opera
Rysowanie klasycznego fraktala 12000 10000 8000 6000 4000 2000 0 Internet Serwer JavaScript Zbiór Mandelbrota Tu przeprowadzamy stosunkowo dużo obliczeń matematycznych Konieczny jest dostęp do pojedynczych pikseli Występuje wyraźna przewaga programu w języku C PHP odstaje (dostęp do pikseli łatwy, ale wolny) Tu z przeglądarek najlepszy jest Firefox
Przekształcenie obrazka (24 bity) praca na pikselach 16000 14000 12000 10000 8000 6000 4000 Internet Serwer JavaScript 2000 0 Praca na pikselach, tylko kopiowanie, bez obliczeń PHP bardzo wolny, wymagana lepsza biblioteka niż bgd Czas w przeglądarkach porównywalny do pracy w języku C Dla obrazów 8 bit. oraz 2 bit. czas dla języka C jest jeszcze krótszy
Proste rysunki linie kółka itd.: PHP lub JavaScript, PHP: Dane są na serwerze (np. w bazie) Konieczne zapisanie rys. JavaScript Dane są lokalne na przeglądarce Dane są zmieniane z natychmiastowym efektem Rysunku nie trzeba zapisać
Operacje na pikselach (np. filtry graficzne, fraktale) JavaScript lub język C JavaScript Ciekawią nas etapy powstawania efektu (nawet animacja) Zapis nie zawsze konieczny Dane są dostępne lokalnie Język C Zapis na serwerze Złożone obliczenia Konieczne dane z bazy
Warto pisać strony z elementem canvas+javascript Szybkość JavaScript jest często porównywalna z kompilowanym językiem C Ponieważ Internet Explorer dopiero od wersji 9 obsługuje canvas, więc trzeba przygotować wersje alternatywne. Stąd czasem warto pozostać przy PHP lub języku C W niedalekiej przyszłości element canvas+javasript może być często stosowaną technologią w Internecie.
Testy są dostępne na stronie: Tales.ms.polsl.pl/marek.zabka Warto by przeprowadzić dodatkowe testy z PHP inne nowsze biblioteki Flash