Нокаут JS и большие модели

Question

Я пытаюсь выяснить лучшие способы использования KnockoutJS, и мне нужен ваш совет.

Моя модель представления содержит набор «документов», каждый из которых имеет набор «значений».Каждый «документ» отображается как отдельная таблица с использованием следующего шаблона:

<div data-bind="foreach: Documents">
        <table data-bind="foreach: Values">
            <tr data-bind="foreach: $data">
                 <td data-bind="attr: {colspan: Colspan}">
                    <label data-bind="text: Label"></label>
                    <br />
                    <span data-bind="html: Value"></span>
                </td>
            </tr>
        </table>
</div>

Все отлично работает, за исключением случаев, когда модели представления большие.

Например, если размер модели представлениясоставляет около 1 мегабайта (и содержит 80 документов с 60 значениями в каждом), то рендеринг на моей машине занимает более двух минут.

Мне интересно, есть ли способ значительно улучшить производительность ... Или это будетБыстрее отказаться от Knockout и просто создать html на стороне сервера и просто отправить его в браузер ...

Рендеринг "всего лишь" 300-килобайтной модели представления занимает около 30 секунд.

«Документы» определяются пользователями, поэтому существует даже более 2 мегабайтных сценариев (я не знаю, зачем они это делают).

Кто-нибудь имеет опыт работы с моделями большого представления в JavaScript?

Answer 1

Учитывая ваши текущие требования неспособности выполнять отложенную загрузку данных (нагрузка по требованию), вы довольно ограничены.

СТОРОНА СЕРВЕРА HTML

Генерация HTML на стороне сервера будет самым быстрым способом. Но даже в этом случае, если модель огромна, будет задержка. Рассмотрите возможность загрузки HTML-файла размером 5 МБ, вашему браузеру потребуется некоторое время для анализа и рендеринга чего-то такого большого.

ЕЩЕ ИСПОЛЬЗОВАНИЕ KNOCKOUT JS

Если вы все еще хотите использовать свою платформу Knockout JS, я рекомендую поместить каждый документ в IFRAME. На самом деле это не рекомендуется и может привести к дополнительной нагрузке на ваш сервер, но при правильной реализации это ускорит ваше взаимодействие с пользователем.

www.mysite.com/view/1

<div>
    <iframe src="www.mysite.com/view/1/document/1"></iframe></div>
<div>
    <iframe src="www.mysite.com/view/1/document/2"></iframe></div>
...

www.mysite.com/view/1/document/1

<!-- Just the single Document template -->
   <table data-bind="foreach: Values">
        <tr data-bind="foreach: $data">
             <td data-bind="attr: {colspan: Colspan}">
                <label data-bind="text: Label"></label>
                <br />
                <span data-bind="html: Value"></span>
            </td>
        </tr>
    </table>

Клиентский браузер первоначально получит весь HTML-код, содержащий все IFRAME, он будет отправлять запросы для каждого асинхронно. Каждый отдельный запрос документа будет обрабатываться с использованием Knockout JS в своем собственном кадре асинхронно.

Чтобы улучшить взаимодействие с пользователем, вы даже можете настроить события загрузки для IFRAME. Событие load может изменить размер IFRAME, чтобы не было полосы прокрутки, или извлечь HTML-код из IFRAME и заменить элемент IFRAME на извлеченный HTML.

Answer 2

Нативный движок шаблонов в KO не особенно быстрый.Сначала я бы попробовал движок jQuery.tmpl (, описанный здесь ).Если это не достаточно быстро, вы должны попытаться уменьшить объем отображаемого содержимого - скажем, только сначала отображать заголовок для каждого документа, а затем отображать детали при его выборе или расширении.

Answer 3

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

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