如何在DOM注入之后和大规模DOM操作之前强制浏览器重绘（setTimeout无效）

Question

I'm displaying a large table and I'd like to show loading overlay during re-rendering (reordering of columns, applying filter). Funny but window.setTimeout doesn't help. Seems like browser rendering gets so seriously delayed it catches up with timeout delayed render events and still finishes everything in an optimized single paint batch. Question is relevant to newest stable Chrome and Firefox.

this.fader.show();
window.setTimeout(function(){
    self._reshuffleMenu();
    self.table.fnDraw();
}, 100);
    window.setTimeout(function(){
    self.fader.hide();
}, 200);

So any option to control browser rendering queue?

Observations:

• Chrome is stable for ommitting setTimout queued actions, while Firefox shows split behavior - sometimes paints loading overlay, sometimes ommits it.

Notes:

• I've started with timeout set to 0, but even with 100ms rendering still queues up
• Starting a page with loading placeholder and replacing it with table rows is not an option, cause I need indicator to show up on table changes, not initial load

Answer 1

Javascript runtime is implemented as a single-threaded language in most of the browsers, so setTimeout is no exception from that. When your rendering is finished then runtime engine checks for timout events, and triggers them.

Perhaps you can find more answers here:

why Javascript SetTimeout() is not multithreaded

Answer 2

I was able to achieve desired behavior via requestAnimationFrame . The technique is based on calling first frame for overlay display, and doing rest of heavy rendering in next request.

requestAnimationFrame(function(){
     mvc.Fader.show(self.region);
     requestAnimationFrame(callback);
});

During research I've found this How to test (automatedly) that an operation occurs after browser repaint? that gave me a hint to requestAnimationFrame. Links lists 2 more tricks that I haven't tried yet.