производительность универсального приложения angular, APP_BOOTSTRAP_LISTENER, мерцание

Angular 4.4.6
Angular CLI 1.3.2
Node 6.x.x
NPM 3.10.10
Webpack 3.4.1

В приложении Angular Universal, когда серверное представление просеивается в клиентское представление, происходит мерцание экрана, потому что все API, которые были вызваны при рендеринге на стороне сервера, также вызываются при рендеринге на стороне клиента из-за мерцания.

Чтобы удалить это мерцание, я реализовал Angular Universal Transfer Module, он хранит данные в кэше карты (private _map = new Map<string, any>();) при рендеринге на стороне сервера и передает их клиенту, поэтому клиенту не нужно снова вызывать api и немедленно получать данные из кеша.

Причем передача была через этого провайдера.

{
    provide: APP_BOOTSTRAP_LISTENER,
    useFactory: onBootstrap,
    multi: true,
    deps: [
        ApplicationRef,
        TransferState
    ]
}

export function onBootstrap(appRef: ApplicationRef, transferState: TransferState) {
    return () => {
        appRef.isStable
        .filter(stable => stable)
        .first()
        .subscribe(() => {
            transferState.inject();
        });
    };
}

Таким образом, мерцание исчезло, но производительность приложения снизилась, при нагрузочном тестировании приложение мерцание происходит быстрее, чем в приложении без мерцания, почему это так?

Может быть потому, что в случае нагрузочного тестирования или в случае, если боты попадают на веб-сайт, нет браузера, поэтому кеш никогда не очищается, и он просто заполняет сервер кеш-памятью, и сервер становится медленным, что может быть решением для этого, либо создайте различный instace для ботов и реального пользователя, идентифицируя запрос на уровне nginx, т.е. есть еще кое-что, чего мне не хватает в angular universal.


javascript nginx angular angular-universal server-side-rendering
person Rakeschand    schedule 21.01.2018    source источник
comment
причина отрицательного голоса?   -  person Rakeschand    schedule 06.08.2018

Ответы (1)


arrow_upward
5
arrow_downward

Изменить: это решение для angular 5

Когда у меня возникла проблема с мерцанием, я просто добавил BrowserTransferStateModule в клиентское приложение.

//app.module.ts
import {BrowserModule, BrowserTransferStateModule} from '@angular/platform-browser';
imports: [
//...
BrowserModule.withServerTransition({appId: 'my-app'}),
BrowserTransferStateModule,

затем ServerTransferStateModule в серверное приложение

//app.server.module.ts
import {ServerModule, ServerTransferStateModule} from '@angular/platform-server';

//...
 imports: [
AppModule,
ServerModule,
ServerTransferStateModule

И я изменил main.ts, чтобы ускорить работу приложения после загрузки dom.

//main.ts
document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
});

Я не использовал APP_BOOTSTRAP_LISTENER, как вы (не уверен, имеет ли это значение)

person David    schedule 22.01.2018
comment
Спасибо, Дэвид, твое мерцание исчезло именно из-за этого? какую версию angular и cli вы используете? - person Rakeschand; 22.01.2018
comment
Использование angular 5 и cli 1.6.3 - person David; 22.01.2018
comment
Могу ли я получить ссылку на ваш сайт, если он жив и возможно? - person Rakeschand; 22.01.2018
comment
Извините, он выйдет не раньше, чем через месяц или около того - person David; 22.01.2018
comment
на самом деле конфигурация, которую я сделал (что бы там ни было), верна, мы приняли некоторые другие меры для повышения производительности, такие как ленивая загрузка, сжатие, уменьшение количества HTTP-вызовов при начальной загрузке и т. д., а также увеличение количества экземпляров докеров. - person Rakeschand; 08.02.2018
comment
Эй, а как насчет вашего приложения ng5, оно готово? как производительность? - person Rakeschand; 08.02.2018
comment
Жить надо через неделю. Мы не проводили стресс-тестов, но пользователей будет не так много, и на данный момент он кажется довольно быстрым. - person David; 08.02.2018
comment
О, звучит здорово, вы проверили оценку pageinsights и тест производительности Lighthouse? - person Rakeschand; 08.02.2018
comment
Это решило для меня проблему на Angular 6 с настраиваемым веб-пакетом. Мне только не нужно было слушать событие DOMContentLoaded - person ZolaKt; 06.07.2018