angular 通用应用性能，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();)，并且将其传输到客户端，因此客户端不需要再次调用 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 还有一些我在 angular Universal 中缺少的东西.

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.

推荐答案

编辑:此解决方案适用于 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

我修改了 main.ts 以在加载 dom 后增强应用

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)

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