角度通用应用程序性能，APP_BOOTSTRAP_LISTENER，闪烁 [英] angular universal app performance, APP_BOOTSTRAP_LISTENER, flicker

问题描述

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

在Angular Universal应用程序中，当服务器视图筛选到客户端视图时，屏幕会闪烁，因为所有的API都是由于存在闪烁，在服务器端渲染中调用，也称为客户端渲染。

In Angular Universal application when server view sift to client view there is flicker of screen, because all the API's which were called in server side rendering, also called in client side rendering, due to there was a flicker.

为了消除这种闪烁，我实现了Angular Universal Transfer Module，它存储了数据在服务器端呈现时，在地图缓存（ private _map = new Map< string，any>（）; ）中将其传输到客户端，因此客户端无需调用api再次并且立即拥有来自缓存的数据。

To remove this flicker I implemented Angular Universal Transfer Module, it stores data in a Map cache (private _map = new Map<string, any>();) while in server side rendering, and transfers it to client so client does not need to call the api again and imediately have the data from cache.

并且转移是通过此提供商进行的。

And the transfer was through this provider.

{
    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();
        });
    };
}

这种方式闪烁消失了，但是在负载测试中应用程序性能下降了应用程序，闪烁的结果比非闪烁的应用程序更快，为什么会这样？

This way the flicker has gone, but application performace has decreased, on load testing the app, the flickered result is more faster than non-flickered app, why is that ?

可能是因为在负载测试或机器人击中网站的情况下没有浏览器，所以缓存永远不会被清除，它只是填充服务器缓存内存和服务器变慢，可能是解决方案，为机器人和真实用户创建不同的实例，通过识别nginx级别的请求，oe还有一些我在角度普遍中缺少的东西。

May be because in case of load testing or in case of bots hitting the website there is no browser so the cache never get cleared and it just fill the server with cache memory and server gets slow, what could be the solution for that, either create different instace for bots and real user, by identifying request at nginx level, oe there is some other thing I'm missing in angular universal.

推荐答案

编辑：这个解决方案是for angular 5

Edit: this solution is for angular 5

当我遇到闪烁问题时，我刚刚将BrowserTransferStateModule添加到客户端应用程序

When I had the flickering problem I just added BrowserTransferStateModule to the client app

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

然后ServerTransferStateModule到服务器应用程序

then ServerTransferStateModule to the server app

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

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

我在加载dom后修改了main.ts来提升应用程序

And I modified main.ts to boostrap the app once the dom is loaded

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

我没有像你那样使用APP_BOOTSTRAP_LISTENER（不确定它是否有所作为）

I did not use APP_BOOTSTRAP_LISTENER like you did (not sure if it makes a difference)

这篇关于角度通用应用程序性能，APP_BOOTSTRAP_LISTENER，闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！