【JavaScript】JS执行机制--同步与异步

简介: 【JavaScript】JS执行机制--同步与异步

单线程

JavaScript语言具有单线程的特点,同一个时间只能做一件事情。这是因为JavaScript脚本语言是为了处理页面中用户的交互,以及操作DOM而诞生的。如果对某个DOM元素进行添加和删除,不同同时进行。应该是先添加,再删除,事件有序。

单线程的特点是所有任务都需要排队进行,前一个任务结束,才会执行后一个任务。这样会导致问题:如果JS执行时间过长,这样会导致页面渲染不连贯,导致页面渲染加载阻塞。

同步与异步

为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript脚本创建多个线程,JS中出现了同步和异步。

同步

前一个任务结束后再执行后一个任务

如:

console.log(1);
console.log(2);
console.log(3);
// 1 2 3

异步

在做这件事的同时,你还可以去处理其他事情

如:

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

如果按同步执行,要先通过定时器执行完才执行下一步,浏览器效率大大降低。

所以异步可以先打印 2 等定时器时间到再打印3

事件循环

如果这样,结果打印的是什么呢?

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

JavaScript的同步任务在主线程中执行,形成一个执行栈

异步任务通过回调函数实现,把任务添加到任务队列中

执行步骤:

先执行执行栈中的同步任务

异步任务(回调函数)放入任务队列中

一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行

所以上面打印的结果还是1 2 3

类似的

console.log(1);
document.onclick = function() {
    console.log('click');
}
console.log(2);
setTimeout(function() {
    console.log(3)
}, 3000)
<!-- 打印1 2 如果点击了,打印click,无论是否点击3秒后都打印3 -->

同步任务放在执行栈中执行,异步任务由异步进程处理放到任务队列中,执行栈中的任务执行完毕会去任务队列中查看是否有异步任务执行,由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)。

目录
相关文章
|
5天前
|
人工智能 JavaScript 前端开发
使用Node.js模拟执行JavaScript
使用Node.js模拟执行JavaScript
11 2
|
5天前
|
消息中间件 JavaScript 前端开发
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
17 1
|
6天前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
30 1
|
8天前
|
JSON JavaScript 中间件
深入浅出Node.js中间件机制
本文将带你探索Node.js中一个核心概念——中间件机制。我们将通过浅显的语言和生动的比喻,揭示中间件如何作为请求和响应之间的“交通枢纽”,在应用程序中起到至关重要的作用。从基础原理到实际应用,你将了解到中间件不仅简化了代码结构,还提高了开发效率,是Node.js开发不可或缺的一部分。
19 1
|
4天前
|
JavaScript 安全 中间件
深入浅出Node.js中间件机制
【10月更文挑战第4天】在探索Node.js的海洋中,中间件机制犹如一座灯塔,为开发者指引方向。本文将带你一探究竟,从浅入深地理解这一核心概念。我们将通过生动的比喻和实际代码示例,揭示中间件如何在请求和响应之间搭建桥梁,实现功能的扩展与定制。无论你是初学者还是有经验的开发者,这篇文章都将为你提供新的视角和深入的理解。
12 0
|
5月前
|
前端开发 JavaScript UED
深入理解 JavaScript 同步和异步,让网页灵动起来!
深入理解 JavaScript 同步和异步,让网页灵动起来!
|
4月前
|
XML 移动开发 前端开发
JS设置Ajax为同步或异步
JS设置Ajax为同步或异步
43 0
|
JavaScript 前端开发
JavaScript同步、异步及事件循环
JavaScript同步、异步及事件循环
89 1
|
5月前
|
JavaScript
JS中同步和异步的区别
JS中同步和异步的区别
53 0
|
JavaScript 前端开发
js 的同步与异步,如何设置
js 的同步与异步,如何设置
131 0