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的渲染
以上内容纯属瞎编，各位看官请谨慎
