目錄
回复内容:
首頁 web前端 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性能提升效果并不明显。


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

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


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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1662
14
CakePHP 教程
1419
52
Laravel 教程
1312
25
PHP教程
1262
29
C# 教程
1235
24
H5與HTML5相同嗎? H5與HTML5相同嗎? Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的,但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準,包含新標籤和API。 2."h5"通常是HTML5的簡稱,但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5指的是什麼?探索上下文 H5指的是什麼?探索上下文 Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5代碼:可訪問性和語義HTML H5代碼:可訪問性和語義HTML Apr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構,提高SEO。 2.ARIA屬性如aria-label增強可訪問性,輔助技術用戶可順利使用網頁。

H5:網絡標準和技術的發展 H5:網絡標準和技術的發展 Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今,经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API,增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能,使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法,如箭头函数和类,提升了开发效率和代码可读性,这些变化推动了Web应用的性能优化和最佳实践的发展。

H5代碼:Web開發人員的最佳實踐 H5代碼:Web開發人員的最佳實踐 Apr 16, 2025 am 12:14 AM

H5代碼的最佳實踐包括:1.使用正確的DOCTYPE聲明和字符編碼;2.採用語義化標籤;3.減少HTTP請求;4.使用異步加載;5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

H5和HTML5:網絡開發中常用的術語 H5和HTML5:網絡開發中常用的術語 Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西,即HTML5。 HTML5是HTML的第五個版本,帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能,提升了網頁的表現力和交互性。

H5是HTML5的速記嗎?探索細節 H5是HTML5的速記嗎?探索細節 Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱,它代表了一個更廣泛的現代網頁開發技術生態:1.H5包括HTML5、CSS3、JavaScript及相關API和技術;2.它提供更豐富、互動、流暢的用戶體驗,能在多設備上無縫運行;3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5:工具,框架和最佳實踐 H5:工具,框架和最佳實踐 Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面,支持組件化開發。 2.React通過虛擬DOM優化頁面渲染,適合複雜應用。 3.Webpack用於模塊打包,優化資源加載。

See all articles