无限 Javascript 循环是否会阻止渲染？

Question

在这段视频(10:00) 中，这家伙说无限while (true);循环会阻止渲染，这会使 gif 停止动画。但是当我自己尝试代码时，我仍然无法选择段落文本，但是gif仍然是动画，我哪里误解了？我的代码和视频中的代码有什么区别？我的代码在这里：

<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>

这个问题的直接答案是：行为实际上不同于 Chrome 和 Firefox（其他浏览器也是如此）。当我尝试使用 Firefox 时，gif 被阻止（如视频中所示），但在 Chrome 中，它仍在动画中。

Answer 1

一般来说，是的，这个视频说的是真的。

您所经历的是现代浏览器不会在同一个 CPU 线程上执行所有操作，并且对于某些操作，例如渲染视频或某些动画，它们甚至不会使用 CPU 而是使用 GPU（来自图形卡）。

阻塞 CPU 不会阻塞 GPU，但请注意，在某些时候他们需要返回主线程（例如在滚动后执行页面重排），然后他们将被迫停止甚至这样所有 GPU 渲染。

现在，规范还建议浏览器足够智能以检测如此长时间运行的脚本，以便通过输入他们所谓的自旋事件循环算法来允许渲染操作。