JavaScript基础之运行机制

由一段代码进行正题:

console.log(1);
setTimeout(function(){
    console.log(2)
},0);
console.log(3)

浏览器依次输出1,3,2,而不是看上去的1,2,3;
JS是单线程语言:JS在同一时间只能做一件事。
任务队列:分为同步任务和异步任务;任务队列有执行顺序,同步任务第一时间执行,同步任务执行完成后才能执行异步任务;

for(var i=0;i<3;i++){
    setTimeout(function(){
        console.log(i)
    },1000)
}

运行上面的代码,浏览器会输出:3,3,3。
这段代码的原理在于,循环第一次的时候,执行setTimeout函数,但是因为setTimeout函数是异步任务,所以里面的语句都会被挂起不执行,循环第二次及之后的循环都是如此。那么此时setTimeout函数被放入异步队列,但是不执行,只有当这个异步时间到了规定的时间,函数体才会被执行。对于这个例子来说,for循环执行完毕,setTimeout函数依次被放入异步队列,然后过了1秒或2秒后,异步队列中的函数开始执行。

Event Loop:浏览器的JS引擎遇到setTimeout函数,识别这是一个异步任务,它不会把它放在运行栈中,它会把它拿走放进,拿走之后也不会立即放入异步队列中,先保留住,同步任务执行完后,到了setTimeout函数约定的时间,time模块会把它放入异步队列,浏览器同步任务执行完了,就会执行这个任务,它执行完后执行栈又空了,此时浏览器又会监听异步队列中是否有任务需要执行,如果有就会再拿出来执行,如此循环的过程就是Event Loop。
开启异步任务的条件:

setTimeout和setInerval
DOM事件
ES6中的Promise

浏览器假死现象的原理也是因为JS的单线程导致,如果同步任务一直在处理,浏览器就会卡住,做不了其它操作

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • script执行 浏览器在执行HTML的时候如果遇到 时会停止页面的渲染,去下载和执行js的文件直接遇见 会继续渲...
    唯我楼兰阅读 8,425评论 0 4
  • 一.页面中JS的位置 一般来说,一个页面是由HTML+CSS+JavaScript三要素组成。在一个HTML页面中...
    饥人谷_刘冲阅读 5,977评论 0 4
  • defer和async是script标签的两个属性,用于在不阻塞页面文档解析的前提下,控制脚本的下载和执行。我们先...
    曾祥辉阅读 10,488评论 0 2
  • 加载异步 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 scrip...
    饥人谷_tanfei阅读 1,531评论 0 0
  • async和defer 没有defer或者async,浏览器会立刻加载并执行脚本,“立即”指的是在渲染该scrip...
    mianmiani阅读 1,553评论 0 0

友情链接更多精彩内容