Блокирует ли Inifinite Javascript Loop рендеринг? - PullRequest
Новая
       76

Блокирует ли Inifinite Javascript Loop рендеринг?

1 голос
/ 08 октября 2019

В этом видео (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>

Ответы [ 2 ]

4 голосов
/ 08 октября 2019

В общем, да, то, что говорит это видео, правда.

Что вы испытываете, так это то, что современные браузеры не выполняют все в одном и том же потоке процессора, а для некоторых операций, таких как рендеринг видео или некоторые анимации, они даже не будут использоватьпроцессор, но графический процессор (из графической карты).

Блокировка ЦП не приведет к блокировке ГП, но учтите, что в какой-то момент им нужно будет вернуться к основному потоку (например, для выполнения перекомпоновки страницы после прокрутки), а затем они будутбыть вынужденным остановить даже этот весь рендеринг с помощью графического процессора.

Теперь спецификации также рекомендуют браузерам быть достаточно умными, чтобы обнаруживать такие долго выполняющиеся сценарии, чтобы разрешить операцию рендеринга, введя то, что они называют spin-the-event-loop алгоритм.

0 голосов
/ 08 октября 2019

Использование бесконечного цикла является плохой практикой в ​​этом контексте, потому что это сделает страницу не отвечающей. Это также не останавливает 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>
...