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

相关文章
|
4月前
|
前端开发 JavaScript UED
深入理解JavaScript中的事件循环机制
JavaScript中的事件循环机制是其异步编程的核心,深入理解该机制对于开发高效、流畅的前端应用至关重要。本文将介绍事件循环的工作原理、常见的事件循环模型,以及如何利用这些知识解决前端开发中的常见问题。
|
27天前
|
JavaScript 前端开发 算法
js 内存回收机制
【8月更文挑战第23天】js 内存回收机制
30 3
|
27天前
|
存储 JavaScript 前端开发
学习JavaScript 内存机制
【8月更文挑战第23天】学习JavaScript 内存机制
22 3
|
19天前
|
JavaScript 中间件 开发者
深入浅出Node.js中间件机制
【8月更文挑战第31天】本文将带你领略Node.js中间件的奥秘,通过直观的案例分析,揭示其背后的设计哲学。你将学会如何运用中间件构建强大而灵活的后端应用,以及在面对复杂业务逻辑时如何保持代码的清晰与高效。
|
19天前
|
设计模式 JavaScript 中间件
深入浅出Node.js中间件机制
【8月更文挑战第31天】在Node.js的世界里,中间件如同魔法般存在,它让复杂的请求处理变得井然有序。本文将带你领略中间件的奥秘,从原理到实战,一步步揭开它的神秘面纱。你将学会如何运用中间件来构建强大而灵活的后端应用,就像拼乐高一样有趣。
|
3月前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
76 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
2月前
|
JavaScript 前端开发 API
js 运行机制(含异步机制、同步任务、异步任务、宏任务、微任务、Event Loop)
js 运行机制(含异步机制、同步任务、异步任务、宏任务、微任务、Event Loop)
29 0
|
4月前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
156 1
|
3月前
|
JavaScript 前端开发
深入解析JavaScript中的面向对象编程,包括对象的基本概念、创建对象的方法、继承机制以及面向对象编程的优势
【6月更文挑战第12天】本文探讨JavaScript中的面向对象编程,解释了对象的基本概念,如属性和方法,以及基于原型的结构。介绍了创建对象的四种方法:字面量、构造函数、Object.create()和ES6的class关键字。还阐述了继承机制,包括原型链和ES6的class继承,并强调了面向对象编程的代码复用和模块化优势。
41 0