Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Animation

Pengoptimalan Canvas HTML5: Contoh Praktis

by
Read Time:29 minsLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Jika Anda telah melakukan pengembangan JavaScript cukup lama, kemungkinan besar Anda akan menggagalkan browser Anda beberapa kali. Masalahnya biasanya ternyata beberapa bug JavaScript, seperti perulangan while tanpa henti; jika tidak, tersangka berikutnya adalah transformasi halaman atau animasi - jenis yang melibatkan penambahan dan penghapusan elemen dari halaman web atau menganimasi properti gaya CSS. Tutorial ini berfokus pada pengoptimalan animasi yang dihasilkan dengan menggunakan JS dan elemen <canvas> HTML5

Tutorial ini dimulai dan diakhiri dengan widget animasi HTML5 yang Anda lihat di bawah ini:

Kami akan membawanya bersama kami dalam perjalanan, menjelajahi berbagai kiat dan teknik pengoptimalan canvas dan menerapkannya ke kode sumber widget JavaScript. Tujuannya adalah untuk meningkatkan kecepatan eksekusi widget dan berakhir dengan widget animasi yang lebih halus dan lebih cair, didukung oleh JavaScript yang lebih ramping dan lebih efisien.

Download sumber berisi HTML dan JavaScript dari setiap langkah dalam tutorial, sehingga Anda dapat mengikuti dari manapun juga.

Mari kita ikuti langkah pertama.


Langkah 1: Memainkan Trailer Film

Widget di atas didasarkan pada trailer film untuk Sintel, sebuah film animasi 3D oleh Blender Foundation. Dibuat dengan menggunakan dua tambahan HTML5 yang paling populer: elemen <canvas> dan <video>. dan .

<video> memuat dan memutar file video Sintel, sedangkan <canvas> menghasilkan urutan animasinya sendiri dengan mengambil snapshot dari video yang diputar dan mencampurnya dengan teks dan grafis lainnya. Saat Anda mengklik untuk memutar video, canvas muncul di latar belakang gelap yang merupakan salinan video hitam dan putih yang lebih besar dari video yang sedang diputar. Screenshot video yang lebih kecil dan berwarna disalin ke layar, dan meluncur di atasnya sebagai bagian dari ilustrasi gulungan film.

Di pojok kiri atas, kita memiliki judul dan beberapa baris teks deskriptif yang memudar masuk dan keluar saat animasi dimainkan. Kecepatan kinerja script dan metrik terkait disertakan sebagai bagian dari animasi, di kotak hitam kecil di pojok kiri bawah dengan grafik dan teks yang jelas. Kita akan melihat item khusus ini secara lebih rinci nanti.

Akhirnya, ada pisau besar berputar yang terbang melintasi layar di awal animasi, yang grafisnya diambil dari file gambar PNG eksternal.


Langkah 2: Melihat Sumbernya

Kode sumber berisi campuran HTML, CSS dan Javascript biasa. HTML-nya jarang: hanya tag <canvas> dan <video>, dilampirkan dalam <div> kontainer:

<div> kontainer diberikan sebuah ID (animationWidget), yang bertindak sebagai kait untuk semua aturan CSS yang diterapkan padanya dan isinya (di bawah).

Sementara HTML dan CSS adalah rempah-rempah dan bumbu yang diasinkan, JavaScript adalah daging dari widget.

  • Di bagian atas, kita memiliki objek utama yang akan sering digunakan melalui skrip, termasuk referensi ke elemen canvas dan konteks 2D-nya.
  • Fungsi init() dipanggil setiap kali video mulai diputar, dan mengatur semua objek yang digunakan dalam skrip.
  • Fungsi sampleVideo() menangkap frame video yang diputar saat ini, sedangkan setBlade() memuat gambar eksternal yang dibutuhkan oleh animasi.
  • Kecepatan dan konten animasi canvas dikendalikan oleh fungsi main(), yang seperti detak jantung dari skrip. Jalankan pada interval reguler begitu video mulai diputar, ia melukis setiap frame animasi dengan terlebih dahulu membersihkan canvas, lalu memanggil masing-masing dari lima fungsi menggambar dari skrip:
    • drawBackground()
    • drawFilm()
    • drawTitle()
    • drawDescription()
    • drawStats()

Seperti namanya, setiap fungsi menggambar bertanggung jawab untuk menggambar item di adegan animasi. Penataan kode dengan cara ini meningkatkan fleksibilitas dan mempermudah perawatan di masa depan.

Skrip lengkap ditunjukkan di bawah ini. Luangkan waktu untuk menilainya, dan lihat apakah Anda bisa menemukan perubahan yang akan Anda lakukan untuk mempercepatnya.


Langkah 3: Optimalisasi Kode: Ketahui Aturannya

Aturan pertama dari optimasi kinerja kode adalah: Jangan.

Inti dari peraturan ini adalah untuk mencegah optimasi demi optimalisasi, karena prosesnya sesuai dengan harga tertentu.

Skrip yang sangat optimal akan memudahkan browser untuk mengurai dan mengolahnya, namun biasanya dengan beban bagi manusia yang akan merasa lebih sulit untuk diikuti dan dipelihara. Kapan pun Anda memutuskan bahwa beberapa pengoptimalan diperlukan, tetapkan beberapa tujuan sebelumnya sehingga Anda tidak terbawa oleh proses dan berlebihan.

Tujuan dalam mengoptimalkan widget ini adalah agar fungsi main() berjalan dalam waktu kurang dari 33 milidetik sebagaimana mestinya, yang akan cocok dengan frame rate dari file video yang dimainkan (sintel.mp4 dan sintel.webm). File-file ini dikodekan pada kecepatan pemutaran 30fps (tiga puluh frame per detik), yang berarti sekitar 0,33 detik atau 33 milidetik per frame ( 1 detik ÷ 30 frame ).

Karena JavaScript menggambar frame animasi baru ke canvas setiap kali fungsi main() dipanggil, tujuan proses pengoptimalan kita adalah membuat fungsi ini memakan waktu 33 milidetik atau kurang setiap kali berjalan. Fungsi ini berulang kali memanggil dirinya sendiri menggunakan timer Javascript setTimeout() seperti yang ditunjukkan di bawah ini.

Aturan kedua: Belum.

Aturan ini menekankan bahwa pengoptimalan harus selalu dilakukan pada akhir proses pengembangan apabila Anda telah menyelesaikan beberapa kode yang bekerja dengan lengkap. Polisi optimalisasi akan membiarkan kita melakukan yang satu ini, karena skrip widget adalah contoh sempurna dari program yang bekerja dengan lengkap yang siap untuk prosesnya.

Aturan ketiga: Belum, dan profil dulu.

Aturan ini adalah tentang memahami program Anda dalam hal kinerja runtime. Profil membantu Anda mengetahui daripada menebak fungsi atau area skrip mana yang paling banyak digunakan atau paling sering digunakan, sehingga Anda dapat berfokus pada proses pengoptimalan. Hal ini cukup penting untuk membuat browser terkemuka dikirimkan dengan profiler JavaScript yang terpasang, atau memiliki ekstensi yang menyediakan layanan ini.

Saya menjalankan widget di bawah profiler di Firebug, dan di bawah adalah screenshot dari hasilnya.


Langkah 4: Tetapkan Beberapa Metrik Kinerja

Saat Anda menjalankan widget, saya yakin Anda menemukan semua barang Sintel baik-baik saja, dan benar-benar terpesona oleh item di sudut kanan bawah canvas, yang memiliki grafik dan teks yang indah.

Ini bukan hanya wajah cantik; kotak itu juga memberikan beberapa statistik kinerja real-time pada program yang sedang berjalan. Itu sebenarnya sederhana, profiler Javascript dasar. Benar! Yo, saya mendengar Anda menyukai profil, jadi saya memasukkan profiler ke dalam film Anda, sehingga Anda bisa mem-profil saat Anda menonton.

Grafiknya melacak Render Time, dihitung dengan mengukur berapa lama setiap menjalankan dari main() yang dibutuhkan dalam milidetik. Karena ini adalah fungsi yang menarik setiap frame dari animasi, secara efektif frame rate dari animasi. Setiap garis biru vertikal pada grafik menggambarkan waktu yang dibutuhkan oleh satu frame. Garis horizontal merah adalah kecepatan target, yang kita atur pada 33ms agar sesuai dengan frame rate file video. Tepat di bawah grafik, kecepatan panggilan terakhir ke main() yang diberikan dalam milidetik.

Profiler juga merupakan uji coba kecepatan rendering browser yang praktis. Saat ini, rata-rata waktu render di Firefox adalah 55ms, 90ms di IE 9, 41ms di Chrome, 148ms di Opera dan 63ms di Safari. Semua browser berjalan pada Windows XP, kecuali IE 9 yang diprofilkan pada Windows Vista.

Metrik berikutnya di bawah itu adalah Canvas FPS (frame per detik dari canvas), yang diperoleh dengan menghitung berapa kali main() dipanggil per detik. Profiler menampilkan tingkat FPS Canvas terbaru saat video masih diputar, dan saat berakhir ia menunjukkan kecepatan rata-rata semua panggilan ke main().

Metrik terakhir adalah Browser FPS, yang mengukur berapa banyak browser menghapus jendela saat ini setiap detiknya. Yang satu ini hanya tersedia jika Anda melihat widget di Firefox, karena bergantung pada fitur yang saat ini hanya tersedia di browser itu yang disebut window.mozPaintCount., sebuah properti JavaScript yang melacak berapa kali jendela browser telah digambar ulang sejak halaman dimuat pertama kali.

Penggambaran ulang biasanya terjadi ketika sebuah peristiwa atau tindakan yang mengubah tampilan halaman, seperti saat Anda menggulir ke bawah halaman atau mouse-over sebuah link. Ini secara efektif merupakan frame rate nyata browser, yang ditentukan oleh seberapa sibuknya halaman web saat ini.

Untuk mengukur efek animasi canvas yang tidak dioptimalkan pada mozPaintCount, saya menghapus tag canvas dan semua JavaScript, sehingga dapat melacak frame rate browser saat memutar video saja. Tes saya dilakukan di konsol Firebug, dengan menggunakan fungsi di bawah ini:

Hasilnya: Frame rate browser adalah antara 30 dan 32 FPS saat video diputar, dan menurun ke FPS 0-1 saat video tersebut berakhir. Ini berarti bahwa Firefox menyesuaikan frekuensi penggambaran ulang jendela agar sesuai dengan video yang diputar, dienkodekan pada 30fps. Ketika tes dijalankan dengan animasi canvas yang tidak dioptimalkan dan video yang diputar bersamaan, ia akan melambat hingga 16fps, karena browser sekarang berjuang untuk menjalankan semua JavaScript dan masih menggambar ulang jendela tepat waktu, membuat pemutaran video dan animasi canvas melamban.

Kita sekarang akan mulai mengutak-atik program kita, dan saat kita melakukannya, kita akan terus melacak Render Time, Canvas FPS dan Browser FPS untuk mengukur dampak perubahan kita.


Langkah 5: Gunakan requestAnimationFrame()

Dua cuplikan JavaScript terakhir di atas menggunakan fungsi timer setTimeout() dan setInterval(). Untuk menggunakan fungsi ini, Anda menentukan interval waktu dalam milidetik dan fungsi callback yang Anda ingin dieksekusi setelah berlalunya waktu. Perbedaan antara keduanya adalah setTimeout() akan memanggil fungsi Anda sekali saja, sementara setInterval() memanggilnya berulang kali.

Sementara fungsi ini selalu menjadi alat yang sangat diperlukan dalam kit animator JavaScript, mereka memiliki beberapa kekurangan:

Pertama, set interval waktu tidak selalu bisa diandalkan. Jika program masih di tengah mengeksekusi sesuatu yang lain saat interval berlalu, fungsi callback akan dieksekusi nantinya dari yang semula ditetapkan, setelah browser tidak lagi sibuk. Pada fungsi main(), kita menetapkan interval ke 33 milidetik - namun seiring profilernya mengungkapkan, fungsi ini sebenarnya dipanggil setiap 148 milidetik di Opera.

Kedua, ada masalah dengan penggambaran ulang browser. Jika kita memiliki fungsi callback yang menghasilkan 20 animasi frame per detik sementara browser menggambar ulang jendelanya hanya 12 kali per detik, 8 panggilan ke fungsi itu akan terbuang karena pengguna tidak akan pernah bisa melihat hasilnya.

Akhirnya, browser tidak memiliki cara untuk mengetahui bahwa fungsi yang dipanggil adalah elemen animasi dalam dokumen. Ini berarti bahwa jika elemen tersebut digeser keluar dari tampilan, atau pengguna mengklik tab lain, callback akan tetap dieksekusi berulang kali, menghabiskan siklus CPU.

Menggunakan requestAnimationFrame() memecahkan sebagian besar masalah ini, dan ini bisa digunakan sebagai pengganti fungsi timer dalam animasi HTML5. Alih-alih menentukan interval waktu, requestAnimationFrame() menyinkronkan fungsi panggilan dengan penggambaran ulang jendela browser. Ini menghasilkan animasi yang lebih cair dan konsisten karena tidak ada frame yang dijatuhkan, dan browser dapat melakukan pengoptimalan internal lebih jauh karena mengetahui animasi sedang berlangsung.

Untuk mengganti setTimeout() dengan requestAnimationFrame di widget kita, pertama-tama tambahkan baris berikut di bagian atas skrip kita:

Karena spesifikasinya masih cukup baru, beberapa browser atau versi browser memiliki implementasi eksperimental mereka sendiri, baris ini memastikan bahwa nama fungsi menunjuk ke metode yang benar jika tersedia, dan berbalik kembali ke setTimeout() jika tidak. Kemudian pada fungsi main(), kita mengubah baris ini:

...menjadi:

Parameter pertama mengambil fungsi callback, yang dalam hal ini adalah fungsi main(). Parameter kedua adalah opsional, dan menentukan elemen DOM yang berisi animasi. Ini seharusnya digunakan untuk menghitung pengoptimalan tambahan.

Perhatikan bahwa fungsi getStats() juga menggunakan setTimeout(), namun kita membiarkannya karena fungsi khusus ini tidak ada hubungannya dengan menganimasikan adegan. requestAnimationFrame() dibuat khusus untuk animasi, jadi jika fungsi callback Anda tidak melakukan animasi, Anda masih bisa menggunakan setTimeout() atau setInterval().


Langkah 6: Gunakan API Page Visibility

Pada langkah terakhir kita membuat requestAnimationFrame menggerakkan animasi canvas, dan sekarang kita memiliki masalah baru. Jika kita mulai menjalankan widget, kemudian minimalkan jendela browser atau beralih ke tab baru, tingkat jendela widget menggambar ulang menurun untuk menghemat daya. Ini juga memperlambat animasi canvas karena sekarang disinkronisasi dengan tingkat menggambar ulang - yang akan sempurna jika video tidak terus diputar sampai akhir.

Kita membutuhkan cara untuk mendeteksi kapan halaman tidak dilihat sehingga kita bisa menghentikan sementara pemutaran video; di sinilah API Page Visibility datang untuk menyelamatkan.

API berisi seperangkat properti, fungsi dan event yang dapat kita gunakan untuk mendeteksi apakah ada halaman web yang dilihat atau disembunyikan. Kita kemudian dapat menambahkan kode yang menyesuaikan perilaku program kita. Kita akan menggunakan API ini untuk mem-pause pemutaran video pada widget setiap kali halaman tidak aktif.

Kita mulai dengan menambahkan event listener baru ke skrip kita:

Selanjutnya datanglah fungsi event handler:


Langkah 7: Untuk Shape Kustom, Gambarkan Seluruh Path Sekaligus

Path digunakan untuk membuat dan menggambar shape dan garis tepi pada elemen <canvas>, yang setiap saat akan memiliki satu path aktif.

Path berisi daftar sub-path, dan setiap sub-path terdiri dari titik koordinat canvas yang dihubungkan bersama oleh garis atau kurva. Semua fungsi pembuatan dan penggambaran path adalah properti dari objek context canvas, dan dapat digolongkan menjadi dua kelompok.

Ada fungsi pembuatan subpath, yang digunakan untuk menentukan subpath dan menyertakan lineTo()quadraticCurveTo()bezierCurveTo(), dan arc(). Kemudian kita memiliki stroke() dan fill(), fungsi menggambar path/subpath. Menggunakan stroke() akan menghasilkan garis tepi, sedangkan fill() menghasilkan shape yang diisi dengan warna, gradien atau pola.

Saat menggambar shape dan garis tepi pada canvas, lebih efisien untuk membuat keseluruhan path terlebih dulu, lalu hanya stroke() atau fill() padanya sekali, daripada menentukan dan menggambar setiap supbath sekaligus. Dengan mengambil grafik profiler yang dijelaskan pada Langkah 4 sebagai contoh, masing-masing garis vertikal biru adalah subpath, sementara semuanya bersama-sama membentuk path saat ini.

Metode stroke() saat ini dipanggil dalam satu loop yang mendefinisikan setiap subpath:

Grafik ini dapat ditarik jauh lebih efisien dengan terlebih dahulu mendefinisikan semua subpath, lalu menggambar keseluruhan path saat ini sekaligus, seperti yang ditunjukkan di bawah ini.


Langkah 8: Gunakan Canvas Off-Screen untuk Membangun Adegan

Teknik pengoptimalan ini terkait dengan yang ada di langkah sebelumnya, bahwa keduanya didasarkan pada prinsip yang sama untuk meminimalkan penggambaran ulang halaman web.

Setiap kali terjadi sesuatu yang mengubah tampilan atau konten dokumen, browser harus menjadwalkan operasi penggambaran ulang segera setelahnya untuk memperbarui antarmukanya. Penggambaran ulang bisa menjadi operasi yang mahal dalam hal siklus dan kekuatan CPU, terutama untuk halaman yang padat dengan banyak elemen dan animasi yang sedang berlangsung. Jika Anda membangun adegan animasi yang kompleks dengan menambahkan banyak item satu per satu ke <canvas>, setiap penambahan baru mungkin akan memicu keseluruhan penggambaran ulang.

Lebih baik dan lebih cepat untuk membangun adegan di luar layar (dalam memori) <canvas>, dan sekali selesai, gambar seluruh adegan hanya sekali ke layar, <canvas> yang terlihat.

Tepat di bawah kode yang mendapatkan rujukan ke widget <canvas> dan konteksnya, kami akan menambahkan lima baris baru yang membuat objek DOM canvas di luar layar dan sesuai dengan dimensi aslinya, <canvas> yang terlihat.

Kita kemudian akan melakukan pencarian dan penggantian di semua fungsi menggambar untuk semua referensi ke "mainCanvas" dan mengubahnya menjadi "osCanvas". Referensi ke "mainContext" akan diganti dengan "osContext". Segalanya sekarang akan tertarik ke canvas di luar layar yang baru, bukannya <canvas> yang asli.

Akhirnya, kita menambahkan satu baris lagi ke main() yang menggambar apa yang saat ini ada di luar layar <canvas> ke dalam <canvas> asli kita.


Langkah 9: Cache Path Sebagai Gambar Bitmap Bila Memungkinkan

Untuk banyak jenis grafis, menggunakan drawImage() akan jauh lebih cepat daripada membuat gambar yang sama pada kanvas menggunakan path. Jika Anda menemukan bahwa ramuan besar skrip Anda dihabiskan berulang kali menggambar shape dan garis tepi yang sama berulang-ulang, Anda dapat menghemat beberapa pekerjaan browser dengan menyimpan gambar yang dihasilkan sebagai gambar bitmap, lalu melukisnya sekali saja ke canvas kapan pun dibutuhkan dengan menggunakan drawImage().

Ada dua cara untuk melakukan ini.

Yang pertama adalah dengan membuat file gambar eksternal sebagai gambar JPG, GIF atau PNG, lalu memuatnya secara dinamis menggunakan JavaScript dan menyalinnya ke canvas Anda. Satu kelemahan dari metode ini adalah file tambahan yang harus diunduh program Anda dari jaringan, namun tergantung pada jenis grafis atau aplikasi Anda, ini sebenarnya bisa menjadi solusi yang baik. Widget animasi menggunakan metode ini untuk memuat grafik pisau berputar, yang tidak mungkin dibuat ulang hanya dengan menggunakan fungsi menggambar path dari canvas.

Metode kedua melibatkan hanya dengan menggambar grafis sekali ke canvas di luar layar daripada memuat gambar eksternal. Kita akan menggunakan metode ini untuk men-cache judul dari widget animasi. Kita pertama kali membuat variabel untuk referensi elemen canvas di luar layar baru yang akan dibuat. Nilai defaultnya diset menjadi false, sehingga kita dapat mengetahui apakah cache gambar telah dibuat dan disimpan begitu skrip mulai berjalan:

Kita kemudian mengedit fungsi drawTitle() untuk pertama-tama memeriksa apakah gambar canvas titleCache telah dibuat. Jika belum, itu akan menciptakan gambar di luar layar dan menyimpan referensi ke titleCache:


Langkah 10: Kosongkan Canvas dengan clearRect()

Langkah pertama dalam menggambar frame animasi baru adalah dengan membersihkan canvas saat ini. Ini dapat dilakukan dengan mengatur ulang lebar elemen canvas, atau menggunakan fungsi clearRect().

Mengatur ulang lebar memiliki efek samping juga membersihkan context canvas saat ini kembali ke keadaan standarnya, yang dapat memperlambat segalanya. Menggunakan clearRect() selalu merupakan cara yang lebih cepat dan lebih baik untuk membersihkan canvas.

Pada fungsi main(), kita akan mengubah ini:

...menjadi ini:


Langkah 11: Menerapkan Lapisan

Jika Anda pernah bekerja dengan perangkat lunak pengedit gambar atau video seperti Gimp atau Photoshop sebelumnya, maka Anda sudah terbiasa dengan konsep dari lapisan, di mana gambar disusun dengan menumpuk banyak gambar di atas satu sama lain, dan masing-masing dapat dipilih dan diedit secara terpisah.

Diterapkan pada adegan animasi canvas, setiap lapisan akan menjadi elemen canvas terpisah, ditempatkan di atas satu sama lain menggunakan CSS untuk menciptakan ilusi satu elemen. Sebagai teknik pengoptimalan, ia bekerja paling baik bila ada perbedaan yang jelas antara elemen-elemen latar depan dan latar belakang adegan, dengan sebagian besar tindakan berlangsung di latar depan. Latar belakang kemudian dapat ditarik pada elemen canvas yang tidak banyak berubah antara frame animasi, dan latar depan pada elemen canvas yang lebih dinamis di atasnya. Dengan cara ini, keseluruhan adegan tidak harus digambar ulang lagi untuk setiap frame animasi.

Sayangnya, widget animasi adalah contoh bagus dari sebuah adegan dimana kita tidak dapat menggunakan teknik ini dengan baik, karena elemen latar depan dan latar belakang sangat dianimasikan.


Langkah 12: Perbaharui Hanya Area yang Berubah dari Adegan Animasi

Ini adalah teknik optimasi lain yang sangat bergantung pada komposisi adegan animasi. Ini bisa digunakan saat adegan animasi terkonsentrasi di sekitar area persegi tertentu di canvas. Kita kemudian bisa jelas dan menggambar ulang hanya pada daerah itu.

Misalnya, judul Sintel tetap tidak berubah sepanjang sebagian besar animasi, jadi kita bisa meninggalkan area itu tetap utuh saat membersihkan canvas untuk frame animasi berikutnya.

Untuk menerapkan teknik ini, kita mengganti baris yang memanggil fungsi menggambar judul di main() dengan blok berikut:


Langkah 13: Minimalkan Rendering Sub-Pixel

Rendering sub-pixel atau anti-aliasing terjadi saat browser secara otomatis menerapkan efek grafis untuk menghilangkan tepi yang bergerigi. Ini menghasilkan gambar dan animasi yang tampak lebih halus, dan otomatis diaktifkan setiap kali Anda menentukan koordinat fraksional daripada jumlah keseluruhan saat menggambar ke canvas.

Saat ini tidak ada standar tentang bagaimana hal itu harus dilakukan, jadi rendering subpiksel agak tidak konsisten di seluruh browser dalam hal output yang di-render. Ini juga memperlambat kecepatan me-render karena browser harus melakukan beberapa perhitungan untuk menghasilkan efeknya. Karena anti-aliasing canvas tidak bisa langsung dimatikan, satu-satunya cara untuk mengatasinya adalah dengan selalu menggunakan bilangan bulat dalam koordinat gambar Anda.

Kita akan menggunakan Math.floor() untuk memastikan bilangan dalam skrip kita bila diperlukan. Sebagai contoh, baris berikut di drawFilm():

...ditulis ulang sebagai:


Langkah 14: Mengukur Hasilnya

Kita telah melihat beberapa teknik pengoptimalan animasi canvas, dan sekarang saatnya untuk meninjau hasilnya.

Tabel ini menunjukkan rata-rata Render Times sebelum dan sesudah dan Canvas FPS..API Canvas masih cukup baru dan berkembang setiap hari, jadi teruslah bereksperimen, menguji, mengeksplorasi dan berbagi. Terima kasih telah membaca tutorial. Kita dapat melihat beberapa peningkatan yang signifikan di semua browser, meskipun Chrome hanya yang mendekati pencapaian tujuan awal Render Time maksimum 33ms. Ini berarti masih banyak pekerjaan yang harus dilakukan untuk mendapatkan target tersebut.

Kita bisa melanjutkan dengan menerapkan teknik optimasi JavaScript yang lebih umum, dan jika itu masih gagal, mungkin pertimbangkan untuk menurunkan animasinya dengan menghilangkan beberapa peringatan. Tapi kita tidak akan melihat teknik lain hari ini, karena fokusnya adalah optimasi dari animasi <canvas>.

API Canvas masih cukup baru dan berkembang setiap hari, jadi teruslah bereksperimen, menguji, mengeksplorasi dan berbagi. Terima kasih telah membaca tutorial.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.