以下代码执行的结果是什么? 【结果是1 2 3 】

 console.log(1);

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

以下代码执行的结果是什么? 【结果是1 2 3 】

 console.log(1);

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

1.3.1 JS 是单线程

	单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。
这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

1.3.2 同步任务和异步任务

​ 单线程导致的问题就是后面的任务等待前面任务完成,如果前面任务很耗时(比如读取网络数据),后面任务不得不一直等待!!

​ 为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制。于是,JS 中出现了同步任务异步任务


1.3.2.1 同步

​ 前一个任务结束后,再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。

​ 比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。


1.3.2.2 异步

​ 你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。

​ 比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。

`他们的本质区别: 这条流水线上各个流程的执行顺序不同。`

    JS中所有任务可以分成两种,一种是`同步任务`(synchronous),另一种是`异步任务`(asynchronous)。

    `同步任务`指的是:
在`主线程`上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务; `异步任务`指的是:
不进入`主线程`,而进入”任务队列”的任务,当主线程中的任务运行完了,才会从”任务队列”取出异步任务放入主线程执行。


1.3.3 JS执行机制(事件循环)


1.3.4 代码思考题

事件循环 : 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)。

 console.log(1);
document.onclick = function() {
console.log('click');
} setTimeout(function() {
console.log(3)
}, 3000)
console.log(2);

0182 JavaScript执行机制:单线程,同步任务和异步任务,执行栈,消息队列,事件循环的更多相关文章

  1. javascript执行机制

    文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的 ...

  2. JavaScript 执行机制

    一.宏任务与微任务 macro-task(宏任务):包括整体代码script,setTimeout,setInterval micro-task(微任务):Promise,process.nextTi ...

  3. 转载---JavaScript执行机制

    很好的一篇文章,原地址 JavaScript执行机制 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不 ...

  4. 【js】javaScript 执行机制

    javascript 是一门单线程语言(按照语句一行一行的执行) let a = '1'; console.log(a); let b = '2'; console.log(b); 这样子正常执行是没 ...

  5. 【THE LAST TIME】彻底吃透 JavaScript 执行机制

    前言 The last time, I have learned [THE LAST TIME]一直是我想写的一个系列,旨在厚积薄发,重温前端. 也是给自己的查缺补漏和技术分享. 欢迎大家多多评论指点 ...

  6. 这一次,彻底弄懂 JavaScript 执行机制

    本文转自https://juejin.im/post/59e85eebf265da430d571f89#heading-4 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还 ...

  7. 探索JavaScript执行机制

    前言 不论是工作还是面试,我们可能都经常会碰到需要知道代码的执行顺序的场景,所以打算花点时间彻底搞懂JavaScript的执行机制. 如果这篇文章有帮助到你,️关注+点赞️鼓励一下作者,文章公众号首发 ...

  8. 夯实基础上篇-图解 JavaScript 执行机制

    讲基础不易,本文通过 9 个 demo.18 张 图.2.4k 文字串讲声明提升.JavaScript 编译和执行.执行上下文.调用栈的基础知识.

  9. 彻底弄懂 JavaScript 执行机制

    本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定 ...

随机推荐

  1. [C#] 调试silverlight的时候,总是报“向占位程序传送了空的索引指针”

    这是由于visual studio在调试silverlight的时候,必须和ie一起工作. 按照以下步骤可以把ie设为visual studio的默认浏览器(不用修改操作系统的默认浏览器): 1) 在 ...

  2. HTML5 meta 属性整理

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  3. java final域

    public final class ThreeStooges { /* * stooges是Set<String>类型的引用,final限定该引用成员属性stooges被赋初值后,就不能 ...

  4. Java中方法的格式

    [修饰符] 返回值类型 方法名([参数类型 形式参数1,参数类型 形式参数2,……]) {             执行语句;     [return 返回值;]//需要的话 } 参数列表(参数的类型 ...

  5. CSS3 box-sizing 盒子布局

    在CSS中盒模型被分为两种,第一种是W3C的标准模型,第二种是IE怪异盒模型.不同之处在于后者的宽高定义的是可见元素框的尺寸,而不是元素框的内容区尺寸.目前对于浏览器大多数元素都是基于W3C标准的盒模 ...

  6. asp dotnet core 从 Frp 获取用户真实 IP 地址

    我在本地开一个服务,然后通过 Frp 让小伙伴可以在外网访问我的 API 连接,但是直接通过 RemoteIp 拿到的是本地的地址.本文告诉小伙伴如何通过 Frp 可以拿到用户的真实 IP 地址 我写 ...

  7. 备战省赛组队训练赛第十四场(UPC)

    codeforces:传送门 upc:传送门 外来题解: [1]:https://blog.csdn.net/ccsu_cat/article/details/86707446 [2]:https:/ ...

  8. 2018.12.7 浪在ACM 集训队第八次测试赛

    2018.12.7 浪在ACM 集训队第八次测试赛  https://blog.csdn.net/QLU_minoz/article/details/84886717   感谢苗学林同学C题和D题题解 ...

  9. samba 部署与实验

    一.本地用户登录 1.本地用户验证(Samba服务器默认的安全级别,用户在访问共享资源之前必须提供用户名和密码进行验证) 拓展:tdbsam:该方式是使用一个数据库文件来验证.数据库文件叫passdb ...

  10. git 通过 SublimeMerge 处理冲突

    在使用 Git 的时候,如果是多个小伙伴开发,那么如果同时修改一个文件将出现冲突.也就是在自动合并的时候不知道使用哪个代码才对,此时就需要合并工具的协助.我找了很久发现 SublimeMerge 是界 ...