1.在讨论浏览器与JavaScript之前,我们先来简单了解一下进程与线程
进程(process):资源分配的最小单位

进程是应用程序的执行实例,是操作系统进行资源分配和调度的一个独立单位。

线程(thread):CPU调度的最小单位

线程是进程内部的一个执行单元,是被系统独立调度和分派的基本单位。系统创建好进程后,实际上就启动执行了该进程的主执行线程。

上面这样讲可能不是很容易理解,我们以工厂模式来比喻:

  • 计算机的核心是CPU,它承担了所有的计算任务。它就像一座工厂,时刻在运行着。
  • 单个CPU一次只能运行一个任务
  • 进程就好比工厂的车间,它代表CPU所能处理的单个任务
  • 一个车间里,可以有很多工人。他们协同完成一个任务
  • 线程就好比车间里的工人,一个进程可以包含多个线程
2.浏览器多线程与Javascript单线程(单线程与多线程)

首先浏览器是多线程的,所以浏览器一次能够处理多个事件,比如渲染页面,脚本执行,事件处理等。

JavaScript是单线程的(浏览器只给JS分配了一个线程)

JavaScript单线程

单线程的特点就是一次只能处理一件事情。后一个任务需要等待前一个任务执行完再执行。

JS在单线程中实现异步机制只要依靠浏览器的任务队列,任务队列分为同步任务队列异步任务队列,异步任务又可以分为宏任务微任务

在同步任务自上而下执行时,如果遇到一个异步任务,不会立即执行,而是把它放到异步任务队列中去排队,当同步任务执行完成后,才会到异步任务队列进行查找等待任务队列中的内容(同步任务队列完不成,不管异步任务是否达到时间,都不执行),等达到条件后执行,然后再接着去异步任务队列中 查找。这就是因为js是单线程的,一次只能处理一件事情

JavaScript为什么要设计成单线程

JavaScript之所以采用单线程,而不是多线程,跟它的历史有关。最开始的JavaScript功能并没有现在这么强大,作为浏览器脚本语言,它最初主要是用来处理页面的用户交互,以及DOM的操作。如果JavaScript是多线程的话,假设存在两个线程同时操作一个DOM,这时候浏览器就不知道应该处理哪个线程的操作结果了。

3.同步与异步任务

**同步: ** 在一个线程上同一时间只能做一件事情,当情事情做完才能进行下一个任务。

异步: 在主栈中执行一个任务,但是发现这个任务是一个异步的操作,会将它放到异步任务队列中。

异步任务又分为宏任务微任务

宏任务:定时器setTimeoutsetInterval事件绑定回调函数node中的fs模块

微任务:new Promise().then(回调) process.nextTick()async await

4.执行栈与任务队列

1)执行栈:从名字可以看出,执行栈使用到的是数据结构中的栈结构, 它是一个存储函数调用的栈结构,遵循先进后出的原则。它主要负责跟踪所有要执行的代码。 每当一个函数执行完成时,就会从堆栈中弹出(pop)该执行完成函数;如果有代码需要进去执行的话,就进行 push 操作。

2)任务队列: 从名字中可以看出,任务队列使用到的是数据结构中的队列结构,它用来保存异步任务,遵循先进先出的原则。它主要负责将新的任务发送到队列中进行处理。

执行顺序:

JavaScript在执行代码时,会将同步的代码按照顺序排在执行栈中,然后依次执行里面的函数。当遇到异步任务时,就将其放入任务队列中,等待当前执行栈所有同步代码执行完成之后,就会从异步任务队列中取出已完成的异步任务的回调并将其放入执行栈中继续执行,如此循环往复,直到执行完所有任务

先执行同步任务,执行完接着执行微任务,最后执行宏任务。这个过程会不断重复

下面看几道经典面试题
console.log("script start");

async function async1() {
await async2();
console.log("async1 end");
} async function async2() {
console.log("async2 end");
} async1(); setTimeout(function () {
console.log("setTimeout");
}, 0); new Promise((resolve) => {
console.log("Promise");
resolve();
})
.then(function () {
console.log("promise1");
})
.then(function () {
console.log("promise2");
}); console.log("script end");
// script start => async2 end => Promise => script end => async1 end=> promise1 => promise2 => setTimeout

解析:

1.首先执行同步任务:打印script start,async2 end,Promise,script end

2.同步任务执行完,开始执行微任务:async1 end,promise1,promise2

3.最后执行宏任务:setTimeout

JavaScript有同步任务和异步任务,浏览器是怎么处理的?的更多相关文章

  1. 「JavaScript」同步、异步、回调执行顺序之经典闭包setTimeout分析

    聊聊同步.异步和回调 同步,异步,回调,我们傻傻分不清楚, 有一天,你找到公司刚来的程序员小T,跟他说:“我们要加个需求,你放下手里的事情优先支持,我会一直等你做完再离开”.小T微笑着答应了,眼角却滑 ...

  2. 0182 JavaScript执行机制:单线程,同步任务和异步任务,执行栈,消息队列,事件循环

    以下代码执行的结果是什么? [结果是1 2 3 ] console.log(1); setTimeout(function () { console.log(3); }, 1000); console ...

  3. JavaScript同步模式,异步模式及宏任务,微任务队列

    首先JavaScript是单线程的语言,也就是说JS执行环境中,负责执行代码的线程只有一个.一次只能执行一个任务,如果有多个任务的话, 就要排队,然后依次执行,优点就是更安全,更简单.缺点就是遇到耗时 ...

  4. 详细解读XMLHttpRequest(一)同步请求和异步请求

    本文主要参考:MDN XMLHttpRequest 让发送一个HTTP请求变得非常容易.你只需要简单的创建一个请求对象实例,打开一个URL,然后发送这个请求.当传输完毕后,结果的HTTP状态以及返回的 ...

  5. JavaScript 学习笔记之线程异步模型

    核心的javascript程序语言并没有包含任何的线程机制,客户端javascript程序也没有任何关于线程的定义,事件驱动模式下的javascript语言并不能实现同时执行,即不能同时执行两个及以上 ...

  6. 【转载】Javascript里面的线程和异步

    JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序. 参考这篇文章 http://www.ruanyifeng.com/blog/2012/1 ...

  7. 使用HTTP的同步方式还是异步方式?

    同步与异步 同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 异步: 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完 ...

  8. 同步请求和异步请求的区别,ajax异步请求如何理解

    同步请求和异步请求的区别 先解释一下同步和异步的概念 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的 ...

  9. 通知url必须为直接可访问的url,不能携带参数 异步接收微信支付结果通知的回调地址 不能携带参数。 回调地址后是否可以加自定义参数 同步回调地址 异步回调地址 return_url和notify_url的区别

    [微信支付]微信小程序支付开发者文档 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_7 通知url必须为直接可访问的 ...

  10. Vector(同步)和ArrayList(异步)异同

    //1 同步 异步 //未响应 = 假死 占用内存过多 内存无法进行处理 //请求的方式 :同步 异步 //网页的展现过程中(同步):1. css文件的下载 2.js文件的下载 3.下载你当前的htm ...

随机推荐

  1. 数据结构和算法 c#– 1.单项链表

    1.顺序存储结构 Array 1.引用类型(托管堆) 2.初始化时会设置默认值   2.链式存储结构 2.1.单向链表 2.2.循环链表 2.3.双向链表

  2. fw:sed的高级用法

    转的,找不到原创了.... sed高级用法 <收藏> 首先,应该明白模式空间的定义.模式空间就是读入行所在的缓存,sed对文本行进行的处理都是在这个缓存中进行的.这对接下来 的学习是有帮助 ...

  3. WIN8.1 PROBLEMS 01

    win8装好后右下角显示secureboot未正确配置桌面会显示“Windows 8.1 Secure Boot未正确配置”的水印问题: 安全启动(Secure Boot)可以阻止未授权软件的运行,提 ...

  4. 网页HTML1

    表格表单 表格, <tabale>    -------表格 <tr>            --------------行 <td>             -- ...

  5. Python——str(字符串)内部功能介绍

    str内部功能详解: class str(object): """ str(object='') -> str str(bytes_or_buffer[, enco ...

  6. OSI七层模型详解

    OSI 七层模型通过七个层次化的结构模型使不同的系统不同的网络之间实现可靠的通讯,因此其最主要的功能就是帮助不同类型的主机实现数据传输 . 完成中继功能的节点通常称为中继系统.在OSI七层模型中,处于 ...

  7. Lucene介绍与入门使用

    Lucene简介 Lucene是apache软件基金会4 jakarta项目组的一个子项目,是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整 ...

  8. 洛谷P3740 【[HAOI2014]贴海报】

    (呃...本蒟蒻的第一篇题解qwq)..不废话了讲正题..思路来源于铺地毯(-->传送门)..先算出每一个格子上覆盖的海报并把可见的海报做标记然后算出有多少海报是可见的..但是作为省选题怎么可能 ...

  9. x264阅读记录-3

      14. x264_macroblock_encode函数-1 这个函数主要根据已经选定的模式来对宏块残差进行编码. )如果是P_SKIP模式,那么调用x264_macroblock_encode_ ...

  10. ES6学习--箭头函数

    1. 箭头函数基本形式 let func = (num) => num; let func = () => num; let sum = (num1,num2) => num1 + ...