<!DOCTYPE HTML>
<html>
<body>
<p id=demo>length 属性返回字符串的长度：</p>
<script>
var len = document.getElementById("demo").innerHTML.length;
if(len>=18) //len>=18是判断条件
{ document.write("字符长度大于等于18。");
document.getElementById("demo").innerHTML=null}//会隐藏掉<p>里的内容，但是还是会显示满足条件后返回的内容
else
{ document.write("字符长度小于18。");}
if(document.getElementById("demo").innerHTML=null)
{document.write("p不在");}
else
{ alert("p还在");}//明明p不在了，但是却弹出p还在
</script>
</body>
</html>
问题：alert无论放在JS哪里，都会最先被执行吗？
2020-04-03
JavaScript执行原理：
JavaScript 引擎是单线程运行的，浏览器无论在什么时候都只且只有一个线程在运行 JavaScript 程序，初衷是为了减少 DOM 等共享资源的冲突。可是单线程永远会面临着一个问题，那就是某一段代码阻塞会导致后续所有的任务都延迟。又由于 JavaScript 经常需要操作页面 DOM 和发送 HTTP 请求，这些 I/O 操作耗时一般都比较长，一旦阻塞，就会给用户非常差的使用体验。
于是便有了事件循环（event loop）的产生，JavaScript 将一些异步操作或 有I/O 阻塞的操作全都放到一个事件队列，先顺序执行同步 CPU代码，等到 JavaScript 引擎没有同步代码，CPU 空闲下来再读取事件队列的异步事件来依次执行。
分析：
由于页面渲染是 DOM 操作，会被 JavaScript 引擎放入事件队列；
alert() 是 window 的内置函数，被认为是同步 CPU代码；
JavaScript 引擎会优先执行同步代码，alert 弹窗先出现；
alert 有特殊的阻塞性质，JavaScript 引擎的执行被阻塞住；
点击 alert 的“确定”，JavaScript 没有了阻塞，执行完同步代码后，又读取事件队列里的 DOM 操作，页面渲染完成。
解决：
使用setTimeout异步执行，还有其他办法例如替换alert等
setTimeout("alert('msg');", 3000);
同学，希望你能看懂^_^
举报
