Merge pull request #93 from npm1/demo

Demo
w3c · Jul 6, 2021 · d0e5910 · d0e5910
2 parents c9c4f87 + 42d6eba
commit d0e5910
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 0 deletions.
diff --git a/demo-child.html b/demo-child.html
@@ -0,0 +1,19 @@
+<html class=child>
+<head>
+<meta http-equiv="origin-trial" content="Aq8QDT0tjerxoPx2KGlNVwdkrRTldXUcj0TI3Rdvw/I771OHtpORM6yML/fe8JntQJM6nlqVZDnrZkUQFVnZ0QQAAABieyJvcmlnaW4iOiAiaHR0cHM6Ly9zcGFuaWNrZXIuZ2l0aHViLmlvOjQ0MyIsICJmZWF0dXJlIjogIkxvbmdUYXNrT2JzZXJ2ZXIiLCAiZXhwaXJ5IjogMTQ3OTI2OTc0N30=">
+
+<title>child frame A</title>
+<link rel=stylesheet href=style.css>
+<script src="init.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+</head>
+
+<body onload="init();">
+<h3>child iframe</h3>
+<button id="jank">[Child] Make Slow Task</button>
+
+<div id="eventlog" class="eventLog" style="width: 90%; height: 300px; border: 1px solid;"></div>
+
+</body>
+
+</html>
diff --git a/demo.html b/demo.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<head>
+<meta charset=utf-8>
+<meta http-equiv="origin-trial" content="Aq8QDT0tjerxoPx2KGlNVwdkrRTldXUcj0TI3Rdvw/I771OHtpORM6yML/fe8JntQJM6nlqVZDnrZkUQFVnZ0QQAAABieyJvcmlnaW4iOiAiaHR0cHM6Ly9zcGFuaWNrZXIuZ2l0aHViLmlvOjQ0MyIsICJmZWF0dXJlIjogIkxvbmdUYXNrT2JzZXJ2ZXIiLCAiZXhwaXJ5IjogMTQ3OTI2OTc0N30=">
+
+<title>Long Task Demo</title>
+<link rel=stylesheet href=style.css>
+<script src="init.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+</head>
+
+<body onload="init();">
+<button id="jank">[Parent] Make Slow Task</button>
+
+<div id="eventlog" class="eventLog" style="width: 90%; height: 200px;  border: 1px solid;"></div>
+
+<iframe src="demo-child.html" style="width: 90%; height: 300px" name="childA"></iframe>
+
+<iframe src="https://en.wikipedia.org/wiki/Xyzzy" style="width: 90%; height: 300px" name="wikiKitty"></iframe>
+
+<script>
+    var begin = window.performance.now();
+    while (window.performance.now() < begin + 400);
+</script>
+
+</body>
diff --git a/init.js b/init.js
@@ -0,0 +1,57 @@
+function makeSlowTask(ms) {
+  var begin = window.performance.now();
+  while (window.performance.now() < begin + ms);
+}
+
+
+(function loop() {
+    // Random number in range 100 - 400ms
+    var randTaskLen = Math.round(Math.random() * (400 - 10)) + 10;
+    var randDelay = Math.round(Math.random() * (1000 - 300)) + 300;
+    setTimeout(function() {
+            makeSlowTask(randTaskLen);
+            loop();
+    }, randDelay);
+}());
+
+var globalID;
+
+function repeatOften() {
+  $("<div />").appendTo("body");
+  globalID = requestAnimationFrame(repeatOften);
+}
+
+globalID = requestAnimationFrame(repeatOften);
+
+function stopAnimating() {
+  cancelAnimationFrame(globalID);
+}
+
+function addJank() {
+ var begin = window.performance.now();
+ while (window.performance.now() < begin + 450);
+};
+
+function init() {
+  var p = document.getElementById("jank");
+  p.onclick = addJank;
+
+  var q = document.getElementById("stop");
+  if (q) {
+    q.onclick = stopAnimating;
+  }
+
+  console.log('Make observer');
+  window._observer = new PerformanceObserver(function(entryList) {
+    var entries = entryList.getEntries();
+    for (var i = 0; i < entries.length; i++) {
+      var newItem = "long task! " + "start: " + entries[i].startTime + ", duration: " + (entries[i].duration) + "ms, name: " + entries[i].name;
+      var logBox = document.getElementById('eventlog');
+      if (logBox && entries[i].entryType == "longtask") {
+        logBox.innerHTML = newItem + "<br>" + logBox.innerHTML;
+      }
+    }
+  });
+  console.log('Observe longtask');
+  window._observer.observe({entryTypes: ["longtask"]});
+};
diff --git a/raf.css b/raf.css
@@ -0,0 +1,16 @@
+div {
+  width: 7px;
+  height:7px;
+  background: green;
+  float: left;
+}
+
+button {
+  position: absolute;
+  top: 70px;
+  left: 20px;
+}
+#stop {
+  left: 100px;
+}
+
diff --git a/render-jank-demo.html b/render-jank-demo.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<head>
+<meta charset=utf-8>
+<meta http-equiv="origin-trial" content="Aq8QDT0tjerxoPx2KGlNVwdkrRTldXUcj0TI3Rdvw/I771OHtpORM6yML/fe8JntQJM6nlqVZDnrZkUQFVnZ0QQAAABieyJvcmlnaW4iOiAiaHR0cHM6Ly9zcGFuaWNrZXIuZ2l0aHViLmlvOjQ0MyIsICJmZWF0dXJlIjogIkxvbmdUYXNrT2JzZXJ2ZXIiLCAiZXhwaXJ5IjogMTQ3OTI2OTc0N30=">
+
+<title>Long Task: Render & Jank Demo</title>
+<link rel=stylesheet href=style.css>
+<link rel=stylesheet href=raf.css>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+<script src="init.js"></script>
+</head>
+
+<body>
+<body onload="init();">
+<h1>Render & Jank</h1>
+<button id="jank">Jank</button>
+<button id="stop">Stop</button>
+<br><span id="eventlog" class="eventLog" style="width: 90%; height: 200px;  border: 1px solid;"></span><br>
+
+</body>
diff --git a/style.css b/style.css
@@ -0,0 +1,14 @@
+button {
+    font-size: 15px;
+}
+iframe {
+    padding: 20px;
+    border: 20px solid rebeccapurple;
+}
+.eventLog {
+  width: 90%;
+  height: 200px;
+  border: 1px solid;
+  overflow: auto;
+}
+