【知识梳理】4.2JS运行机制

cgh1999520 发布于2019-08-22 15:57 / 3358人阅读

摘要：任务队列分同步任务异步任务，异步任务要挂起，同步任务全部执行完再执行异步任务。执行栈执行的是同步任务。什么时候开启异步任务和事件的，先注册函数体，触发时放入异步任务队列，再执行点击某一按钮浏览器卡死中的。

1.对比同步和异步

使用异步的场景：

定时任务：setTimeout、setInterval

网络请求：ajax请求、动态加载

事件绑定

//同步
  console.log(100);
  alert(200);//同步会造成阻塞
  console.log(300);

//异步
  console.log(100);
    setTimeout(function(){
        console.log(200);
    },1000);
  console.log(300);

//加载示例
console.log("start");
var img = document.createElement("img");
img.onload = function(){
    console.log("loaded");
}
img.src = "/xxx.png";
console.log("end");

2.同步任务和异步任务的优先顺序

JS是单线程的，即在同一时间只能做一件事。从上到下执行。

任务队列：分同步任务、异步任务（setTimeout()、setInterval()，异步任务要挂起，同步任务全部执行完再执行异步任务）。

Event Loop：同步任务放在运行栈里边全部执行，遇到异步任务先挂起，等到时间到了的时候（即使是0，浏览器最小的是4毫秒），Timer模块会把他放到异步队列中，当js引擎发现运行栈里边的同步任务全部执行完后，再去读异步任务队列，发现里边有东西后，读出来放到运行栈中执行，此时setTimeout函数体就变成了运行栈中的同步任务，执行完后，栈空了，再去监听异步队列中有没有，如果有，再去执行。这个循环过程就叫做event loop。

1.执行栈执行的是同步任务。

2.什么时候向异步队列中取任务。

3.什么时候往异步队列中放任务。

什么时候开启异步任务？

setTimeout和setInterval；

DOM事件（js的addEventListener，先注册函数体，触发时放入异步任务队列，再执行；eg:点击某一按钮浏览器卡死）；

es6中的Promise。

     // 1.打印出顺序为1、3、2
    console.log(1);
    setTimeout(function(){//setTimeout异步任务要挂起，同步任务全部执行完再执行异步任务
        console.log(2);
    },0);//4毫秒延迟
    console.log(3);

    // 2.只输出a,while(true)是同步任务，一直在执行
    console.log("a");
    while(true){

    }
    console.log("b");

    // 3.只输出A,同步任务全部执行完再执行异步任务
    console.log("A");
    setTimeout(function(){
        console.log("B");
    },0);
    while(1){
        
    }

3.异步任务（队列）的放入时间和执行时间

    
    // 输出四个4,for循环是个同步任务
    for(var i=0;i<4;i++){
        setTimeout(function(){//到1s时，Timer模块才将其放入异步任务队列中(放入时间)，等待事件循环执行（执行时间）
            console.log(i);
        },1000);
    }

4.一道面试题

//1.setTimeout()异步任务

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

//运行结果
Thu Mar 15 2018 17:40:52 GMT+0800 (中国标准时间) 5

Thu Mar 15 2018 17:40:53 GMT+0800 (中国标准时间) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中国标准时间) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中国标准时间) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中国标准时间) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中国标准时间) 5


//2.立即执行函数

for(var i=0;i<5;i++){
    (function(j=i){
       setTimeout(function(){
         console.log(new Date,j);
       },1000);//此处为1000
    })(i);
}
console.log(new Date,i);

//运行结果
Thu Mar 15 2018 17:46:53 GMT+0800 (中国标准时间) 5

Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 0
Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 1
Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 2
Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 3
Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 4


//3.默认4毫秒延迟
for(var i=0;i<5;i++){
    (function(j=i){
       setTimeout(function(){
         console.log(new Date,j);
       },0);//此处为0
    })(i);
}
console.log(new Date,i);

//运行结果
Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 5

Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 0
Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 1
Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 2
Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 3
Thu Mar 15 2018 17:46:54 GMT+0800 (中国标准时间) 4

云服务器 GPU云服务器运行机制 nodejs运行机制 php 运行机制 php的运行机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93898.html

JS核心知识点梳理——异步，单线程，运行机制

摘要：引言学习的时候，经常听人说，即是异步的，又是单线程的。所以我们说是异步单线程的。参考从浏览器多进程到单线程，运行机制最全面的一次梳理运行机制详解再谈异步机制详解运行原理解析并发模型与事件循环 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言学习javascipt的时候，经常听人说，javascipt即是异步...

TANKING 2019-08-26 13:55 评论0 收藏0
从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

摘要：如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程浏览器内核多线程单线程运行机制的区别。因此准备梳理这块知识点，结合已有的认知，基于网上的大量参考资料，从浏览器多进程到单线程，将引擎的运行机制系统的梳理一遍。前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。 ----------超长文+多图预警，需要花费不少时间。---------- 如果看完本文后，还...

wanghui 2019-08-22 13:56 评论0 收藏0
JS核心知识点梳理——上下文、作用域、闭包、this（上）

摘要：引言满满的干货，面试必系列，参考大量资料，并集合自己的理解以及相关的面试题，对核心知识点中的作用域闭包上下文进行了梳理。如果在小区这个作用域找到了张老师，我就会在张老师的辅导下学钢琴我张老师房间钢琴构成了学琴的上下文环境。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言满满的干货，面试必bei系列，参考大...

Andrman 2019-08-26 13:50 评论0 收藏0
NodeJs+Express+Mysql + Vuejs 项目实战 - 大纲

摘要：多一个技能多一条出路，祝你在自学道路上越走越好，掌握自己的核心技能，不只是优秀，还要成为不可替代的人 NodeJs+Express+Mysql + Vuejs 项目实战最近准备写一系列文章，全面讲述如何基于NodeJs + Express + Mysql + Vuejs 从零开发前后端完全分离项目；文笔及技术可能在某些方面欠佳，请您指正，共同学习进步前端：Vuejs全家桶后端：...

noONE 2019-08-23 14:55 评论0 收藏0