Apa pendekatan terbaik untuk membuat elemen dengan cepat dan mampu memindahkannya? Sebagai contoh, katakanlah saya ingin membuat persegi panjang, lingkaran, dan poligon, lalu pilih objek-objek itu dan pindahkan.
Saya mengerti bahwa HTML5 menyediakan tiga elemen yang memungkinkan ini: svg , canvas dan div . Untuk apa yang ingin saya lakukan, elemen mana yang akan memberikan kinerja terbaik?
Untuk membandingkan pendekatan ini, saya berpikir untuk membuat tiga halaman web yang identik secara visual yang masing-masing memiliki header, footer, widget, dan konten teks di dalamnya. Widget di halaman pertama akan dibuat seluruhnya dengan canvas
elemen, yang kedua seluruhnya dengan svg
elemen, dan yang ketiga dengan div
elemen polos , HTML dan CSS.
javascript
html
svg
html5-canvas
verdy
sumber
sumber
Jawaban:
Jawaban singkatnya:
SVG akan lebih mudah bagi Anda, karena pemilihan dan memindahkannya sudah ada di dalamnya. Objek SVG adalah objek DOM, sehingga mereka memiliki penangan "klik", dll.
DIV baik-baik saja tetapi kikuk dan mengerikan pemuatan kinerja pada jumlah besar.
Canvas memiliki performa tangan-ke-bawah terbaik, tetapi Anda harus menerapkan sendiri semua konsep status terkelola (pemilihan objek, dll), atau menggunakan perpustakaan.
Jawaban panjangnya:
HTML5 Canvas hanyalah sebuah permukaan gambar untuk bit-map. Anda mengatur untuk menggambar (Katakan dengan warna dan ketebalan garis), menggambar hal itu, dan kemudian Kanvas tidak memiliki pengetahuan tentang hal itu: Tidak tahu di mana itu atau apa itu yang baru saja Anda gambar, itu hanya piksel. Jika Anda ingin menggambar persegi panjang dan membuatnya bergerak atau dipilih maka Anda harus kode semua itu dari awal, termasuk kode untuk diingat bahwa Anda menggambar mereka.
SVG di sisi lain harus mempertahankan referensi ke setiap objek yang direndernya. Setiap elemen SVG / VML yang Anda buat adalah elemen nyata di DOM. Secara default ini memungkinkan Anda untuk melacak elemen yang Anda buat dan membuat berurusan dengan hal-hal seperti peristiwa mouse lebih mudah secara default, tetapi memperlambat secara signifikan ketika ada sejumlah besar objek
Referensi DOM SVG tersebut berarti bahwa beberapa langkah untuk menangani hal-hal yang Anda gambar dilakukan untuk Anda. Dan SVG lebih cepat saat merender objek yang sangat besar , tetapi lebih lambat saat merender banyak objek.
Sebuah game mungkin akan lebih cepat di Canvas. Program peta besar mungkin akan lebih cepat di SVG. Jika Anda ingin menggunakan Canvas, saya memiliki beberapa tutorial tentang cara membuat objek bergerak dan berjalan di sini .
Canvas akan lebih baik untuk hal-hal yang lebih cepat dan manipulasi bitmap berat (seperti animasi), tetapi akan mengambil lebih banyak kode jika Anda ingin banyak interaktivitas.
Saya telah menjalankan banyak angka pada gambar buatan DIV HTML versus gambar buatan kanvas. Saya dapat membuat posting besar tentang manfaat masing-masing, tetapi saya akan memberikan beberapa hasil tes yang relevan untuk dipertimbangkan untuk aplikasi spesifik Anda:
Saya membuat halaman pengujian Kanvas dan HTML DIV, keduanya memiliki "simpul" yang dapat dipindahkan. Node kanvas adalah objek yang saya buat dan catat di Javascript. Node HTML adalah Div yang dapat dipindahkan.
Saya menambahkan 100.000 node ke masing-masing dari dua tes saya. Mereka tampil sangat berbeda:
Tab pengujian HTML membutuhkan waktu lama untuk memuat (waktunya sedikit di bawah 5 menit, chrome diminta untuk membunuh halaman pertama kali). Pengelola tugas Chrome mengatakan bahwa tab tersebut menghabiskan 168MB. Butuh 12-13% waktu CPU ketika saya melihatnya, 0% ketika saya tidak melihat.
Tab Canvas dimuat dalam satu detik dan membutuhkan 30MB. Ini juga memakan waktu 13% dari waktu CPU sepanjang waktu, terlepas dari apakah seseorang melihatnya atau tidak. (2013 edit: Mereka sebagian besar sudah memperbaiki itu)
Menyeret di halaman HTML lebih halus, yang diharapkan oleh desain, karena pengaturan saat ini adalah untuk menggambar kembali SETIAP setiap 30 milidetik dalam tes Canvas. Ada banyak optimasi yang bisa didapat untuk Canvas untuk ini. (pembatalan kanvas menjadi yang termudah, juga memotong daerah, menggambar ulang selektif, dll. hanya tergantung pada seberapa banyak Anda ingin menerapkan)
Tidak ada keraguan Anda bisa mendapatkan Canvas menjadi lebih cepat pada manipulasi objek sebagai divs dalam tes sederhana itu, dan tentu saja jauh lebih cepat dalam waktu buka. Menggambar / memuat lebih cepat di Canvas dan memiliki ruang lebih banyak untuk optimisasi juga (yaitu, mengecualikan hal-hal yang di luar layar sangat mudah).
Kesimpulan:
sumber
background-image
... Meskipun Anda dapat melakukan hal serupa di SVG / CanvasUntuk menambah ini, saya sudah melakukan aplikasi diagram, dan awalnya dimulai dengan kanvas. Diagram terdiri dari banyak node, dan mereka bisa menjadi cukup besar. Pengguna dapat menyeret elemen dalam diagram sekitar.
Apa yang saya temukan adalah bahwa di Mac saya, untuk gambar yang sangat besar, SVG lebih unggul. Saya memiliki MacBook Pro 2013 13 "Retina, dan menjalankan biola di bawah ini dengan cukup baik. Gambarnya adalah 6000x6000 piksel, dan memiliki 1000 objek. Konstruksi serupa di kanvas tidak mungkin untuk menghidupkan bagi saya ketika pengguna menyeret objek di sekitar diagram.
Pada layar modern Anda juga harus memperhitungkan resolusi yang berbeda, dan di sini SVG memberi Anda semua ini secara gratis.
Fiddle: http://jsfiddle.net/knutsi/PUcr8/16/
Layar penuh: http://jsfiddle.net/knutsi/PUcr8/16/embedded/result/
sumber
Mengetahui perbedaan antara SVG dan Canvas akan sangat membantu dalam memilih yang tepat.
Kanvas
SVG
sumber
Saya setuju dengan kesimpulan Simon Sarris:
Saya telah membandingkan beberapa visualisasi dalam Protovis (SVG) dengan Processingjs (Canvas) yang menampilkan> 2000 poin dan pemrosesan js jauh lebih cepat daripada protovis.
Menangani acara dengan SVG tentu saja jauh lebih mudah karena Anda dapat melampirkannya ke objek. Di Kanvas Anda harus melakukannya secara manual (periksa posisi mouse, dll) tetapi untuk interaksi sederhana seharusnya tidak sulit.
Ada juga perpustakaan dojo.gfx dari dojo toolkit. Ini memberikan lapisan abstraksi dan Anda dapat menentukan renderer (SVG, Canvas, Silverlight). Itu mungkin juga merupakan pilihan yang layak walaupun saya tidak tahu berapa banyak overhead yang ditambahkan lapisan abstraksi tambahan tetapi membuatnya mudah untuk interaksi kode dan animasi dan renderer-agnostik.
Berikut ini beberapa tolok ukur yang menarik:
sumber
Hanya 2 sen saya mengenai opsi divs.
Terkenal / Terkenal dan SamsaraJS (dan mungkin yang lain) menggunakan div non-bersarang yang diposisikan benar-benar (dengan konten HTML / CSS non-sepele), dikombinasikan dengan matrix2d / matrix3d untuk penentuan posisi dan transformasi 2D / 3D, dan mencapai 60FPS yang stabil pada perangkat keras seluler moderat , jadi saya akan berdebat menentang divs menjadi pilihan lambat.
Ada banyak rekaman layar di Youtube dan di tempat lain, hal-hal 2D / 3D berkinerja tinggi berjalan di browser dengan semuanya menjadi elemen DOM yang Anda dapat Periksa Elemen pada, di 60FPS (dicampur dengan WebGL untuk efek tertentu, tetapi tidak untuk bagian utama dari rendering).
sumber
Meskipun masih ada kebenaran pada sebagian besar jawaban di atas, saya pikir mereka layak mendapat pembaruan:
Selama bertahun-tahun kinerja SVG telah meningkat pesat dan sekarang ada transisi dan animasi CSS yang dipercepat perangkat keras untuk SVG yang tidak bergantung pada kinerja JavaScript sama sekali. Tentu saja kinerja JavaScript juga meningkat, dan dengan itu kinerja Canvas, tetapi tidak sebanyak SVG yang ditingkatkan. Juga ada "anak baru" di blok yang tersedia di hampir semua browser hari ini dan itu adalah WebGL . Untuk menggunakan kata-kata yang sama yang digunakan Simon di atas: Ini mengalahkan Canvas dan SVG . Ini tidak berarti itu harus menjadi teknologi canggih, karena ini adalah binatang buas untuk bekerja dengan dan itu hanya lebih cepat dalam kasus penggunaan yang sangat spesifik.
IMHO untuk sebagian besar kasus penggunaan saat ini, SVG memberikan rasio kinerja / kegunaan terbaik. Visualisasi harus sangat kompleks (berkenaan dengan jumlah elemen) dan sangat sederhana pada saat yang sama (per elemen) sehingga Canvas dan bahkan lebih lagi WebGL benar-benar bersinar.
Dalam jawaban untuk pertanyaan serupa saya memberikan lebih banyak detail, mengapa saya berpikir bahwa kombinasi ketiga teknologi kadang-kadang adalah pilihan terbaik yang Anda miliki.
sumber
layers.acceleration.force-enabled
di Firefox bukan tentang decoding video. Itu fakta yang sudah diketahui. Ketika selesai loop menggunakan requestAnimationFrame adalah level lain, memungkinkan cara pengecatan lebih banyak. Sama sekali tidak tentang video.Untuk tujuan Anda, saya sarankan menggunakan SVG, karena Anda mendapatkan acara DOM, seperti penanganan mouse, termasuk seret dan lepas, termasuk, Anda tidak harus menerapkan redraw sendiri, dan Anda tidak harus melacak status benda-benda Anda. Gunakan Kanvas ketika Anda harus melakukan manipulasi gambar bitmap dan gunakan div reguler ketika Anda ingin memanipulasi hal-hal yang dibuat dalam HTML. Mengenai kinerja, Anda akan mendapati bahwa peramban modern sekarang mempercepat ketiganya, tetapi kanvas itu telah mendapatkan perhatian terbesar sejauh ini. Di sisi lain, seberapa baik Anda menulis javascript sangat penting untuk mendapatkan kinerja terbaik dengan kanvas, jadi saya tetap merekomendasikan menggunakan SVG.
sumber
Sementara googling saya menemukan penjelasan yang baik tentang penggunaan dan kompresi SVG dan Canvas di http://teropa.info/blog/2016/12/12/graphics-in-angular-2.html
Semoga ini bisa membantu:
sumber