input-starved-by-timers.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <html>
  2. <head>
  3. <script>
  4. function log(m) {
  5. document.getElementById("log").innerHTML += m + "<br>";
  6. }
  7. var multiplyFactor = 2; // Create this many timers in every timer callback.
  8. var targetLatency = 10000; // Multiply timers until it takes this much to fire all their callbacks.
  9. var timerCount = 1;
  10. function timerCallback(creationTimestamp) {
  11. --timerCount;
  12. if (!multiplyFactor) {
  13. if (timerCount == 0)
  14. log("No more timers - UI should be responsive now.");
  15. return;
  16. }
  17. // Create more timers. Capture the current time so when callbacks are fired,
  18. // we can check how long it actually took (latency caused by a long timer queue).
  19. var timestamp = new Date().getTime();
  20. for (var i = 0; i < multiplyFactor; ++i) {
  21. setTimeout(function() { timerCallback(timestamp); }, 0);
  22. ++timerCount;
  23. }
  24. // Once the timer queue gets long enough for the timer firing latency to be over the limit,
  25. // stop multplying them and keep the number of timers constant.
  26. if (multiplyFactor > 1 && new Date().getTime() - creationTimestamp > targetLatency)
  27. multiplyFactor = 1;
  28. }
  29. function runTest() {
  30. log("Freezing UI...");
  31. setTimeout(function() { timerCallback(new Date().getTime()); }, 0);
  32. setTimeout("multiplyFactor = 0; log('Finishing. Started to drain timers.');", 10000);
  33. }
  34. </script>
  35. </head>
  36. <body onload="runTest()">
  37. This test will create enough timers to freeze browser UI. After 10 seconds, it
  38. will start drain the timers so the UI becomes responsive again in a few seconds.
  39. You don't need to kill the browser.<br>If the bug is fixed, there will be no
  40. UI freeze. Refresh the page to repeat the experiment.<br>Try to click at this
  41. button (or browser's menu) while UI is frozen: <button onclick="log('clicked')">Click Me</button> <hr>
  42. <div id="log"></div>
  43. </body>
  44. </html>