pixi与lottie-web的benchmark测试

 生产版本

 

"dependencies": {

    "lottie-web": "^5.5.7",

    "pixi-spine": "^1.5.23",

    "pixi.js": "^4.8.8"

}

 

讲座项目对资源做对比

ps:测试网络环境:fast 3g

库	gzip大小	打包使用的资源	资源数	加载方式	绘制	FP	onload
pixi&pixi-spine	34.08+77.04 = 121.12kb	147kb	4	xhr	webGL/canvas	1409ms	15147ms
lottie-web	61.5kb	291 +41 = 332kb	30	非xhr	canvas/svg	1416ms	13978ms

pixi

      Pixi 是一个相当完善的基于 WebGL 的 2D 渲染层，对不支持 WebGL 浏览器可采用 Canvas 垫背（2D WebGL renderer with canvas fallback）。

       设计理念 Pixi.js的设计理念很多程度来源于它的定位，只做渲染器，要把渲染功能做到最强。而这样的定位，则会让Pixi.js成为其他引擎的渲染内核。Pixi.js中的显示架构完全参考Flash设计，所有显示对象组合为一个树状数据结构，但内部已针对WebGL渲染方式进行过优化，上层使用起来和Flash并无太大差别。

业界使用

Phaser并没有自己的渲染内核，而是直接引用了Pixi.js。

 

渲染压力测试

测试内容为同屏渲染对象数量相同的情况下进行帧频数据对比，为了保证测试的公平性，我使用同一台电脑，相同版本的Chrome浏览器进行测试，游戏场景尺寸均为800*600，显示的图片也为同一张。

100、300、500、600、1000、2000、3000个显示对象渲染。

 电脑配置

 

库/显示对象数量	100	300	500	600	1000	2000	2500	3000
pixi	60	60	60	59.9	59	35	32	28
lottie-web(canvas)	55	40	36	24	10	-	-	-
lottie-web(svg)	40	25	10	-	-	-	-	-

结论

对与显示对象小于600的,pixi与lottie在可接受范围内,对于大于600个渲染对象的项目,需要使用pixi

对于小于100个显示对象的,三种渲染方式都可行,但pixi要优于lottie-web

 

 测试代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

require('pixi.js')    var renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });    document.body.appendChild(renderer.view);    var stage = new PIXI.Container();    var texture = PIXI.Texture.fromImage('./lottie-assets/images/img_0.png');    var tnum = 1000;    console.log("render Object Number:", tnum);    var bunnys = [];    for (var i = 0; i < tnum; i++) {      var bunny = new PIXI.Sprite(texture);      bunny.position.x = Math.random() * 800;      bunny.position.y = Math.random() * 600;      stage.addChild(bunny);      bunnys.push(bunny);    }    animate();    function animate() {      requestAnimationFrame(animate);      for (var i = 0; i < tnum; i++) {        // bunnys[i].rotation += 0.1;      }   renderer.render(stage); }

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import lottie from 'lottie-web'    animate();    function animate() {      requestAnimationFrame(animate);   lottie.loadAnimation({     container: document.body, // the dom element that will contain the animation     renderer: 'canvas',     loop: false,     autoplay: true,     path: './lottie-assets/data1.json' // the path to the animation json   });   var timer = null;   clearTimeout(timer)   timer = setTimeout(function () {     lottie.destroy();   },2000) }