Making firefox refresh images faster

Question

I have a thing I'm doing where I need a webpage to stream a series of images from the local client computer. I have a very simple run here: http://jsbin.com/idowi/34

The code is extremely simple

setTimeout ( "refreshImage()", 100 );

function refreshImage(){
  var date = new Date()
  var ticks = date.getTime()
  $('#image').attr('src','http://127.0.0.1:2723/signature?'+ticks.toString());
  setTimeout ("refreshImage()", 100 );
}

Basically I have a signature pad being used on the client machine. We want for the signature to show up in the web page and for them to see themselves signing it within the web page(the pad does not have an LCD to show it to them right there). So I setup a simple local HTTP server which grabs an image of what the current state of the signature pad looks like and it gets sent to the browser.

This has no problems in any browser(tested in IE7, 8, and Chrome) but Firefox where it is extremely laggy and jumpy and doesn't keep with the 10 FPS rate. Does anyone have any ideas on how to fix this? I've tried creating very simple double buffering in javascript but that just made things worse.

Also for a bit more information it seems that Firefox is executing the javascript at the correct framerate as on the server the requests are coming in at a constant speed. But the images are only refreshed inconsistently ranging from 5 times per second all the way down to 0 times per second(taking 2 seconds to do a refresh)

Also I have tried using different image formats all with the same results. The formats I've tried include bitmaps, PNGs, and GIFs (GIFs caused a minor problem in Chrome with flicker though)

Could it be possible that Firefox is somehow caching my images causing a slight lag? I send these headers though:

Pragma-directive: no-cache
Cache-directive: no-cache
Cache-control: no-cache
Pragma: no-cache
Expires: 0

Answer 1

The lag may be caused by the way Firefox handles DNS queries and support for IPv6.

Try turning off IPv6 lookups and see if that solves the lag.

Answer 2

Maybe you've tried this; you said you'd tried "double buffering", but this wouldn't be quite the same. Instead of having one <img> tag whose "src" you update, have several (10, maybe). Start them off all "display: none". Handler the "load" event on the <img> tags with a function that hides every other <img> except itself. Have your interval timer (which should be an interval timer, probably, and not a series of timeouts like that) iterate through the list of tags, much like it does now.

Will that smooth things out? I'm not sure. I'd certainly try it.

Answer 3

Ok so turns out this is one of the many leaks of Firefox. I had my firefox session running for days. I restarted it just now and opened up the page and it(and other javascript stuff) ran up to speed. With it being restarted I can now get down to even 50ms refresh rates, though it's not required.

So there isn't really a "fix" to this problem other than to restart firefox every once in a while.