Knockout JS i duże modele

Question

Próbuję znaleźć najlepsze sposoby korzystania z KnockoutJS i potrzebuję twojej porady.

Mój model widoku zawiera zestaw "dokumentów", każdy z nich ma zestaw "wartości". Każdy „dokument” jest wyświetlany jako osobnej tabeli przy użyciu następującej formy:

<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> 

Wszystko działa poprawnie z wyjątkiem gdy widok modele są duże.

Na przykład, jeśli rozmiar modelu widoku wynosi około 1 megabajt (i zawiera 80 dokumentów po 60 wartości), renderowanie zajmuje więcej niż dwie minuty na moim komputerze.

Zastanawiam się, czy istnieje sposób, aby znacząco poprawić wydajność ... Albo to będzie szybciej zrezygnować z Knockout i po prostu zbudować html na stronie serwera i po prostu wcisnąć go do przeglądarki ...

Renderowanie "tylko" modelu widoku 300kb zajmuje blisko 30 sekund.

"Dokumenty" są definiowane przez użytkowników, więc są nawet scenariusze> 2 megabajty (nie wiem, dlaczego to robią).

Czy ktoś ma doświadczenie z dużymi modelami widoku w JavaScript?

Answer 1

Przy obecnym zapotrzebowaniu na brak danych o obciążeniu na żądanie (obciążenie na żądanie) jesteś dość ograniczony.

Server Side HTML

Generowanie HTML po stronie serwera będzie najszybsza metoda. Ale nawet jeśli model jest ogromny, nastąpi opóźnienie. Rozważ pobranie pliku HTML o wielkości 5 MB, zajmie trochę czasu przeglądanie i renderowanie czegoś tak dużego.

nadal korzystać nokaut JS

Jeśli chcesz nadal korzystać z ram Knockout JS następnie moja najlepsza propozycja jest umieścić każdy dokument w iframe. Nie jest to zalecane i spowodowałoby dodatkowe obciążenie serwera, ale jeśli zostało to poprawnie zaimplementowane, przyspieszyłoby to komfort pracy użytkownika.

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> 

Przeglądarka klienta początkowo otrzyma cały kod HTML zawierający wszystkie ramki IFRAME, które będą asynchronicznie wysyłać żądania dla każdego z nich. Każde pojedyncze żądanie Dokumentu będzie renderowane za pomocą Knockout JS w jego własnej ramce asynchronicznie.

Aby poprawić interakcję użytkownika, można nawet ustawić zdarzenia ładowania w elementach IFRAME. Zdarzenie load może albo zmienić rozmiar IFRAME, tak aby nie było paska przewijania, albo wyodrębnić HTML z IFRAME i zastąpić element IFRAME wyodrębnionym HTML.

Answer 2

Natywny silnik szablonów w KO nie jest szczególnie szybki. Chciałbym najpierw wypróbować silnik jQuery.tmpl (described here). Jeśli nie jest to wystarczająco szybkie, należy rozważyć zmniejszenie liczby renderowanych treści - na przykład renderowanie nagłówka dla każdego dokumentu początkowo, a następnie renderowanie szczegółów po wybraniu lub rozwinięciu.

Answer 3

Nie wiesz, jak działa twoja aplikacja, ale jeśli nie chcesz wyświetlać wszystkich tych treści naraz, możesz zapełnić swój model fragmentami.Podobnie jak w jednej z moich aplikacji mam model widoku, który ma dużą listę elementów, ale zawiera tylko rzeczy, które są widoczne w tabeli. Widok zawiera również wybraną pozycję pozycji, która zawiera więcej informacji i zapełniam ją, gdy jakiś wpis zostanie wybrany z listy.

Ogólnie widziałem kilka razy, że ludzie umieszczają różne rzeczy w modelu widoku, nawet jeśli nie są wyświetlane w interfejsie użytkownika. Ma pewne zalety, jeśli dostajesz swoje rzeczy bezpośrednio z serwera, ale z drugiej strony może to spowodować powiększenie modelu widoku.