Pamięć podręczna DOM w Angular.JS

Question

Używam routera (korzystałem z wbudowanego w jeden, teraz przy użyciu ui-route, ale rozwiązania są w porządku) w Angular.JS, aby przełączać się między parami kontrolnymi/szablonowymi. W przypadku przełączania się między tymi stronami konfiguracja DOM za każdym razem, gdy wygląda okropnie, zajmuje nawet sekundę. Czy mimo to masz kątowe zachowanie wokół drzewa DOM, zamiast odtwarzać je za każdym razem. Chyba chciałbym po prostu ukryć/siać bity dla każdej strony, a nie usuwać/ponownie tworzyć za każdym razem.

Wszelkie sugestie mile widziane!

Answer 1

Musisz napisać własną dyrektywę ng-view, aby utworzyć taką funkcję.

Podstawową ideą jest to:

Przed zmianą trasy, zamiast niszczyć bieżący element widok i zakres, wystarczy umieścić go w niewidocznym cache DIV i wyrejestrować słuchaczy zakres. Podaj elementowi atrybut danych z $$route.templateUrl, aby móc go odzyskać. Następnie należy pobrać następny widok z serwera.

Zanim zmieni się trasa, sprawdza się obecność elementu pamięci podręcznej, a jeśli jest w pamięci podręcznej div, pobiera element z pamięci podręcznej, ponownie rejestruje odbiorców i umieszcza bieżący widok w pamięci podręcznej.

Najtrudniejszą częścią nie jest zepsucie podnośnika $scope. Więc możesz potrzebować konstruktora i destruktora w swoim $scope dla wydarzenia, a może także dla obserwatorów $. Nie jestem pewny.

Szczerze mówiąc, jeśli korzystasz z pamięci podręcznej szablonów i nadal renderujesz 1 sekundę, możesz mieć nieefektywne wyrażenie $watch lub ogromne ng-repeat. Powinieneś rozważyć pewne refaktury.

Answer 2

Po przejściu do wersji Angular 1.1.5 można użyć atrybutu ng-animate na tagu ng-view.

Nie jestem w 100% pewny, ale myślę, że robi to niektóre buforowanie DOM, aby przejścia działały lepiej. Możesz spróbować dodać do tagu dodawanie atrybutu ng-animate. To może ci pomóc.

Answer 3

Sam badam to. Pracuję na raczej starym sprzęcie w nieakceptowanej przeglądarce. Wstępne renderowanie jest problemem. Wcześniejsze prace polegały na buforowaniu wstępnie skompilowanych szablonów, gdy próbujesz. Odkryłem, że zapewnia to tylko minimalną poprawę prędkości.

Rzeczywiste wąskie gardło pochodziło z moich dyrektyw powtarzania ng, liczby wyników, które powstały i liczby węzłów/obserwatorów DOM, które budowałem w każdej iteracji.

Niektóre źródła sugerują utworzenie niestandardowej dyrektywy, która ręcznie składa dom i dołącza ją za jednym razem. Rezultatem jest bardzo mały przepływ i brak obserwatorów. Minusem jest bardzo duży. Nigdy więcej kątowej zabawy i niepotrzebnej pracy. Co ważniejsze, żadna z nich nie zapewniała wystarczająco dużej poprawy prędkości, aby usprawiedliwić pracę.

Ostatecznie odkryłem, że najlepsze przyspieszenie prędkości wynika z wymuszania akceleracji sprzętowej dla każdej iteracji powtórzeń ng. Jak zasugerowano powyżej, dyrektywa ng-animate w nowszych wersjach kątowych sprawia, że ​​jest to względnie banalne.

Zobaczysz natychmiastowe renderowanie strony z niewielkimi drobnymi przerwami w przepływie. Ng-cloak tu nie pomaga. Ze względu na żądanie animacji strona nie jest przytwierdzona do zamaskowania, podczas gdy powtarzanie jest renderowane.Te mogą jednak być dość dobrze wykonane z odrobiną sprytnej zabawy. Właściwie ukrywam powtórzenie ng, aż zmieni się lokalizacja $, pokazując w międzyczasie wskaźnik postępu, a następnie przełączając się na mój ng-show. Działa to naprawdę ładnie.

Powiedziawszy to wszystko, wstępne kompilowanie szablonów powinno być wykonane w następujący sposób.

1) Po uruchomieniu aplikacji utwórz nową pamięć podręczną. Patrz: http://docs-angularjs-org-dev.appspot.com/api/ng. $ CacheFactory

2) Zapełnij tę pamięć podręczną szablonami skompilowanymi. Inject $ compile i wywołaj go na każdym szablonie. Kompilacja zwraca funkcję, którą później wywołasz w swoim zasięgu. Wprowadź tę funkcję w pamięci podręcznej, jak uważasz.

3) Utwórz niestandardową dyrektywę, która będzie akceptować klucz pamięci podręcznej jako atrybut. Wewnątrz tej dyrektywy zapytaj pamięć podręczną kompilacji o poprawną funkcję kompilacji. Wywołaj funkcję w stosunku do bieżącego zakresu i dołącz wynikowy DOM do elementu przekazanego do dyrektywy.

4) Sorta win :).