Add nested perf measures example

jackfranklin · jackfranklin · commit 7832cf657553 · 2025-09-18T17:42:17.000+01:00
diff --git a/index.html b/index.html
@@ -30,6 +30,7 @@
 <li><a href="many-redirects/index.html">many-redirects</a></li>
 <li><a href="minified-with-source-maps/index.html">minified-with-source-maps</a></li>
 <li><a href="nested-interactions/index.html">nested-interactions</a></li>
+<li><a href="nested-user-timings/index.html">nested-user-timings</a></li>
 <li><a href="node-fib-app/index.html">node-fib-app</a></li>
 <li><a href="react-hello-world/index.html">react-hello-world</a></li>
 <li><a href="scheduler/index.html">scheduler</a></li>
diff --git a/nested-user-timings/README.md b/nested-user-timings/README.md
@@ -0,0 +1,7 @@
+# user-timings
+
+This example creates some performance measures:
+
+1. `first measure` from 0-200ms
+2. `second measure` from 0-600ms
+3. `third measure` from 1000-2000ms
diff --git a/nested-user-timings/app.js b/nested-user-timings/app.js
@@ -0,0 +1,56 @@
+function consecutiveNonOverlapping() {
+  const name = 'ConsecutiveNonOverlapping';
+  const start = performance.now();
+
+  performance.measure(name, {
+    start: start,
+    end: start + 500,
+  });
+  performance.measure(name, {
+    start: start + 500,
+    end: start + 1000,
+  });
+}
+
+function overlappingNonNested() {
+  const name = 'OverlappingNonNested';
+  const start = performance.now();
+
+  performance.measure(name, {
+    start: start,
+    end: start + 500,
+  });
+  performance.measure(name, {
+    start: start + 100,
+    end: start + 600,
+  });
+}
+
+function overlappingNested() {
+  const name = 'OverlappingNested';
+  const start = performance.now();
+
+  performance.measure(name, {
+    start: start,
+    end: start + 500,
+  });
+  performance.measure(name, {
+    start: start + 100,
+    end: start + 200,
+  });
+}
+
+setTimeout(() => {
+  consecutiveNonOverlapping();
+}, 100);
+
+setTimeout(() => {
+  overlappingNonNested();
+}, 2000);
+
+setTimeout(() => {
+  overlappingNested();
+
+  const text = document.createTextNode('Finished!');
+  document.body.appendChild(text);
+}, 3000);
diff --git a/nested-user-timings/index.html b/nested-user-timings/index.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <title>User Timings</title>
+    <style></style>
+  </head>
+  <body>
+    <script src="app.js"></script>
+  </body>
+</html>
