无限 Javascript 循环会阻塞渲染吗？

Question

在this video (10:00)，那家伙说无限while (true);循环会阻塞渲染，这会使gif停止动画。但是当我自己尝试代码时，我不能 select 段落文本，但是 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 被阻止（如 the video），但在 Chrome 中，它仍然是动画。

Answer 1

总的来说，是的，这个视频说的是真的。

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

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

现在，规范还建议浏览器足够智能以检测如此长的运行脚本，以便通过输入他们所谓的 spin-the-event-loop 算法来允许渲染操作。

Answer 2

在此上下文中使用无限循环是不好的做法，因为它会使页面无响应。它也不会停止 gif。请在下面查看我的替代解决方案：

    <img id="gif" src="https://media.giphy.com/media/3o85xsGXVuYh8lM3EQ/giphy.gif" alt="">
    <img id="img" src="https://i.imgur.com/d7weEA2.png" 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 => {
      document.getElementById("gif").style.display = "none";
      document.getElementById("img").style.display = "inline-block";
      })
    </script>
<style>
  #img {
display: none;
width: 200px;
height: 146px;
  }
</style>

无限 Javascript 循环会阻塞渲染吗？

Does Inifinite Javascript Loop Block The Rendering?

javascript

infinite-loop

task-queue

event-loop