From 7832cf6575531045fce3be1845c24453ac58f919 Mon Sep 17 00:00:00 2001 From: Jack Franklin Date: Thu, 18 Sep 2025 17:42:17 +0100 Subject: [PATCH] Add nested perf measures example --- index.html | 1 + nested-user-timings/README.md | 7 +++++ nested-user-timings/app.js | 56 ++++++++++++++++++++++++++++++++++ nested-user-timings/index.html | 9 ++++++ 4 files changed, 73 insertions(+) create mode 100644 nested-user-timings/README.md create mode 100644 nested-user-timings/app.js create mode 100644 nested-user-timings/index.html diff --git a/index.html b/index.html index 9f1807f..e29268c 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,7 @@
  • many-redirects
  • minified-with-source-maps
  • nested-interactions
    • +
  • nested-user-timings
  • node-fib-app
  • react-hello-world
  • scheduler
    • diff --git a/nested-user-timings/README.md b/nested-user-timings/README.md new file mode 100644 index 0000000..a141d0d --- /dev/null +++ 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 new file mode 100644 index 0000000..db7e790 --- /dev/null +++ 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 new file mode 100644 index 0000000..b00dac3 --- /dev/null +++ b/nested-user-timings/index.html @@ -0,0 +1,9 @@ + + + User Timings + + + + + +