My web application makes use of a setInterval() task, and the code runs perfectly well in Chrome. Unfortunately, for the exact same code in Firefox, the task is slowed down considerably.
To demonstrate, I set the interval to 20 msec.
startZoomTime = Date.now();
intervalZoomTransform = setInterval(zoomTransformImg, 20, endWidth, startWidth);
The function zoomTransformImg() has a first code line:
console.log("zoomcycle start:" + (Date.now() - startZoomTime));
It also has the following last line before exiting, put in to check that the routine itself does not take longer to execute than the timer interval.
console.log("zoom finished:" + (Date.now() - startZoomTime));
Following are the iterations from Chrome (Version 96.0.4664.45 (Official Build) (64-bit)) and Firefox (94.0 (64-bit)) for the exact same code.
Chrome (first 10 cycles):
endWidth:1148, startWidth:960
zoomcycle start:20
zoom finished:20
zoomcycle start:40
zoom finished:40
zoomcycle start:60
zoom finished:60
zoomcycle start:80
zoom finished:80
zoomcycle start:100
zoom finished:100
zoomcycle start:120
zoom finished:120
zoomcycle start:140
zoom finished:140
zoomcycle start:160
zoom finished:160
zoomcycle start:180
zoom finished:180
zoomcycle start:200
zoom finished:200
Firefox (first 10 cycles):
endWidth:800, startWidth:640
zoomcycle start:20
zoom finished:21
zoomcycle start:202
zoom finished:203
zoomcycle start:389
zoom finished:390
zoomcycle start:582
zoom finished:583
zoomcycle start:769
zoom finished:771
zoomcycle start:1050
zoom finished:1050
zoomcycle start:1090
zoom finished:1091
zoomcycle start:1131
zoom finished:1133
zoomcycle start:1165
zoom finished:1166
zoomcycle start:1198
zoom finished:1199
On Chrome, the code being called never takes more than 1 msec to execute. On Firefox, it can take as much as 2 msec. But this is well below what I’ve read in the documentation about Firefox throttling to 4 msec intervals in certain circumstances.
The delay on Firefox, by the 10th iteration, settles down to roughly 30 msec and pretty much stays at this rate until the last iteration.
The code being called is changing an image width. For various reasons, I have to do this manually, not by changing the assigned class, as there can be a simultaneous location translation (which is handled by changing the assigned class). But to be clear, this throttling of the called method occurs even when the image position is static.
The MDN documentation directed me to the following: Set Timeout, Reasons for delays longer than specified. But I am not seeing how any of these conditions are applicable.
The only plugins on my Firefox are the following, so I don’t think the browser is doing anything significant in the background.
- OpenH264 Video Codec provided by Cisco Systems, Inc.
- Widevine Content Decryption Module provided by Google Inc.
Is this a known issue? Are there suggested work-arounds? (If Java, I would consider coding a “gameloop” type thread to run the operation and calculate the needed amount of sleep before the next iteration).
Ultimately I’m hoping for a 7 msec increment for the transitional image size zoom in/out changes. But I could probably make 15 to 20 work, if needed.
I’m working on a minimal example, but so far I haven’t been able to recreate the error. So there must be some operation in my code that is triggering Firefox in some manner. At this point, suggestions as to what to look for would be helpful (as I incrementally add to the example being built).