I am using a webworker to load an 3D object for three.js. If i disable the browsercache the webworker has great performance, if i enable the browsercache and reload the page the webworker performs really bad.
Here are some debug outputs.
Performance browser cache disabled:
Page: starting...
Page: worker called at 0 miliseconds
Page: started loading file: ./Female_Idle_walk_idle_003.fbx.
Loaded 0 of 1 files.
Worker: start at 0 miliseconds
Worker: model load start at 0 miliseconds
Worker: loading model 13 miliseconds
Worker: loading model 51 miliseconds
Worker: model loaded! 2440 miliseconds
Page: loading file: ./Female_Idle_walk_idle_003.fbx.
Loaded 1 of 1 files.
Page: loading complete!
Page: model loaded!
Page: task finished in 5269 miliseconds
Page: worker replay at 6609 miliseconds
Page: worker task finished in 7547 miliseconds
Performance page reload with browser cache enabled:
Page: starting...
Page: worker called at 0 miliseconds
Page: started loading file: ./Female_Idle_walk_idle_003.fbx.
Loaded 0 of 1 files.
Page: loading file: ./Female_Idle_walk_idle_003.fbx.
Loaded 1 of 1 files.
Page: loading complete!
Page: model loaded!
Page: task finished in 2100 miliseconds
Worker: start at 2200 miliseconds
Worker: model load start at 2201 miliseconds
Worker: loading model 2208 miliseconds
Worker: loading model 2235 miliseconds
Worker: model loaded! 5907 miliseconds
Page: worker replay at 12989 miliseconds
Page: worker task finished in 13852 miliseconds
Does anybody have a clue why the webworker performs so much worse after a page reload?
worker.js:
importScripts('./three.js' + '?' + Math.random(),'./fflate.min.js' + '?' + Math.random(),'./FBXLoader.js' + '?' + Math.random());
addEventListener('message', e => {
const startTime = e.data;
console.log(`Worker: start at ${Number.parseInt(performance.now() - startTime)} miliseconds`);
// male loader
const maleLoader = new THREE.FBXLoader();
console.log(`Worker: model load start at ${Number.parseInt(performance.now() - startTime)} miliseconds`);
// male: async load
let pMale = maleLoader.loadAsync('../_Male_idle_02.fbx', function (object) {
console.log(`Worker: loading model ${Number.parseInt(performance.now() - startTime)} miliseconds`);
});
pMale.then(object => {
console.log(`Worker: model loaded! ${Number.parseInt(performance.now() - startTime)} miliseconds`);
postMessage(JSON.stringify(object));
});
});
main.js - worker call
const worker = new Worker('./webworker/worker.js' + '?' + Math.random());
worker.addEventListener('message', e => {
console.log(`Page: worker replay at ${Number.parseInt(performance.now() - startTime)} miliseconds`);
// male loader
const maleLoader = new THREE.ObjectLoader();
maleLoader.parse(JSON.parse(e.data), function (object) {
initModel(object);
scene.add(object);
console.log(`Page: worker finished in ${Number.parseInt(performance.now() - startTime)} miliseconds`);
});
});
I tried to use the blob approach, but then my imported scripts threw XHR-errors. I also added random numbers to the query string of my scripts and the webworker.js. Both did not help at all. I am clueless what is going on and need some advice. I also found nothing related to this topic.
Edit: What i try to accomplish with the webworker approach is that i want to optimize the loading times and also the performance.
- If i load both models with loadAsync() it takes ~8 sec till the scene is ready. No stuttering.
- If i load the main model first, and the second model afterwords, the rendering of the main model is stuttery → ~4 sec till the scene is ready, 8 sec till both models are available.
- With the webworker approach it takes 4 sec till the scene is ready, with no stuttering, but it works only on safari and chrome (there only on the first pageload).
- Firefox takes ~16 sec before the webworker finished its job.
Maybe i am on the wrong way all together and there is a better approach to load multiple objects as fast and fluent as possible?
Best regards, Chris