Javascript 角度通用应用程序性能，应用程序引导程序侦听器，闪烁

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

为了消除这种闪烁，我实现了Angular Universal Transfer Module，它在服务器端渲染时将数据存储在映射缓存中（

private _Map=new Map（）；

），并将其传输到客户端，这样客户端就不需要再次调用api，并且立即从缓存中获取数据

而转移是通过这个提供者进行的

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

这样一来，闪烁消失了，但应用程序性能降低了，在负载测试应用程序时，闪烁的结果比不闪烁的应用程序更快，这是为什么

---

可能是因为在进行负载测试的情况下，或者在机器人访问网站的情况下，没有浏览器，因此缓存永远不会被清除，它只是用缓存内存填充服务器，而服务器速度变慢，解决方案是什么，通过在nginx级别识别请求，为机器人和真实用户创建不同的instace，在angular universal中，我还缺少一些其他东西。

编辑：此解决方案适用于angular 5

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

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

然后将ServerTransferStateModule发送到服务器应用程序

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

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

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

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

---

我没有像你那样使用APP\u BOOTSTRAP\u LISTENER（不确定这是否有什么不同）

谢谢大卫，你的闪烁就这样消失了？您使用的是什么angular和cli版本？使用angular 5和cli 1.6.3，如果可以的话，我可以链接到您的网站吗？抱歉，它将在下个月或之前不会上线，因此实际上我所做的配置（无论有什么问题）是正确的，我们采取了一些其他措施来获得更好的性能，比如延迟加载、压缩，以某种方式减少对引导程序等的http调用，同时增加docker实例。进行向下投票的原因？

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