关于GUI渲染线程与JS引擎线程的那些事

GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中，等到JS引擎空闲时，立即被执行。

问题1: GUI渲染线程与JS引擎线程是互斥的吗（js引擎真的会阻塞Gui渲染引擎吗）

  <body>
  <div id="div">
    1
  </div>
  <div id="div1">123</div>
  <script>
    while (true) { }

  </script>
  <script>console.log(3)</script>
  <div id="div2">333</div>
</body>

结论: 发现页面是空白的，所以js的执行会阻塞页面的渲染，也就是GUI渲染线程与JS引擎线程是互斥的

问题2: "GUI更新会被保存在一个队列中，等到JS引擎空闲时，立即被执行"这句话是否是正确的？

思考: 想要证明上面的问题，是不是只要证明"js引擎不是每次在执行更新dom语句时，都会停下来等Gui渲染引擎更新完dom再执行后面的js代码"就可以了

  <body>
  <div id="div">
    1
  </div>
  <div id="div1">2</div>
  <script>
    const div = document.getElementById('div');
    const div1 = document.getElementById('div1');

    //使用下面的代码会让js引擎一直执行下去，不会有空闲时间把页面就渲染不出来，所以要通过异步来修改dom，如下
    // div.innerHTML = "111"
    // div1.innerHTML = "222"
    // while (true) { }

    //所以用异步来操作dom,但是这里面有个细节，就是浏览器的刷新频率一般是60hz的，也就是16毫秒刷新一次，这就意味着如果、//timeout设置的太小,setTimeout中的内容会先执行，会阻塞后面的Gui渲染，页面一直会停留在空白
    const timeout = 16;
    setTimeout(function name(params) {
      div.innerHTML = '11';
      div1.innerHTML = '12';
      while (true) { }
    }, timeout)

  </script>
  <script>console.log(3)</script>
  <div id="div2">333</div>
</body>

上面代码执行发现div中的文本都没有发生改变

结论: js引擎不是每次在执行更新dom语句时，都会停下来等Gui渲染引擎更新完dom再执行后面的js代码

tip: 关于debugger的阻塞

在验证的过程中发现了一个有趣的问题，代码如下


<body>
  <div id="div">1</div>
  <div id="div1">123</div>

  <script>

    const div = document.getElementById('div');
    const div1 = document.getElementById('div1');

    setTimeout(function name(params) {
      div.innerHTML = '11';
      debugger
      div1.innerHTML = '12';
      console.log(2)
      while (true) { }
    }, 1000)

  </script>
  <script>console.log(3)</script>
  <div id="div2">333</div>
</body>

发现在触发debugger的时候，id为div的div的文本已经发生了改变,瞎猜是在触发debugger的时候，会使js引擎的状态从忙碌变成了空闲，然后Gui渲染引擎就更新了页面，所以我们看到的div内容发生了改变，so，debugger不会阻塞Gui的渲染

以上内容纯属瞎编，各位看官请谨慎

最后编辑于：2020.12.25 09:19:54