Browser gets blocked, workers to the rescue?

Question

Hello, I use JavaScript for rendering 20 tables of 100 rows each. The data for each table is provided by controller as JSON. Each table is split into section that have "totals" and have some other JavaScript logic code. Some totals are outside of the table itself.

As a result JavaScript blocks browser for a couple of seconds (especially in IE6) :(

I was consideting to use http://code.google.com/p/jsworker/, however Google Gears Workers (I guess workers in general) will not allow me to make changes to DOM at the worker code, and also it seems to me that I can not use jQuery inside jsworker worker code. (Maybe I am wrong here?).

This issue seems to be fundamental to the JavaScript coding practice, can you share with me your thoughts how to approach it?

Answer 1

You are not supposed to change the UI in a backgroundworker in general. You should always signal the main thread that the worker is finished, and return a result to the main thread whom then can process that.

HTML5 includes an async property for tags, and writing to your UI from there causes a blank page with just the stuff you wanted to write.

So you need another approach there. I am not a JS guru, so I can't help you with an implementation, but at least you now have the concept :)

Answer 2

Workers can only communicate with the page's execution by passing messages. They are unable to interact directly with the page because this would introduce enormous difficulties.

You will need to optimise your DOM manipulation code to speed up the processing time. It's worth consulting google for good practices.

One way to speed up execution is to build the table outside of the DOM and insert it into the document only when it is completed. This stops the browser having to re-draw on every insertion, which is where a lot of the time is spent.

Answer 3

If you want to dig into the world of browser performance, the High Performance Web Sites blog has heaps of great info — including when javascripts block page rendering, and best practice to avoid such issues.