在所有主流浏览器中，GIF动画是否与javascript在同一个线程上运行？

Question

I show an animated GIF that runs while my AJAX request is in progress and gets stopped once my script has processed the response.

While this works, I notice that while the response from the request is being processed in my script (which contains some fairly heavy updating of the DOM) the animation freezes.

My research leads me to believe that this is because the animation of the GIF happens on the same thread that javascript is running on - that the browser is truly single-threaded. Is this the correct interpretation for all current mainstream browsers (eg Chrome, Firefox, Safari, IE)?

Secondly, why is it done this way? Is it really not possible that the browser could dedicate a thread to GIF animations so they didn't freeze when a block of javascript was being executed?

Update

This is an interesting page. It talks about using pure CSS3 animations. They still freeze in Firefox though - maybe soon FF will fix this. Looks like I should be considering CSS for animation rather that using a GIF.

Answer 1

I suppose the problme is (IMHO) that when you update the dom the browser do not repaint the page, so the image freeze.

Try to do heavy thing without change dom, the gif should animate (slowly if your cpu is busy) but not freeze.

If it freeze anyway you could explicitly create a new thread for that work (using webworker) but if i remember right you could not change dom form a webworker.

Answer 2

This is probably well known by now, but CSS3 has it's own thread in most modern browsers. You should be able to set a breakpoint in javascript and still see your css animation running. Check out this link to see how to animate a sprite with pure css:

http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps