期望自己项目加载速度能够飞快,所以尝试研究下预加载和动态加载图片.
在研究预加载图片时,想看下图片加载IO开销和图片大小之间的关系,遂采用宽高分别为1,32,256,512的图片进行加载对比.
大致代码如下:
const resourceStartTime = Date.now();
const path = `${this.assetName}/${this.png2}`;
resources.load(path, ImageAsset, (err, imageAsset: ImageAsset) => {
if (err) {
console.error(`Failed to load image: ${path}`, err);
return;
}
const resourceEndTime = Date.now();
const loadTime = resourceEndTime - resourceStartTime;
console.log(`图片资源 ${path} 加载时间: ${loadTime} ms`);
// 创建纹理并应用
const texture = new Texture2D();
texture.image = imageAsset;
const spriteFrame = new SpriteFrame();
spriteFrame.texture = texture;
this.node1!.getComponent(Sprite)!.spriteFrame = spriteFrame;
});
考虑到图片之间可能加载需要时间,所以每一个加载都设置了延迟
start() {
this.scheduleOnce(()=>{this.load2();}, 2);
this.scheduleOnce(()=>{this.load32();}, 4);
this.scheduleOnce(()=>{this.load256();}, 6);
this.scheduleOnce(()=>{this.load512();}, 8);
}
期望通过加载不同大小图片,控制台打印其在resource.load的加载时间,通过对比,获得图片基本加载IO开销和图片大小的关系.
预计是这样:图片载入固定IO开销+图片大小动态开销.
比如1像素图片可能约等于图片载入固定IO开销.
图片32像素图片开销=固定载入IO开销+3232大小动态开销.
图片256·像素图片开销=固定载入IO开销+64个(3232大小动态开销)
图片512像素图片开销=固定IO开销+4个(256大小动态开销)
但是结果打印出来的时间,让我完全摸不到头脑:
第一次更新缓存后,加载耗时:
图片资源 sprites/testpixel/1 pixels 加载时间:19 ms
图片资源 sprites/testpixel/32 pixels 加载时间:6 ms
图片资源 sprites/testpixel/256_pixels 加载时间:13 ms
图片资源 sprites/testpixel/512 pixels 加载时间:13 ms
然后继续刷新后耗时:
图片资源sprites/testPixel/1 pixels 加载时间:6 ms
图片资源sprites/testpixel/32 pixels 加载时间:6 ms
图片资源sprites/testPixel/256 pixels 加载时间:12 ms
图片资源sprites/testpixel/512 pixels 加载时间:11 ms
看上去11和3232的差不多,但是256256和512512的也差不多?
有时候刷新的结果,比较接近预期:
图片资源sprites/testPixel/1 pixels 加载时间:6 ms
图片资源sprites/testPixel/32 pixels 加载时间:6ms
图片资源sprites/testpixel/256 pixels 加载时间:11 ms
图片资源sprites/testPixel/512 pixels 加载时间:13 ms
这些数据,让我挺难去评估单次加载IO开销和图片大小的开销,想请教大家关于图片耗时有没有好的解决方案。
项目导出如下:TestLoadPngRes.zip (626.6 KB) TestLoadPngRes.zip (626.6 KB) TestLoadPngRes.zip (626.6 KB)