猿问

浏览器debugger为什么没有阻止浏览器渲染界面而alert可以？

看代码


<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

<div id="text">你好</div>

  <button id="update">更新</button>

  <script>

  update.onclick=function(){

    text.innerHTML='hello'

    alert()

  }

  </script>

</body>

</html>

在线调试jsbin


上面的代码当我点击按钮时弹出了alert()但是界面没有变化，知道alert执行完才看到变化

但是用debugger却不可以，这是为什么？我想知道debugger的原理是什么？


子衿沉夜
浏览 915回答 4
4回答

桃花长相依

感谢各位的回答，应该解答了我的这个疑惑还有另个跟promsie相关的疑惑，我现在感觉可以这么理解来解释了。加断点跟不加断点的区别：根绝 @xdsnet 的说法，加断点时：浏览器是一次扔给js执行线程一行代码，执行完这行代码后执行栈已经没有其他代码了，读取不到了，浏览器任务此时代码执行完毕了，所以就开始GUI render，此时可以看到界面发生变化.不加断点时：浏览器执行完一行代码会继续读取另一行代码，直到没有可执行的代码为止包括也没有微任务队列了然后开始GUI render,由于是瞬间的给我们的感觉是同时的.可以看这个代码&nbsp;<script>setTimeout(()=>{&nbsp; Promise.resolve().then(()=>{&nbsp; &nbsp;text.innerHTML="改变后的"&nbsp; &nbsp; console.log('123')&nbsp; })&nbsp; console.log('没有改变呢')},1000)&nbsp; </script>从图中可以看到GUI render的事件确实是晚于所有代码的执行时间，这也解释了我的另外一个疑惑：为什么断点调试时promsie微任务队列里面的回调的代码没有执行完时就看到了界面变化，这其实还是因为debugger是一点点扔代码给浏览器的原因。现在我的疑惑大致解决了，但也可能理解的不对。希望指出
0

慕少森

alert执行完才看到变化我觉得原因在于 执行到alert语句时直接阻塞了浏览器的GUI渲染线程，alert前加一句console.log，可以发现这时候值是变化了的，但GUI渲染是被阻塞了的，所以界面没有变化。&nbsp; update.onclick = function() {&nbsp; &nbsp; text.innerHTML = 'hello'&nbsp; &nbsp; console.log(text.innerHTML)&nbsp; // 能打印出 hello&nbsp; &nbsp; alert()&nbsp; }而debugger语句只是暂停JS的执行，并不会影响到浏览器的渲染。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答