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新手做出来的项目很卡，都是掉这个坑里的）。

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。

20：所有素材一定要填满整个canvas 不能留有通道部分，不然也会卡。

21：舞台大小不能超过750*1489，超过了某些机子会卡，如果素材很长，那就在canvas内部做滚动。

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