In this video (10:00), the guy said the infinite while (true); loop would block the rendering, which would make the gif stop animating. But as I try the code myself, yet I can't select the paragraph text, but the gif is still animating, where am I misunderstanding? What is the difference between my code and the code in the video? My code is here:
<img src="https://media.giphy.com/media/3o85xsGXVuYh8lM3EQ/giphy.gif" alt="">
<button id="click">Click Me</button>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam saepe ratione possimus reiciendis ad ipsa architecto mollitia deserunt, delectus optio soluta quisquam magni ducimus sapiente vero. Cupiditate, et reprehenderit! Ea placeat sit a ab</p>
<script>
document.getElementById("click").addEventListener("click", ev => {
while (true) {
console.log("in the loop")
}
})
</script>The direct answer to this question is: The behavior actually differs from Chrome and Firefox (other browsers as well, yet). As I try with Firefox, the gif is blocked (like in the video), but in Chrome, it's still animating.
Generally speaking, yes what this video says is true.
What you are experiencing is that modern browsers don't do everything on the same CPU thread, and for some operations, like rendering of video or some animations, they won't even use the CPU but the GPU (from the Graphical Card).
Blocking the CPU won't block the GPU, but note that at some point they'll need to come back to the main thread (e.g to perform a page reflow after a scroll), and then they'll be forced to halt even this all GPU rendering.
Now, specs also recommend that browsers be smart enough to detect such long running scripts in order to allow rendering operation by entering what they call the spin-the-event-loop algorithm.