createjs性能优化(持续更新)

  • 内容
  • 评论
  • 相关

本人平时累积的一点性能优化的方法,汇总了一下分享给大家: 

1:少用矢量多用位图,Text shape都算矢量(如果是用 flashCC或者animateCC做的,在里面就直接把字和矢量图转成位图)。 

2:减少动画重绘区域(动画的矩形区域)。 

3:屏幕外的对象及时移出舞台或直接销毁。 

4:因为垃圾回收机制的原因,对象重用好过直接销毁,对象重用使用对象池,对象销毁网上搜索js的垃圾回收。 

5:如果项目较大或对性能要求较高,少用movieclip多用sprite(特别是大型序列图,千万别用movieclip)。

6:使用新的animate cc可以把png,jpg图片分别合成一张图片,可以加快加载速度。

7:图片太大会影响性能,所以用animateCC导出图片的时候,推荐图片不大于2000*2000,最好是按下图配置(6,7两项都参考这个配置,很多animateCC新手做出来的项目很卡,都是掉这个坑里的)。

QQ图片20190419150110.png

8:图片可以通过tinypng.com缩减大小。

9:尽量不要用滤镜和叠加效果,如果要用,直接做进图片里面。 

10:减少容器之间的嵌套。 

11:不用的侦听就取消掉,特别是tick。

12:嵌套一堆movieclip然后用gotoAndStop去控制这种方法尽量不要去用。

13:createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED或者createjs.Ticker.timingMode = createjs.Ticker.RAF可以提高Tick的性能(部分浏览器不支持)

14:所有基于canvas的引擎都一样,尽量少用旋转,缩放,alpha的操控。

15:在使用createjs.Ticker.timingMode =  createjs.Ticker.RAF_SYNCHED;时注意FPS设置的比预期高一点,比如你要帧频30就要设置成32。因为RAF的机制一但30到不了他就降级,30的下一级就是20,会造成程序慢很多。(现在还是推荐使用createjs.Ticker.timingMode = createjs.Ticker.RAF只不用用了之后就只能以60帧运行了)

16:使用stagegl可以大幅度优化性能!

17:如果某些项目必须用矢量,滤镜,叠加模式,或者含有非常多子元件,可以通过使用SpriteSheetBuilder进行位图渲染,从而优化,教程博客里有,自己搜。

18:animateCC中的遮罩相当于把整个动画序列帧化,矢量化,所以也尽量少用,如果实在要用,操作方法跟处理矢量一样。

19:对复杂的不变对象,或者矢量,滤镜,使用cache可以增加性能,但是有内部动画的对象你必须要不停的cache,才会动,非常浪费性能。所以,尽量学会用SpriteSheetBuilder(位图渲染)代替cache。

 如果大家也有优化性能的方法,请留言在帖子底下,谢谢。

1542183776360437.jpg

评论

15条评论
  1. Gravatar 头像

    匿名 回复

    适当cache

  2. Gravatar 头像

    kdashas 回复

    楼主,又来请教了,有些createjs动画在ios运行的很流畅,可是切换回主屏幕,然后再切换回去的时候,动画突然变得特别卡是怎么回事啊

  3. Gravatar 头像

    sain 回复

    您好,我想请教一下,creatjs做一个网站东西很多的时候如何主动释放缓存。清除之前用不到的动画或者图片信息。谢谢

    • Gravatar 头像

      ajex 回复

      @sain 你搜索一下js的垃圾回收机制

      • Gravatar 头像

        匿名 回复

        @ajex 我看网上一般的释放都是直接设置为Null.然后等循环的时候就回收掉了,我以为creatjs会直接提供方法释放,但是API里找不到。也没有类似摧毁之类的功能。
        另外能抽空给介绍一下creatjs结合webgl的使用么,3D这块完全没经验。谢谢。

        • Gravatar 头像

          ajex 回复

          @匿名 制空相当于摧毁(需要把所有可能的引用都拿掉),只不过回收的时间是不定的,所以我建议对象复用。
          至于createjs的webgl,因为api支持比较遭,所以我建议做2个canvas,一个是webgl,一个不是,需要用到大量对象动画的使用webgl的。

          • Gravatar 头像

            sain

            @ajex 非常感谢,我会自己研究一下,也期待你能推出更好的文章学习。

      • Gravatar 头像

        sain 回复

        @ajex 忘记写名字了。。。我是sain

        • Gravatar 头像

          ajex 回复

          @sain 现在出了stagegl了,createjs结果webgl已经没有问题了

  4. Gravatar 头像

    tym 回复

    学习了你的好文章,我的网站全用animateCC+creatjs做的。www.tezz.cn

  5. Gravatar 头像

    xun_h 回复

    你好啊,为什么我animate cc做出来的h5 在安卓端帧率低得离谱啊,完全动不了,设置了createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED或者createjs.Ticker.timingMode = createjs.Ticker.RAF 也没效果,望大大回答,我会在微薄的工资里面赞助一下大大的

    • Gravatar 头像

      ajex 回复

      @xun_h 上面所有的选项你都排查过了么

    • Gravatar 头像

      匿名 回复

      @xun_h 是不是没有在html里加上?

    • Gravatar 头像

      匿名 回复

      @xun_h 尖(meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"尖)

发表评论

电子邮件地址不会被公开。