Jakie jest najlepsze podejście do tworzenia elementów w locie i możliwości ich przenoszenia? Załóżmy na przykład, że chcę utworzyć prostokąt, okrąg i wielokąt, a następnie wybrać te obiekty i przesunąć je.
Rozumiem, że HTML5 zapewnia trzy elementy, które mogą to umożliwić: svg , canvas i div . Co chcę zrobić, który z tych elementów zapewni najlepszą wydajność?
Aby porównać te podejścia, zastanawiałem się nad stworzeniem trzech wizualnie identycznych stron internetowych, z których każda zawiera nagłówek, stopkę, widżet i treść tekstową. Widżet na pierwszej stronie zostałby utworzony w całości z canvas
elementem, drugi w całości z svg
elementem, a trzeci z prostym div
elementem, HTML i CSS.
javascript
html
svg
html5-canvas
verdy
źródło
źródło
Odpowiedzi:
Krótka odpowiedź:
SVG byłoby łatwiejsze dla Ciebie , ponieważ zaznaczanie i przenoszenie jest już wbudowane. Obiekty SVG są obiektami DOM, więc mają procedury obsługi „klikania” itp.
DIV są w porządku, ale niezgrabne i mają okropne wyniki ładowania przy dużej liczbie.
Canvas ma najlepszą wydajność, ale musisz samodzielnie wdrożyć wszystkie koncepcje stanu zarządzanego (wybór obiektu itp.) Lub użyć biblioteki.
Długa odpowiedź:
HTML5 Canvas to po prostu powierzchnia do rysowania mapy bitowej. Ustawiłeś rysować (powiedz z kolorem i grubością linii), narysuj tę rzecz, a następnie Płótno nie ma o tym żadnej wiedzy: nie wie, gdzie to jest ani co jest właśnie narysowane, to jest tylko piksele. Jeśli chcesz narysować prostokąty i pozwolić im się poruszać lub wybierać, musisz zakodować wszystko od zera, w tym kod, aby pamiętać, że je narysowałeś.
Z drugiej strony SVG musi utrzymywać odniesienia do każdego renderowanego obiektu. Każdy tworzony element SVG / VML jest prawdziwym elementem w DOM. Domyślnie pozwala to na znacznie lepsze śledzenie tworzonych elementów i sprawia, że radzenie sobie z takimi rzeczami jak zdarzenia myszy jest łatwiejsze, ale znacznie spowalnia, gdy istnieje duża liczba obiektów
Te odniesienia do SVG DOM oznaczają, że część pracy związanej z rysowaniem rzeczy jest zrobiona za Ciebie. A SVG jest szybszy podczas renderowania naprawdę dużych obiektów, ale wolniejszy podczas renderowania wielu obiektów.
Gra byłaby prawdopodobnie szybsza w Canvas. Ogromny program mapowy byłby prawdopodobnie szybszy w SVG. Jeśli chcesz korzystać z Canvas, mam tutaj tutoriale na temat uruchamiania ruchomych obiektów i uruchamiania ich tutaj .
Płótno byłoby lepsze do szybszych rzeczy i ciężkich operacji bitmapowych (takich jak animacja), ale zajmie więcej kodu, jeśli chcesz dużo interaktywności.
Znalazłem wiele liczb na rysunku wykonanym w HTML DIV w porównaniu do rysunku na płótnie. Mógłbym napisać ogromny post o zaletach każdego z nich, ale podam kilka istotnych wyników moich testów do rozważenia dla konkretnego zastosowania:
Zrobiłem strony testowe Canvas i HTML DIV, obie miały ruchome „węzły”. Węzły Canvas to obiekty, które utworzyłem i które śledziłem w Javascript. Węzły HTML były ruchomymi divami.
Dodałem 100 000 węzłów do każdego z moich dwóch testów. Wystąpili zupełnie inaczej:
Załadowanie karty testowej HTML trwało wieczność (czas trwania nieco poniżej 5 minut, Chrome poprosił o zabicie strony za pierwszym razem). Menedżer zadań Chrome twierdzi, że karta zajmuje 168 MB. Zajmuje to 12–13% czasu procesora, gdy na niego patrzę, 0%, gdy nie patrzę.
Karta Canvas ładowana jest w ciągu jednej sekundy i zajmuje 30 MB. Zajmuje również 13% czasu procesora przez cały czas, niezależnie od tego, czy ktoś na to patrzy. (Edycja 2013: Naprawiono to głównie)
Przeciąganie na stronie HTML jest płynniejsze, czego oczekuje projekt, ponieważ obecna konfiguracja polega na przerysowaniu WSZYSTKO co 30 milisekund w teście Canvas. W tym celu można zoptymalizować Canvas. (najłatwiejsze jest unieważnienie obszaru roboczego, także wycinanie regionów, wybiórcze przerysowywanie itp. zależy tylko od tego, jak bardzo chcesz się wdrożyć)
Nie ma wątpliwości, że Canvas może być szybszy w manipulowaniu obiektami, ponieważ div w tym prostym teście, i oczywiście znacznie szybciej w czasie ładowania. Rysowanie / ładowanie jest szybsze w kanwie i ma również znacznie więcej miejsca na optymalizacje (tj. Wykluczanie rzeczy, które są poza ekranem, jest bardzo łatwe).
Wniosek:
źródło
background-image
Aby dodać do tego, robiłem aplikację diagramu i początkowo zacząłem od canvas. Schemat składa się z wielu węzłów i mogą one być dość duże. Użytkownik może przeciągać elementy na diagramie.
Odkryłem, że na moim komputerze Mac, w przypadku bardzo dużych obrazów, SVG jest lepszy. Mam MacBooka Pro 2013 13 "Retina, która dość dobrze biegnie pod skrzynką. Obraz ma wymiary 6000 x 6000 pikseli i zawiera 1000 obiektów. Podobna konstrukcja płótna była dla mnie niemożliwa do animacji, gdy użytkownik przeciągał obiekty w diagram.
Na nowoczesnych wyświetlaczach musisz również uwzględnić różne rozdzielczości, a tutaj SVG daje to wszystko za darmo.
Skrzypce: http://jsfiddle.net/knutsi/PUcr8/16/
Pełny ekran: http://jsfiddle.net/knutsi/PUcr8/16/embedded/result/
źródło
Znajomość różnic między SVG a Canvas byłaby pomocna w wyborze właściwego.
Brezentowy
SVG
źródło
Zgadzam się z wnioskami Simona Sarrisa:
Porównałem niektóre wizualizacje w Protovis (SVG) do Processingjs (Canvas), które wyświetlają> 2000 punktów, a przetwarzanie js jest znacznie szybsze niż protovis.
Obsługa zdarzeń za pomocą SVG jest oczywiście o wiele łatwiejsza, ponieważ możesz dołączyć je do obiektów. W Canvas musisz to zrobić ręcznie (sprawdź pozycję myszy itp.), Ale dla prostej interakcji nie powinno to być trudne.
Istnieje również dojo.gfx biblioteka zestawu narzędzi dojo. Zapewnia warstwę abstrakcji i można określić moduł renderujący (SVG, Canvas, Silverlight). Może to być również realny wybór, chociaż nie wiem, ile narzutu dodaje dodatkowa warstwa abstrakcji, ale ułatwia kodowanie interakcji i animacji i jest niezależny od renderera.
Oto kilka interesujących punktów odniesienia:
źródło
Tylko moje 2 centy dotyczące opcji div.
Famous / Infamous i SamsaraJS (i ewentualnie inni) używają absolutnie pozycjonowanych, nie zagnieżdżonych div (z nietrywialnymi treściami HTML / CSS), w połączeniu z matrix2d / matrix3d do pozycjonowania i transformacji 2D / 3D, i osiągają stabilny 60 FPS na umiarkowanym mobilnym sprzęcie , więc argumentowałbym przeciwko temu, by divs było opcją powolną.
Istnieje wiele nagrań ekranu na Youtube i innych miejscach, z wydajnymi materiałami 2D / 3D uruchomionymi w przeglądarce, przy czym wszystko jest elementem DOM, na którym można sprawdzić element , przy 60 klatkach na sekundę (zmieszane z WebGL dla pewnych efektów, ale nie dla główna część renderowania).
źródło
Chociaż w większości powyższych odpowiedzi jest trochę prawdy, myślę, że zasługują one na aktualizację:
Przez lata wydajność SVG znacznie się poprawiła, a teraz dostępne są przyspieszane sprzętowo przejścia CSS i animacje SVG, które wcale nie zależą od wydajności JavaScript. Oczywiście poprawiła się także wydajność JavaScript, a wraz z nią wydajność Canvas, ale nie tak bardzo, jak poprawiła się SVG. Jest też „nowy dzieciak” na bloku, który jest obecnie dostępny w prawie wszystkich przeglądarkach i to jest WebGL . Aby użyć tych samych słów, których Simon użył powyżej: bije zarówno Canvas, jak i SVG . Nie oznacza to jednak, że powinna to być technologia, ponieważ jest to bestia do pracy i jest szybsza tylko w bardzo szczególnych przypadkach użycia.
IMHO dla większości dzisiejszych przypadków użycia, SVG zapewnia najlepszy stosunek wydajności do użyteczności. Wizualizacje muszą być naprawdę złożone (pod względem liczby elementów) i jednocześnie bardzo proste (na element), aby Canvas i jeszcze bardziej WebGL naprawdę świeciły.
W tej odpowiedzi na podobne pytanie podaję więcej szczegółów, dlaczego uważam, że połączenie wszystkich trzech technologii jest czasami najlepszą opcją, jaką masz.
źródło
layers.acceleration.force-enabled
w Firefoksie nie chodzi o dekodowanie wideo. To dobrze znany fakt. Po wykonaniu pętli za pomocą requestAnimationFrame jest inny poziom, pozwalający na znacznie więcej odświeżeń. W ogóle nie chodzi o wideo.Do swoich celów zalecam używanie SVG, ponieważ otrzymujesz zdarzenia DOM, takie jak obsługa myszy, w tym przeciąganie i upuszczanie, nie musisz implementować własnego przerysowywania i nie musisz śledzić stanu twoje przedmioty. Użyj Canvas, gdy musisz manipulować obrazami bitmapowymi, i zwykłego div, jeśli chcesz manipulować materiałami utworzonymi w HTML. Jeśli chodzi o wydajność, przekonasz się, że współczesne przeglądarki przyspieszają teraz wszystkie trzy, ale do tej pory największą uwagę przyciągnęło płótno. Z drugiej strony to, jak dobrze piszesz javascript, ma kluczowe znaczenie dla uzyskania jak największej wydajności z płótnem, więc nadal polecam używanie SVG.
źródło
Podczas wyszukiwania w Google znajduję dobre wyjaśnienie dotyczące używania i kompresji SVG i Canvas na stronie http://teropa.info/blog/2016/12/12/graphics-in-angular-2.html
Mam nadzieję, że to pomoże:
źródło