Браузер блокируется, рабочие на помощь?

Question

Я использую JavaScript для рендеринга 20 таблиц по 100 строк в каждой. Данные для каждой таблицы предоставляются контроллером в виде JSON. Каждая таблица разбита на разделы, которые имеют «итоги» и имеют некоторый другой логический код JavaScript. Некоторые итоги находятся за пределами самой таблицы.

В результате JavaScript блокирует браузер на пару секунд (особенно в IE6): (

Я собирался использовать http://code.google.com/p/jsworker/, Однако Google Gears Workers (я полагаю, работники в целом) не позволят мне вносить изменения в DOM в рабочем коде, а также мне кажется, что я не могу использовать jQuery внутри рабочего кода jsworker. (Может я тут не прав?).

Эта проблема, кажется, является фундаментальной для практики кодирования JavaScript, не могли бы вы поделиться со мной своими мыслями о том, как к ней подойти?

Answer 1

Работники могут общаться только с выполнением страницы, передавая сообщения. Они не могут напрямую взаимодействовать со страницей, потому что это создает огромные трудности.

Вам нужно будет оптимизировать код манипуляции DOM, чтобы ускорить время обработки. Это стоит проконсультироваться с Google для хороших практик.

Одним из способов ускорить выполнение является создание таблицы вне DOM и вставка ее в документ только после ее завершения. Это избавляет браузер от необходимости перерисовывать каждую вставку, на которую тратится много времени.

Answer 2

Если вы хотите окунуться в мир производительности браузера, в блоге High Performance Web Sites есть куча полезной информации, в том числе, когда javascripts блокирует рендеринг страниц, и рекомендации по предотвращению подобных проблем.

Answer 3

Вы не должны изменять пользовательский интерфейс в фоновом режиме в целом. Вы должны всегда сообщать основному потоку, что рабочий завершен, и возвращать результат главному потоку, который затем может это обработать.

HTML5 включает асинхронное свойство для тегов, и запись в ваш пользовательский интерфейс приводит к пустой странице с тем материалом, который вы хотели написать.

Так что вам нужен другой подход. Я не гуру JS, поэтому я не могу помочь вам с реализацией, но, по крайней мере, теперь у вас есть концепция:)