POC: Massive performance boost experiment with no full page reloads between renders

dev.json

@@ -19,10 +19,7 @@
   },
   "rendering": {
     "chromeBin": null,
-    "args": [
-      "--no-sandbox",
-      "--disable-setuid-sandbox"
-    ],
+    "args": ["--no-sandbox", "--disable-setuid-sandbox"],
     "ignoresHttpsErrors": false,
 
     "timezone": null,
@@ -34,7 +31,7 @@
     "maxHeight": 8000,
     "maxDeviceScaleFactor": 10,
 
-    "mode": "default",
+    "mode": "reusable",
     "clustering": {
       "mode": "browser",
       "maxConcurrency": 5
@@ -43,4 +40,4 @@
     "verboseLogging": false,
     "dumpio": true
   }
-}
+}

package.json

@@ -15,7 +15,7 @@
     "precommit": "npm run tslint & npm run typecheck",
     "watch": "tsc-watch --onSuccess \"node build/app.js server --config=dev.json\"",
     "build": "tsc",
-    "start": "node build/app.js --config=dev.json"
+    "start": "node build/app.js server --config=dev.json"
   },
   "dependencies": {
     "@grpc/grpc-js": "^1.0",
@@ -54,10 +54,7 @@
     }
   },
   "lint-staged": {
-    "*.ts": [
-      "prettier --write",
-      "git add"
-    ]
+    "*.ts": ["prettier --write", "git add"]
   },
   "pkg": {
     "assets": "proto/*"

src/browser/browser.ts

@@ -28,6 +28,8 @@ export interface RenderResponse {
 }
 
 export class Browser {
+  hasLoaded: boolean;
+
   constructor(protected config: RenderingConfig, protected log: Logger) {
     this.log.debug('Browser initialized', 'config', this.config);
   }
@@ -146,6 +148,7 @@ export class Browser {
         options.deviceScaleFactor.toString()
       );
     }
+
     await page.setViewport({
       width: options.width,
       height: options.height,
@@ -155,6 +158,7 @@ export class Browser {
     if (this.config.verboseLogging) {
       this.log.debug('Setting cookie for page', 'renderKey', options.renderKey, 'domain', options.domain);
     }
+
     await page.setCookie({
       name: 'renderKey',
       value: options.renderKey,
@@ -169,17 +173,41 @@ export class Browser {
     if (this.config.verboseLogging) {
       this.log.debug('Moving mouse on page', 'x', options.width, 'y', options.height);
     }
+
     await page.mouse.move(options.width, options.height);
 
     if (this.config.verboseLogging) {
       this.log.debug('Navigating and waiting for all network requests to finish', 'url', options.url);
     }
 
-    await page.goto(options.url, { waitUntil: 'networkidle0' });
+    await page.evaluate((options: any) => {
+      if (!(window as any).angular) {
+        window.location.href = options.url;
+        return true;
+      }
+
+      const url = new URL(options.url);
+      const injector = (window as any).angular.element(document.body).injector();
+      const $locationService = injector.get('$location');
+
+      // const link = document.createElement("a");
+      // link.appendChild(document.createTextNode("text"))
+      // link.href = ""
+
+      $locationService.url(url.pathname + url.search);
+
+      (window as any).panelsRendered = 0;
+
+      return new Promise(resolve => {
+        injector.get('$rootScope').$digest();
+        setTimeout(resolve, 50);
+      });
+    }, options);
 
     if (this.config.verboseLogging) {
       this.log.debug('Waiting for dashboard/panel to load', 'timeout', `${options.timeout}s`);
     }
+
     await page.waitForFunction(
       () => {
         const panelCount = document.querySelectorAll('.panel').length || document.querySelectorAll('.panel-container').length;

src/browser/reusable.ts

@@ -5,6 +5,7 @@ import { RenderingConfig } from '../config';
 
 export class ReusableBrowser extends Browser {
   browser: puppeteer.Browser;
+  page: puppeteer.Page;
 
   constructor(config: RenderingConfig, log: Logger) {
     super(config, log);
@@ -17,29 +18,36 @@ export class ReusableBrowser extends Browser {
 
   async render(options: RenderOptions): Promise<RenderResponse> {
     let context: puppeteer.BrowserContext | undefined;
-    let page: puppeteer.Page | undefined;
+    console.log('reusable');
 
     try {
       this.validateOptions(options);
-      context = await this.browser.createIncognitoBrowserContext();
-      page = await context.newPage();
+
+      if (!this.page) {
+        context = await this.browser.createIncognitoBrowserContext();
+        console.log('new page');
+        this.page = await context.newPage();
+        this.addPageListeners(this.page);
+      }
 
       if (options.timezone) {
         // set timezone
-        await page.emulateTimezone(options.timezone);
+        await this.page.emulateTimezone(options.timezone);
       }
 
-      this.addPageListeners(page);
-
-      return await this.takeScreenshot(page, options);
-    } finally {
-      if (page) {
-        this.removePageListeners(page);
-        await page.close();
+      return await this.takeScreenshot(this.page, options);
+    } catch (err) {
+      if (this.page) {
+        this.removePageListeners(this.page);
+        await this.page.close();
+        this.page = null;
       }
+
       if (context) {
         await context.close();
       }
+
+      throw err;
     }
   }
 }