为啥 Angular Universal 中的 res.render 需要这么长时间?

Posted

技术标签:

【中文标题】为啥 Angular Universal 中的 res.render 需要这么长时间?【英文标题】:Why is res.render in Angular Universal taking so long?为什么 Angular Universal 中的 res.render 需要这么长时间? 【发布时间】:2018-04-28 12:38:37 【问题描述】:

我正在构建一个 Angular 通用应用程序,而我现在拥有的只是网站的结构。我做了所有与教程中有关为 Angular Universal 转换我的应用程序的事情。

console.log("got Request " + new Date());
res.render(join(DIST_FOLDER, 'browser', 'index.html'),  req , time: true, 
   function(err, html) 
      console.log("finished Rendering " + new Date());
      res.send(html);
      
);

渲染需要 3 秒半。这对我来说似乎是一个巨大的时间。同样在 Chrome TTFB 的 DeveloperTools 中是 3.5 秒。 除了路由之外,该应用程序还没有做任何事情。我不希望我未来的应用程序这么慢。

任何人都知道这是正常的还是有什么需要改进的地方? Github repo 有问题https://github.com/Joniras/slow-universal-rendering-example

设置 Workspace 并运行 angular-universal:

npm install   
npm run build:universal   
npm run serve:universal     

版本:Angular CLI: 1.5.0Node: 6.11.5 OS: win32 x64 Angular: 5.0.1 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, platform-server, router @angular/cdk: 5.0.0-rc0 @angular/cli: 1.5.0 @angular/flex-layout: 2.0.0-beta.10-4905443 @angular/material: 5.0.0-rc0 @angular-devkit/build-optimizer: 0.0.33 @angular-devkit/core: 0.0.20 @angular-devkit/schematics: 0.0.35 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.8.0 @schematics/angular: 0.1.3 typescript: 2.4.2 webpack: 3.8.1 express 4.16.2我必须将样式设置为代码,否则我无法发布

【问题讨论】:

【参考方案1】:

您的代码 (UserService) 中有 3000 毫秒超时

setTimeout(() => 
          resolve(this.loggedInUser);
        , 3000);

【讨论】:

这没有意义,settimeout是浏览器功能,应该不会影响服务器渲染! @Ayyash setTimeout 是一个javascript api,可以在浏览器和节点服务器上使用nodejs.org/de/docs/guides/timers-in-node

以上是关于为啥 Angular Universal 中的 res.render 需要这么长时间?的主要内容,如果未能解决你的问题,请参考以下文章

从 Angular Universal 应用程序中的 Express JS 获取值

查看页面源 Angular Universal 和 Angular 11

使用外部 API 调用更新 Angular Universal 中的元标记

迁移 Angular Universal firebase 后,云函数抛出错误

Angular Universal 与 i18n(服务器端渲染)

Angular Universal 学习笔记