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

测试代码

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);
}

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)
}