Jadual Kandungan
回复内容:
Rumah hujung hadapan web Tutorial H5 HTML5的canvas绘制动态时钟,1秒刷新一次canvas,个人觉得有性能的问题,如果不这么做的话,有什么好的方法?

HTML5的canvas绘制动态时钟,1秒刷新一次canvas,个人觉得有性能的问题,如果不这么做的话,有什么好的方法?

Jun 07, 2016 am 08:45 AM

回复内容:

个人觉得没有性能的问题 不会有任何性能问题,要理解canvas是比较底层的API,它需要手工去做一些底层的工作,让canvas里的东西动起来就需要不停的重绘,刚接触canvas的人会容易产生这样的误解,觉得这样会有性能问题

传统的DOM动画并不是没有这个重绘过程的,想要DOM元素动起来,一样需要经历重排版和重渲染,只不过这些浏览器的排版引擎在底层已经自动替你完成了,实际上浏览器重构整个渲染树的开销是非常非常巨大的,这也是造成DOM动画性能低下的原因,在canvas里可以让里面的数千个图形不断运动,依然保持流畅,而如果一个页面中有数十个DOM一起运动就已经开始卡了 不会吧,许多HTML5游戏引擎都是冲着60fps去的,做个打飞机之类的游戏也完全没有压力,时钟这种东西就更不至于造成性能问题了,更何况你是1fps。先做个实验试试吧。 一秒刷新都有性能问题的机器就别跑什么HTML5了。 对于CANVAS绘制性能提高问题,可以考虑使用“双缓冲”技巧。
CANVAS图像传统绘制是这个样子的:

(1)在可见画布上画出一个圆。

(2)在可见画布上画出一个三角。

(3)在可见画布上画出一个方块。

“双缓冲”技巧则是这个样子:

(1)在非可见画布上画出一个圆。

(2)在非可见画布上画出一个三角。

(3)在非可见画布上画出一个方块。

(4)将非可见画布上的内容一次性画到可见画布上。

也就是说,在浏览器上,使用双缓冲技术进行canvas对象的绘制只会对浏览器进行一次渲染。就理论而言,在需要绘制的东西非常多的时候,双缓冲技术可以有效减少页面闪烁次数。


之前做过实验,在canvas画布中有若干个圆做无规则碰撞运动,设定两个对照组,一个用传统方法绘制圆,另一个则是使用双缓冲技巧。以下是实验记录:

第一次对比:

两组都是900个圆在CANVAS中进行无规则运动并相互碰撞,两组都运行流畅

第二次对比:

两组都是1100个圆在CANVAS中进行无规则运动并相互碰撞,两组都运行流畅

第四次对比:

两组都是2100个圆在CANVAS中进行无规则运动并相互碰撞,两组都开始出现掉帧现象

第五次对比:

两组都是2500个圆在CANVAS中进行无规则运动并相互碰撞,两组都有较为明显的卡顿现象,仍然没有明显的性能差别

第六次对比:

两组都是3000个圆在CANVAS中进行无规则运动并相互碰撞,两组都卡顿,仍然没有明显的性能差别

第七次对比:

两组都是3500个圆在CANVAS中进行无规则运动并相互碰撞,两组都很卡顿,仍然没有明显的性能差别HTML5的canvas绘制动态时钟,1秒刷新一次canvas,个人觉得有性能的问题,如果不这么做的话,有什么好的方法?


当时的出的结论是:双缓冲技巧对于HTML5 CANVAS性能提升效果并不明显。


现在想来,其实还有一种可能:浏览器把性能都用在计算那几千个撞来撞去的圆的速度、角度变化上去了,而“大量绘制图像”的实验目的并没有得到体现。

另外,所谓“卡顿程度”在当时是使用肉眼判断的,这又是另一个不严谨之处。


此技巧并不复杂,我想题主还是可以一试的。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimanakah saya menggunakan tag meta viewport untuk mengawal skala halaman pada peranti mudah alih? Bagaimanakah saya menggunakan tag meta viewport untuk mengawal skala halaman pada peranti mudah alih? Mar 13, 2025 pm 08:00 PM

Artikel ini membincangkan menggunakan tag meta viewport untuk mengawal skala halaman pada peranti mudah alih, memberi tumpuan kepada tetapan seperti lebar dan skala awal untuk respons dan prestasi optimum.

Cara Menjalankan Projek H5 Cara Menjalankan Projek H5 Apr 06, 2025 pm 12:21 PM

Menjalankan projek H5 memerlukan langkah -langkah berikut: memasang alat yang diperlukan seperti pelayan web, node.js, alat pembangunan, dan lain -lain. Membina persekitaran pembangunan, membuat folder projek, memulakan projek, dan menulis kod. Mulakan pelayan pembangunan dan jalankan arahan menggunakan baris arahan. Pratonton projek dalam penyemak imbas anda dan masukkan URL Server Pembangunan. Menerbitkan projek, mengoptimumkan kod, menggunakan projek, dan menyediakan konfigurasi pelayan web.

Bagaimanakah saya mengendalikan privasi dan keizinan lokasi pengguna dengan API Geolokasi? Bagaimanakah saya mengendalikan privasi dan keizinan lokasi pengguna dengan API Geolokasi? Mar 18, 2025 pm 02:16 PM

Artikel ini membincangkan menguruskan privasi dan keizinan lokasi pengguna menggunakan API Geolocation, menekankan amalan terbaik untuk meminta kebenaran, memastikan keselamatan data, dan mematuhi undang -undang privasi.

Bagaimanakah saya menggunakan API Penglihatan Halaman Html5 untuk mengesan apabila halaman dapat dilihat? Bagaimanakah saya menggunakan API Penglihatan Halaman Html5 untuk mengesan apabila halaman dapat dilihat? Mar 13, 2025 pm 07:51 PM

Artikel ini membincangkan menggunakan API Penglihatan Halaman HTML5 untuk mengesan penglihatan halaman, meningkatkan pengalaman pengguna, dan mengoptimumkan penggunaan sumber. Aspek utama termasuk berhenti media, mengurangkan beban CPU, dan menguruskan analisis berdasarkan perubahan penglihatan.

Bagaimanakah saya menggunakan API Drag dan Drop HTML5 untuk antara muka pengguna interaktif? Bagaimanakah saya menggunakan API Drag dan Drop HTML5 untuk antara muka pengguna interaktif? Mar 18, 2025 pm 02:17 PM

Artikel ini menerangkan cara menggunakan API Drag dan Drop HTML5 untuk mewujudkan antara muka pengguna interaktif, memperincikan langkah -langkah untuk membuat unsur -unsur menyeret, mengendalikan peristiwa utama, dan meningkatkan pengalaman pengguna dengan maklum balas tersuai. Ia juga membincangkan perangkap biasa dengan a

Adakah pengeluaran halaman H5 memerlukan penyelenggaraan berterusan? Adakah pengeluaran halaman H5 memerlukan penyelenggaraan berterusan? Apr 05, 2025 pm 11:27 PM

Halaman H5 perlu dikekalkan secara berterusan, kerana faktor -faktor seperti kelemahan kod, keserasian pelayar, pengoptimuman prestasi, kemas kini keselamatan dan peningkatan pengalaman pengguna. Kaedah penyelenggaraan yang berkesan termasuk mewujudkan sistem ujian lengkap, menggunakan alat kawalan versi, kerap memantau prestasi halaman, mengumpul maklum balas pengguna dan merumuskan pelan penyelenggaraan.

Bagaimanakah saya menggunakan API WebSockets HTML5 untuk komunikasi dua arah antara klien dan pelayan? Bagaimanakah saya menggunakan API WebSockets HTML5 untuk komunikasi dua arah antara klien dan pelayan? Mar 12, 2025 pm 03:20 PM

Artikel ini menerangkan API WebSockets HTML5 untuk komunikasi pelayan klien bidirectional masa nyata. Ia memperincikan pelaksanaan klien (JavaScript) dan pelayan (python/flask), menangani cabaran seperti skalabilitas, pengurusan negeri,

Cara membuat ikon klik h5 Cara membuat ikon klik h5 Apr 06, 2025 pm 12:15 PM

Langkah -langkah untuk membuat ikon klik H5 termasuk: menyediakan imej sumber persegi dalam perisian penyuntingan imej. Tambah interaktiviti dalam editor H5 dan tetapkan acara klik. Buat hotspot yang meliputi keseluruhan ikon. Tetapkan tindakan peristiwa klik, seperti melompat ke halaman atau mencetuskan animasi. Eksport dokumen H5 sebagai fail HTML, CSS, dan JavaScript. Menyebarkan fail yang dieksport ke laman web atau platform lain.

See all articles