生产版本

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

  

pixi与lottie-web的benchmark测试的更多相关文章

  1. 做web开发和测试,修改hosts指定某个域名访问某个特定的IP后,如何使hosts立即生效的方法

    本文转自SUN'S BLOG,原文地址:http://whosmall.com/post/143 hosts的配置方法: 在windows系统中,找到C:\windows\system32\drive ...

  2. Huxley 是一个用于Web应用 UI 测试的工具

    Huxley 是一个用于Web应用 UI 测试的工具,由  Pete Hunt 和 Maykel Loomans 用 Python 开发. UI 测试比较令人头疼. UI测试不好写,而且很容易失效: ...

  3. Web网站压力测试工具

    使用Microsoft Web Application Stress Tool对web进行压力测试 不错关于压力测试博客: http://blog.sina.com.cn/s/blog_5155e8d ...

  4. Web服务器压力测试一例

    近期部门新上线一个服务,我们使用ab和locust分别测试 目前项目属于demo阶段,对访问量的支持不要求太高,我们暂且设定在500请求,20并发 工具介绍 ab ab全称为:Apache HTTP ...

  5. Selenium也是一个用于Web应用程序测试的工具

    Selenium也是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE.Mozilla Firefox.Mozilla Suite ...

  6. ref:Web Service 渗透测试从入门到精通

    ref:https://www.anquanke.com/post/id/85910 Web Service 渗透测试从入门到精通 发布时间:2017-04-18 14:26:54 译文声明:本文是翻 ...

  7. Web应用扫描测试工具Vega

    Web应用扫描测试工具Vega   Vega是Kali Linux提供的图形化的Web应用扫描和测试平台工具.该工具提供代理和扫描两种模式.在代理模式中,安全人员可以分析Web应用的会话信息.通过工具 ...

  8. Web应用渗透测试框架Arachni

    Web应用渗透测试框架Arachni   Arachni是一款Ruby语言编写的Web应用渗透测试框架.当用户指定目标后,该框架可以自动扫描网站页面,对页面中的链接.表单.Cookie.HTTP He ...

  9. 三种web性能压力测试工具

    三种web性能压力测试工具http_load webbench ab小结 题记:压力和性能测试工具很多,下文讨论的是我觉得比较容易上手,用的比较多的三种 http_load 下载地址:http://w ...

随机推荐

  1. 基于6U VPX的 SRIO 接口, 和PCIe 接口的msata 固态存储卡

    基于6U VPX 的mSATA高性能数据存储板     一.板卡概述 该产品系我司自主研发.基于标准6U VPX架构. 二.产品特性       最大存储容量8TB        读写方式RAID0 ...

  2. Mongodb Capped Collection集合

    MongoDB 固定集合(Capped Collections)是性能出色且有着固定大小的集合,对于大小固定,我们可以想象其就像一个环形队列,当集合空间用完后,再插入的元素就会覆盖最初始的头部的元素! ...

  3. 前端每日实战:76# 视频演示如何用纯 CSS 创作一组单元素办公用品(内含2个视频)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMgmwB 可交互视频 此视频是可 ...

  4. Thymeleaf 基本用法总结

    Thymeleaf 基本用法总结 一.引用命名空间 <html xmlns:th="http://www.thymeleaf.org"> 在html中引入此命名空间,可 ...

  5. 使用burpsuite的几点经验

    背景: 最近在做完一个系统的渗透测试,我同事在我昨晚渗透测试之后上去看了一下,发现了了一个我没有发现的漏洞. 请教了他之后,发现这个漏洞他是通过burp的scan发现的,只是对一个有参数的请求包sca ...

  6. ssm框架错误展示-1

    1.xmlParse错误+找不到bean ,一般会出现在导入别的地方拷来的项目时发生,报了以下错误: 查看自己的项目配置文件,发现spring的配置文件和sql映射xml文件都有个黄颜色的感叹号,鼠标 ...

  7. php ltrim()函数 语法

    php ltrim()函数 语法 ltrim()函数怎么用? php ltrim()函数用于删除字符串左边的空格或其他预定义字符,语法是ltrim(string,charlist),返回经过charl ...

  8. BZOJ 4238 电压 解题报告

    BZOJ 4238 电压 考虑一条边成为答案以后,删去Ta后剩下的图是一个或很多个二分图,即没有奇环 则一条边可以成为答案,当且仅当自己在所有奇环的交上且不在偶环上. 考虑建出dfs树,那么返祖边一定 ...

  9. 牛客多校训练营第九场 J - Symmetrical Painting (排序)

    J - Symmetrical Painting 题意 给你\(n\)个矩形, 左下角\((i-1,\ L_i)\), 右上角\((i,\ R_i)\), 找一条线\(l\)平行于\(x\)轴, 让这 ...

  10. HBASE(分布式海量NOSQL数据库)

    HBase建表高级属性,hbase应用案例看行键设计,HBase和mapreduce结合,从Hbase中读取数据.分析,写入hdfs,从hdfs中读取数据写入Hbase,协处理器和二级索引 1. Hb ...