javascript с предварительной загрузкой сложных данных - PullRequest
Новая
       0

javascript с предварительной загрузкой сложных данных

3 голосов
/ 28 января 2012

У меня есть простая веб-страница, которая служит введением в более сложный набор данных.

Этот сложный набор данных занимает много времени для визуализации.

Для новых пользователей, когда они приходят на простую веб-страницу, я начинаю отображать сложную страницу в памяти, создавая html-элементы и т. Д., Не вставляя их в dom.

Однако это все еще заметно медленно и приводит к остановке и задержке прокрутки на странице введения.

Я думаю об использовании веб-работников. Но прежде чем я сделаю что-то подобное, я спрашиваю, так ли это на самом деле или есть и другие возможные решения. Спасибо.

Edit:

Думая об этом, я на самом деле не обращаюсь к dom при рендеринге данных, движок шаблонов собирает строки для создания html, поэтому с веб-мастерами все в порядке.

Есть ли что-нибудь, что можно рассказать об этом методе?

Ответы [ 2 ]

2 голосов
/ 28 января 2012

Конечно, веб-работники могли бы пойти по этому пути.Но для браузеров, которые не поддерживают веб-работников (IE <10), есть запасной подход: </p>

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

Итак, этот код: 

for (var i = 0; i < data.length; i++) {
    processData(data[i]);
}

Получается так: 

var i = 0;
(function processNext() {
    if (i < data.length) {
        processData(data[i++]);
        setTimout(processNext, 0);
    }
})();

Это не идеально - если processData() делает слишком много, пользовательский интерфейс все равно будет неприемлемо не отвечать.С другой стороны, если это не очень много, это может сильно замедлить обработку данных.В последнем случае вы можете обрабатывать определенное количество итераций за раз перед вызовом setTimeout: 

var i = 0;
(function processNext() {
    if (i < data.length) {
        for (var stop = i + 100; i < stop && i < data.length; i++) {
            processData(data[i]);
        }
        setTimout(processNext, 0);
    }
})();
1 голос
/ 28 января 2012

Я не думаю, что веб-работники подходят вам, поскольку у них нет доступа к DOM. Вы не сможете взаимодействовать с исходной веб-страницей, кроме как отправлять ей текстовые «сообщения».

Если вы просто делаете вычисления и хотите отправить их на исходную веб-страницу, тогда веб-работники будут великолепны. 

var pi = Computepi();
self.postMessage('Pi is: ' + pi);

Однако вы не можете сделать что-то вроде 

var canvas = document.createElement("canvas");
DrawComplexFractal(canvas);
self.postMessage(canvas);

Нет веб-работника, имеющего окно или объект документа.

...