Web-workers: bad performance after page reload

Questions
, ,
#1

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

#2

/cc