JS执行机制

以下代码执行的结果是什么?

 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 2 3

1. JS 是单线程

JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这[ ]脚 本语言诞生的使命所致——JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对 某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。

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

2. 同步任务和异步任务

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

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

同步

前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。

异步

你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。

JS中所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。 ​ 同步任务指的是: 在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务; 异步任务指的是: 不进入主线程、而进入”任务队列”的任务,当主线程中的任务运行完了,才会从”任务队列”取出异步任务放入主线程执行。

3. JS执行机制(事件循环)

4. 代码思考题

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

 结果:先打印1,2 然后判断两个事件谁先准备完成,如果先点击,则继续打印click,三秒后打印3,如果三秒内没有点击,则先打印3,点击后再打印click。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6相关概念及新增语法

    ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。

    星辰_大海
  • jQuery 事件对象,拷贝对象,多库共存

    jQuery 对DOM中的事件对象 event 进行了封装,兼容性更好,获取更方便,使用变化不大。事件被触发,就会有事件对象的产生。

    星辰_大海
  • 常用鼠标事件

    星辰_大海
  • 全方位理解JavaScript的Event Loop

    下面我们一个一个的来了解 Event Loop 相关的知识点,最后再一步一步分析出本段代码最后的输出顺序。

    laixiangran
  • JavaScript之Event Loop

    先看段代码: console.log(1); setTimeout(function () { console.log(2); new Pr...

    laixiangran
  • 十四、深入核心,详解事件循环机制

    JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了。为了解决自己的这个困扰,在学习的过...

    用户6901603
  • Js 的事件循环(Event Loop)机制以及实例讲解

    大家都知道js是单线程的脚本语言,在同一时间,只能做同一件事,为了协调事件、用户交互、脚本、UI渲染和网络处理等行为,防止主线程阻塞,Event Loop方案应...

    OBKoro1
  • 面试题:说说事件循环机制(满分答案来了)

    JavaScript代码的执行过程中,除了依靠函数调用栈来搞定函数的执行顺序外,还依靠任务队列(task queue)来搞定另外一些代码的执行。整个执行过程,我...

    winty
  • 如何解释Event Loop面试官才满意?

    想要了解JavaScript引擎,首先我们从它的运行机制Event Loop来说起。

    童欧巴
  • JavaScript同步、异步及事件循环

    JS是单线程的,每次只能做一件事情。像以下这种情况,代码会按顺序执行,这个就叫同步。

    谭光志

扫码关注云+社区

领取腾讯云代金券