强烈不建议使用canvas动画做网页渲染

3.8
(5)

先说下什么是canvas动画,该动画可以通过js在网页渲染各种特效,包括全屏特效、局部特效。常见的有,自动跟随鼠标移动的、自动变换的彩带。总之,我不建议你使用任何网页特效。因为这种特效需要用户浏览器消耗大量cpu、gpu去渲染。遇到一些配置不太高的电脑,会显得你的网页很卡,甚至风扇呼呼的响。

Canvas 中文名称叫“画布”,它是游戏中所有UI组件的“容器”。一个场景中,可以允许多个Canvas对象的存在,还允许Canvas之间可以进行“嵌套”使用。需要注意的是,场景中的任何一个UI对象,都肯定是某个Canvas对象的“子级”。

——百度百科
强烈不建议使用canvas动画做网页渲染

下面举个例子吧:

首先,我们来看站长社区的网站背景上的动画,对cpu和gpu有多大消耗:测试方法,打开对方网站。保持在窗口可见范围内,这样就会消耗cpu跟gpu了。然后打开浏览器中的任务管理器或者系统的任务管理器,看看浏览器占用情况:

强烈不建议使用canvas动画做网页渲染
强烈不建议使用canvas动画做网页渲染
强烈不建议使用canvas动画做网页渲染

而当我关掉这个网页,或者不去看这个网页(切换标签页到其他页面),cpu跟gpu消耗立马下降。

强烈不建议使用canvas动画做网页渲染

经过我观察每个使用canvas动画的网站发现,无一例外,他们的网站都很消耗用户浏览器的cpu和gpu。

这也就是我不建议使用cavnas动画的原因,如果你不会判断你的网站是否用了canvas动画,可以自己查看下源码是否包含canvas即可。

强烈不建议使用canvas动画做网页渲染

总之,你只需要记得任何涉及js渲染动画的,一般都是canvas动画。当然,纯css的动画,可以使用的,不影响用户cpu和gpu的占用。

最后,给你几个常见的canvas动画:http://www.bootstrapmb.com/chajian/canvas,强烈不建议使用。

共计5人评分,平均3.8

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/website/canvas-nouse-web.html

发表评论

登录后才能评论

评论列表(3条)

    本站APP
    本站APP
    分享本页
    返回顶部