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)
}
pixi与lottie-web的benchmark测试的更多相关文章
- 做web开发和测试,修改hosts指定某个域名访问某个特定的IP后,如何使hosts立即生效的方法
本文转自SUN'S BLOG,原文地址:http://whosmall.com/post/143 hosts的配置方法: 在windows系统中,找到C:\windows\system32\drive ...
- Huxley 是一个用于Web应用 UI 测试的工具
Huxley 是一个用于Web应用 UI 测试的工具,由 Pete Hunt 和 Maykel Loomans 用 Python 开发. UI 测试比较令人头疼. UI测试不好写,而且很容易失效: ...
- Web网站压力测试工具
使用Microsoft Web Application Stress Tool对web进行压力测试 不错关于压力测试博客: http://blog.sina.com.cn/s/blog_5155e8d ...
- Web服务器压力测试一例
近期部门新上线一个服务,我们使用ab和locust分别测试 目前项目属于demo阶段,对访问量的支持不要求太高,我们暂且设定在500请求,20并发 工具介绍 ab ab全称为:Apache HTTP ...
- Selenium也是一个用于Web应用程序测试的工具
Selenium也是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE.Mozilla Firefox.Mozilla Suite ...
- ref:Web Service 渗透测试从入门到精通
ref:https://www.anquanke.com/post/id/85910 Web Service 渗透测试从入门到精通 发布时间:2017-04-18 14:26:54 译文声明:本文是翻 ...
- Web应用扫描测试工具Vega
Web应用扫描测试工具Vega Vega是Kali Linux提供的图形化的Web应用扫描和测试平台工具.该工具提供代理和扫描两种模式.在代理模式中,安全人员可以分析Web应用的会话信息.通过工具 ...
- Web应用渗透测试框架Arachni
Web应用渗透测试框架Arachni Arachni是一款Ruby语言编写的Web应用渗透测试框架.当用户指定目标后,该框架可以自动扫描网站页面,对页面中的链接.表单.Cookie.HTTP He ...
- 三种web性能压力测试工具
三种web性能压力测试工具http_load webbench ab小结 题记:压力和性能测试工具很多,下文讨论的是我觉得比较容易上手,用的比较多的三种 http_load 下载地址:http://w ...
随机推荐
- 基于6U VPX的 SRIO 接口, 和PCIe 接口的msata 固态存储卡
基于6U VPX 的mSATA高性能数据存储板 一.板卡概述 该产品系我司自主研发.基于标准6U VPX架构. 二.产品特性 最大存储容量8TB 读写方式RAID0 ...
- Mongodb Capped Collection集合
MongoDB 固定集合(Capped Collections)是性能出色且有着固定大小的集合,对于大小固定,我们可以想象其就像一个环形队列,当集合空间用完后,再插入的元素就会覆盖最初始的头部的元素! ...
- 前端每日实战:76# 视频演示如何用纯 CSS 创作一组单元素办公用品(内含2个视频)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMgmwB 可交互视频 此视频是可 ...
- Thymeleaf 基本用法总结
Thymeleaf 基本用法总结 一.引用命名空间 <html xmlns:th="http://www.thymeleaf.org"> 在html中引入此命名空间,可 ...
- 使用burpsuite的几点经验
背景: 最近在做完一个系统的渗透测试,我同事在我昨晚渗透测试之后上去看了一下,发现了了一个我没有发现的漏洞. 请教了他之后,发现这个漏洞他是通过burp的scan发现的,只是对一个有参数的请求包sca ...
- ssm框架错误展示-1
1.xmlParse错误+找不到bean ,一般会出现在导入别的地方拷来的项目时发生,报了以下错误: 查看自己的项目配置文件,发现spring的配置文件和sql映射xml文件都有个黄颜色的感叹号,鼠标 ...
- php ltrim()函数 语法
php ltrim()函数 语法 ltrim()函数怎么用? php ltrim()函数用于删除字符串左边的空格或其他预定义字符,语法是ltrim(string,charlist),返回经过charl ...
- BZOJ 4238 电压 解题报告
BZOJ 4238 电压 考虑一条边成为答案以后,删去Ta后剩下的图是一个或很多个二分图,即没有奇环 则一条边可以成为答案,当且仅当自己在所有奇环的交上且不在偶环上. 考虑建出dfs树,那么返祖边一定 ...
- 牛客多校训练营第九场 J - Symmetrical Painting (排序)
J - Symmetrical Painting 题意 给你\(n\)个矩形, 左下角\((i-1,\ L_i)\), 右上角\((i,\ R_i)\), 找一条线\(l\)平行于\(x\)轴, 让这 ...
- HBASE(分布式海量NOSQL数据库)
HBase建表高级属性,hbase应用案例看行键设计,HBase和mapreduce结合,从Hbase中读取数据.分析,写入hdfs,从hdfs中读取数据写入Hbase,协处理器和二级索引 1. Hb ...