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