🚧 PoC

bperf/main.ts

@@ -0,0 +1,49 @@
+const mutationWatcher = new MutationObserver(list => {
+  console.log("[EVENT] On DOM mutate", list.length);
+  list.forEach(entry => {
+    if (entry.type == "childList") {
+      console.log(
+        "A child node has been added(%s) or removed(%s) [%d].",
+        entry.addedNodes,
+        entry.removedNodes,
+        window.performance.now()
+      );
+      // console.log((entry.target as any).innerText);
+      // console.log(entry.addedNodes[0]);
+      // console.log(entry.target.textContent);
+    } else if (entry.type == "attributes") {
+      console.log("The " + entry.attributeName + " attribute was modified.");
+    } else {
+      console.log(entry.target, entry.type, window.performance.now());
+    }
+  });
+});
+
+const performanceWatcher = new PerformanceObserver(list => {
+  console.log("[EVENT] On Perf entity changed");
+  list.getEntries().forEach(entry => {
+    console.log(
+      "[%s]: %s %d..%d",
+      entry.entryType,
+      entry.name,
+      entry.startTime,
+      entry.startTime + entry.duration
+    );
+  });
+});
+
+mutationWatcher.observe(document.body, {
+  characterData: true,
+  attributes: true,
+  childList: true,
+  subtree: true
+});
+
+performanceWatcher.observe({
+  entryTypes: ["frame", "navigation", "resource", "paint"]
+});
+
+window.addEventListener("close", () => {
+  mutationWatcher.disconnect();
+  performanceWatcher.disconnect();
+});

client/components/pages/Dashboard.tsx

@@ -2,6 +2,6 @@ import React, { Fragment, ComponentType } from "react";
 import { Link } from "react-router-dom";
 import styled, { StyledComponent } from "styled-components";
 
-export type Props = { name: string };
+export type Props = { name: JSX.Element };
 
 export const Dashboard: ComponentType<Props> = ({ name }) => <div>{name}</div>;

client/containers/Dashboard.tsx

@@ -5,10 +5,19 @@ import { Dashboard as Page } from "../components/pages/Dashboard";
 export type Props = {};
 
 export const Dashboard: ComponentType<Props> = params => {
-  const [name, setName] = useState("empty");
+  const [name, setName] = useState(<div>Empty</div>);
   useEffect(() => {
     getItem().then(({ a }) => {
-      setName(a);
+      setName(
+        <React.Fragment>
+          {a
+            .repeat(2 ^ 32)
+            .split("")
+            .map((t, i) => (
+              <div key={i}>{`${t}=${i}`}</div>
+            ))}
+        </React.Fragment>
+      );
     });
   }, []);
 

server/main.go

@@ -2,6 +2,7 @@ package main
 
 // import "log"
 // 	log.New()
+import "time"
 import "fmt"
 import "os"
 import "net/http"
@@ -15,20 +16,21 @@ func send(w http.ResponseWriter, r *http.Request) {
 
 	w.Header().Set("Content-Type", "application/json")
 	w.Header().Set("Access-Control-Allow-Origin", "*")
+	time.Sleep(time.Duration(1 * time.Second)) // Emulate distance of remote server.
 
 	_, err := w.Write(res)
 	if err != nil {
 		_ = fmt.Errorf("%s", err)
 	}
-	fmt.Printf("%s", res)
+	fmt.Println(fmt.Sprintf("%s", res))
 }
 
 func main() {
 	port := "5000"
 	if p := os.Getenv("PORT"); p != "" {
 		port = p
 	}
-	fmt.Printf("Server just started at PORT=%s", port)
+	fmt.Printf("Server just started at PORT=%s\n", port)
 
 	http.HandleFunc("/send", send)
 	http.ListenAndServe(fmt.Sprintf(":%s", port), nil)

tsconfig.json

@@ -1,12 +1,12 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es3",
     "module": "es6",
     "lib": ["dom", "es2015"],
     "jsx": "react",
     "sourceMap": true,
-    "outDir": "./dist",
-    "rootDir": "./client",
+    "outDir": "./public",
+    "rootDir": "./",
     "strict": true,
     "esModuleInterop": true
   }

webpack.config.js

@@ -10,7 +10,10 @@ const output = path.resolve(__dirname, "public");
 const styledComponentsTransformer = createStyledComponentsTransformer();
 
 module.exports = {
-  entry: "./client/app.tsx",
+  entry: {
+    bperf: "./bperf/main.ts",
+    main: "./client/main.tsx"
+  },
   module: {
     rules: [
       {
@@ -34,7 +37,11 @@ module.exports = {
     extensions: [".tsx", ".ts", ".js"]
   },
   output: {
-    filename: "[name].[chunkhash].js",
+    filename: chunkData => {
+      return chunkData.chunk.name === "bperf"
+        ? "[name].js"
+        : "[name].[chunkhash].js";
+    },
     chunkFilename: "[name].[chunkhash].js",
     path: output
   },