zoukankan      html  css  js  c++  java
  • 简述 JavaScript 的执行机制

    一、单线程

    在这里插入图片描述

    为了解决这个问题,防止下一个任务等待上一个任务等待太长的时间,所以提出了 Web Worker标准,允许 JS 创建多个线程,于是JS出现了同步异步 ,异步就是可以同时进行多个任务,这样,大大的提高了我们代码的执行效率

    在这里插入图片描述

    栗子:

    在这里插入图片描述

    打印结果为:
    在这里插入图片描述

    (一) 同步任务

    • 同步任务都在主线程上执行,形成一个执行栈

    (二)异步任务

    • JS的异步通过回调函数来实现,一般而言,异步任务有三种类型
    1. 普通事件: click事件 ,resize事件等
    2. 资源加载,如load,error等
    3. 定时器,包括 setInterval 和setTimeout等
    • 同步任务是放到啊主线程的执行栈中,异步任务相关回调函数是放到任务队列(消息队列)中
      在这里插入图片描述

    二、JS执行机制

    在这里插入图片描述

    三、事件循环 (event loop)

    遇到多个任务的时候,JS是如何去进行处理的呢
    所有的异步任务都要放到任务队列中去吗?或者谁放在前面,谁放在后面呢?这时候就引入JS的异步进程进行处理

    1. 先执行console.log(1) 打印 1

    2. 然后将 document.onclick 提交给异步进程处理,决定是否写入任务队列中,只有点击了才会把回调函数的异步任务就放到任务队列中去,如果不点击就不写入到任务队列中去

    3. 再执行console.log(2) 打印2

    4. 将setTimeout提交给异步进程进行处理,只要3秒时间到了,才会把异步回调写到任务队列中去,只是写入,尚未执行,要等到所有的同步任务都结束了才去执行

    5. 在没有执行点击事件的时候,结果为1,2,3
      在这里插入图片描述

    6. 如果在3秒之前就点击的话,那么就会先执行点击事件的回调函数
      在这里插入图片描述

    7. 假设在3秒之前没有进行,那么当定时器的任务执行完之后,就把任务队列中清空,但是同步任务会反复查看任务队列中是否还有任务,如果此时执行点击事件的话,又会把点击事件的回调函数放入到任务队列中去执行,当执行完后又会清空,此时如果再次点击的话,又会把点击的回调放到队列中去执行

    在这里插入图片描述

    上图理解:

    在这里插入图片描述
    总结:
    由于主线程不断的重复获取任务,执行任务,再获取任务,再执行任务,所有这种机制就被称为 事件循环 (event loop)

  • 相关阅读:
    Spring Data JPA条件查询
    Cannot add foreign key constraint
    项目运行慢的原因剖析
    文本摘要的一些研究概念
    datatables表格设置序号自增
    记录一次没有报错的错误
    final、static、this、super关键字总结
    datatables条件搜索后表格内出现重复字符串
    linux上重装redis,设置密码
    datatables render出现重复的字符
  • 原文地址:https://www.cnblogs.com/Chinatsu/p/14068298.html
Copyright © 2011-2022 走看看