JavaScript执行机制

简介: JavaScript执行机制

1.JavaScript是单线程


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


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


2.同步与异步



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


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


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


同步与异步的本质区别:这条流水线上各个流程的执行顺序不同。



3.同步任务



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


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

35.png


4.异步任务



JS的异步是通过回调函数实现的。一般来说,异步任务有以下三种类型:a.普通事件,如click、resize等;b.资源加载,如load、error等;c.定时器(setTimeout、setInterval等);异步任务相关的回调函数添加到任务队列中(任务队列也称为消息队列)。


34.png


5.JavaScript执行机制


a.先执行执行栈中的同步任务b.异步任务(回调函数)放入任务队列中;c.一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。


33.png

32.png

6.事件循环(event loop)



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


1console.log(1);
2document.onclick = function() {
3  console.log("click");
4};
5console.log(2);
6setTimeout(function() {
7  console.log(3);
8}, 3000);

31.png

30.png


7.相关资料


[1] https://github.com/cdlwhm1217096231/HTML_CSS_JavaScript/tree/master/JavaScript

相关文章
|
1月前
|
存储 JavaScript 前端开发
深入理解JavaScript中的事件循环(Event Loop):机制与实现
【10月更文挑战第12天】深入理解JavaScript中的事件循环(Event Loop):机制与实现
79 3
|
2月前
|
JavaScript 安全 前端开发
乾坤js隔离机制
乾坤js隔离机制
|
14天前
|
JavaScript 安全 中间件
深入浅出Node.js中间件机制
【10月更文挑战第36天】在探索Node.js的奥秘之旅中,中间件的概念如同魔法一般,它让复杂的请求处理变得优雅而高效。本文将带你领略这一机制的魅力,从概念到实践,一步步揭示如何利用中间件简化和增强你的应用。
|
26天前
|
消息中间件 JavaScript 中间件
深入浅出Node.js中间件机制
【10月更文挑战第24天】在Node.js的世界里,中间件如同厨房中的调料,为后端服务增添风味。本文将带你走进Node.js的中间件机制,从基础概念到实际应用,一探究竟。通过生动的比喻和直观的代码示例,我们将一起解锁中间件的奥秘,让你轻松成为后端料理高手。
27 1
|
1月前
|
JSON JavaScript 中间件
深入浅出Node.js中间件机制
本文将带你探索Node.js中一个核心概念——中间件机制。我们将通过浅显的语言和生动的比喻,揭示中间件如何作为请求和响应之间的“交通枢纽”,在应用程序中起到至关重要的作用。从基础原理到实际应用,你将了解到中间件不仅简化了代码结构,还提高了开发效率,是Node.js开发不可或缺的一部分。
51 1
|
1月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
32 0
|
1月前
|
JavaScript 安全 中间件
深入浅出Node.js中间件机制
【10月更文挑战第4天】在探索Node.js的海洋中,中间件机制犹如一座灯塔,为开发者指引方向。本文将带你一探究竟,从浅入深地理解这一核心概念。我们将通过生动的比喻和实际代码示例,揭示中间件如何在请求和响应之间搭建桥梁,实现功能的扩展与定制。无论你是初学者还是有经验的开发者,这篇文章都将为你提供新的视角和深入的理解。
47 0
|
1月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
21 0
|
2月前
|
缓存 JavaScript 前端开发
常见的 JavaScript 隔离机制
常见的 JavaScript 隔离机制
|
3月前
|
JavaScript 前端开发 算法
js 内存回收机制
【8月更文挑战第23天】js 内存回收机制
39 3