Resource-friendly Thread/Parse-blocking Timer

Resource-friendly Thread/Parse-blocking Timer
0.0 0

#1

Haiiiyo! This may be a bit of a weird question because I think it would usually be considered very anti-pattern in JavaScript, but I was wondering if there is a way to create a resource-friendly, client-side timer that can stop document parsing.

Warning: if your immediate thought is that I should just do this with a Node.js/express server and just delay the response then you may find the rest of this to be a very silly pursuit (and rightly so). I think at this point the benefits of going that route (no pun intended) probably far outweigh the cost of the overhead, so… please treat the rest of the post as an, uh, academic exercise!

Anyhow! The reason is because I’m working on a mini project (an educational puzzle just out of personal interest) in which I want to simulate, with client-side code, thread/parse-blocking caused by running scripts and/or resources download. My first attempt was:

let init = window.performance.now();

while (window.performance.now() - init < 5000) {
  // Do nothing and chew up resources!
}

It does work, as far as I can tell, exactly as I intend it to, but it just feels wasteful and inelegant (as an indication it does set my laptop fan off after running repeated during testing).

Another attempt was to hide the elements that would normally be affected at the point where the thread is being block, and show them with a delay controlled by setTimeout. For example:

let style = document.createElement('style');

document.head.appendChild(style);
sheet.insertRule('body { opacity: 0; }');

setTimeout(function() {
  style.sheet.deleteRule(0);
}, 5000);

I think that it does work in terms of performance, but it’s behaviour very far from ideal; for example, this method wouldn’t work with <script defer> without a testing and tweaking, and I have a feeling that scaling it up to thousands of elements may not be trivial. :confused:

Any suggestions will be very much appreciated!

EDIT: Oops! Added missing code to the second example!