Question

在this video（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被阻止（例如在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>

Infinite Javascript循环会阻止渲染吗？

2 个答案: