Why is the Angular 7 framework extremely slow on a low-CPU device (Windows 10, 2GB RAM, 1GHz CPU) in Google Chrome?

Question

I have created a simple project in which I have installed Bootstrap 4. But it seems it's taking 8-10 seconds to load the page and CPU usage is 100%. This is the configuration of my desktop on which CPU usage is high.

I am running the project through AOT which ng serves --aot. While testing on a low-CPU Desktop it's taking 20-30 seconds to load the page. So is this how Angular works or can we improve it and make it load within a second on a low-CPU desktop with this configuration?

This is a screenshot of the load timing of Angular on the low-CPU desktop.

The scripting part is taking 6-7 seconds to load the page even after using AOT. which seems a lot.

Screenshot of the performance of my desktop machine with 8 GB RAM.

Due to this high CPU usage it's taking a long time on the low-CPU device to load the page.

Below is my Angular JSON file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "testapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/testapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "testapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "testapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "testapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "testapp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "testapp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "testapp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "testapp"
}

Below is my package JSON file:

{
  "name": "testapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.1",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

how many tab have you open in your browser when you did your test? — federico scamuzzi, Dec 04 '18 at 09:19
yes i have open just a single tab checked that CPU is reaching 50 i am not doing any processing i have just install bootstrap and displaying dropdown — Himanshu Arya Tech Team, Dec 04 '18 at 09:27
Mh, do you have any background process that can slow down your pc? Like skype, dropbox, eccetera? — Jacopo Sciampi, Dec 04 '18 at 09:33
nope. I pretty sure all my non angular app like simple java and jsp application are running fine. I am not using skype ,dropbox — Himanshu Arya Tech Team, Dec 04 '18 at 09:35
@HimanshuAryaTechTeam I cannot analyse that for you. You should inspect the call trees to find out what part is taking long. — Silvermind, Dec 04 '18 at 11:18
how can i inspect call tree ? any specific tool or through profiler of chrome dev tool — Himanshu Arya Tech Team, Dec 04 '18 at 11:48
I have attached call tree screenshot @Silvermind please have look and suggest — Himanshu Arya Tech Team, Dec 04 '18 at 11:59
how do you load your modules? did you try lazy loading your modules? — Derviş Kayımbaşıoğlu, Dec 04 '18 at 12:01
Use `ng serve` only for development builds. For production builds or speed tests use `ng build --prod` — SplitterAlex, Dec 04 '18 at 12:04
we don't have create any component . just using app.component.html and installed bootstrap — Himanshu Arya Tech Team, Dec 04 '18 at 12:07
@HimanshuAryaTechTeam That does not help. You have to inspect the entire call tree for heavy operations like parsing html and script. Take a look at which functionallity takes the longest time and disable that. Perhaps it's bootstrap, perhaps it's something else. Disable things that take long load and measure it again until you've found your bottleneck. — Silvermind, Dec 04 '18 at 12:33
i have removed bootstrap also from the project. but still its taking 6 seconds out of which Evaluate script is taking 4 seconds. — Himanshu Arya Tech Team, Dec 04 '18 at 12:52
@HimanshuAryaTechTeam Can you create a Stackblitz to reproduce the problem so we can take a look at it? — Silvermind, Dec 04 '18 at 17:23
Angular 7 is really slow compared to 6. I had issues with a Jenkins machine that build the app, now it needs more memory. Issues are opened on github. Let's just have patience and wait for a solution... An option can be to go to 6 again and later update to 7. I know that is not the best solution of the world but you will run fast again — perseus, Dec 04 '18 at 22:54
Node.JS which is needed for Angular recommends minimum 16 GB RAM. https://npme.npmjs.com/docs/up-and-running/requirements.html . Does that mean we can't use laptops lower than 16GB RAM for development using Angular? — Vignesh M, Jul 07 '20 at 03:50
maybe wsl2 helps https://stackoverflow.com/a/66481419/1359764 — Ramil Gilfanov, Mar 14 '21 at 10:27
Angular, React, Vue - are non-green frameworks, because they consume excessive cpu and ram resources, some people waste their time trying to make apps written with those skyrocket optimised. But now we have enough much lighter frameworks providing same convenience features, but for some reason everyone keep using those monstruosities. — Dfr, Nov 21 '21 at 08:34

score 2 · Answer 1 · answered Dec 05 '18 at 03:06

I have to wonder how many resources are left on that hardware configuration to focus on running the files here- If that machine is running win10 32 bit there is still room, but if it's 64 bit then you're at the absolute minimum recommended resources just to run the OS. On top of that you have Chrome and possibly your IDE if that is open, both of which are considered "bulky" for that hardware. A final mention is the dev server that is running with npm start- so there are a lot of things that add up and make that system full pretty quick. The remaining CPU and RAM can only be utilized so much (I imagine more blocking and GC has to happen).

If you shared your (expanded) windows resource usage instead of just chrome, that could help a little more.

Ways to test the "production" version of the build: Run ng build --prod like others have mentioned. This will not generate the source maps and should have all the optimizations in place for an all around efficient build. Run npm i -g http-server HTTP Server lets you lightly serve the static resources locally Run http-server ./dist/testapp -g Nav to one of the URLs it points to

The -g is supposed to gzip requests that can benefit from it, but it might not if they're not large enough (someone else may know more about this).

So here is where I might get a little heat, but, I personally don't like bootstrap in Angular, partly because of the implementation. I feel like Angular Material is just made for it ;) If you have to use bs (I have to at work), fine use ng-bootstrap instead, but there are other options that I find work incredibly well within the ecosystem.

As for the CPU usage, idle, I have .1% CPU usage for the Angular application's tab. When events start happening within the application (like the mouse moving across and the like), this will start firing change detection cycles that will eat a lot of CPU resources, but most of that is solved by following some kind of container component -> presentational component model (where presentational components are onPush). I work on different sized applications from small through enterprise, and for an incredibly large majority of cases this model works just fine thanks to templates/outlets and transclusion.

score 0 · Answer 2 · answered Dec 04 '18 at 14:49

0

You mentioned you have tried with AOT, but have you tried building the project with the full production command?

AOT is one of many pieces of optimization for angular projects.

Simply cd to the directory (where you usually run the project from) and type : ng build --prod

Now move the generated files (default folder is usually in a dist folder?) into the production server.

If you have not tried this, it will be a huge improvement

answered Dec 04 '18 at 14:49

pontusv

283
1
13

1

tried everything but the time is not less than 6 seconds.Did you ever observe the CPU utilazaion on ur machine ? I hope you may not.I have tested in production its slow extremely slow on 2GB ram. – Himanshu Arya Tech Team Dec 04 '18 at 16:14
I have not observed the CPU utilization since i never had this issue (fortunately). However i would debug using chrome Performance tool, maybe you can spot something there. Might be code related as far as i know. Cheers – pontusv Dec 06 '18 at 08:19

Why is the Angular 7 framework extremely slow on a low-CPU device (Windows 10, 2GB RAM, 1GHz CPU) in Google Chrome?

2 Answers2