JavaScript-js执行机制

深碍√TFBOYSˉ_ 2023-06-18 15:57 21阅读 0赞

JavaScript 是**单线程语言**，也就是说同一时间只能做一件事；这是 JS 的设计所致：JavaScript 最初是为了处理页面中用户的交互，以及操作 DOM 元素

例如：操作页面上的某个 DOM 元素，现在有2 个线程，proOne 用于执行删除命令、preTwo 用于执行修改命令；如果 JS 是多线程的这两个线程就会同时对同一个 DOM 进行操作，proOne 删除了当前 DOM ，而preTwo 修改了该 DOM ，这两个线程就会产生矛盾。

###### 单线程带来的问题： ######

单线程就意味着，所有任务需要排队执行；前一个任务执行结束，才会执行后一个任务；如果前一个任务耗时很长，后一个任务就不得不一直进行等待

这样就会导致：如果 JS 执行的时间过长，就会造成页面的渲染不连贯，导致页面渲染加载时有阻塞的感觉，用户体验较差。

## 同步任务与异步任务 ##

在 HTML5 中提出了 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制；于是JS 中就出现了**同步任务**和**异步任务**。

#### 同步任务 ####

*  同步任务是在主线程上排队执行的任务，只有前一个任务执行结束，才能执行下一个任务。程序的执行顺序与任务的排列顺序是一致的、同步的。
 *  同步任务都是在主线程上执行，形成一个执行栈。

比如烧水、炒菜做饭：首先要烧水，烧完后去洗菜，洗完后要切菜，切完后再炒菜，炒完后才能吃，这就是同步任务。

#### 异步任务 ####

*  异步任务不进入主线程，而是进入 “任务队列” ，只有 “任务队列” 通知主线程某个异步任务可以执行了，该任务才会进入主线程执行。
 *  异步任务主要是通过**回调函数**来实现的；异步任务相关的回调函数会被添加到**任务队列**中

在做一件事时比较花费时间，在做这件事的同时，可以去处理其他事情，比如做饭的异步做法：烧一壶水需要花费 15 分钟，利用这 15 分钟就可以去洗菜，切菜，炒菜。

异步任务主要有以下三种类型：

1.  普通事件，例如： click，change，resize 等
2.  资源加载事件，例如：load，error 等
3.  定时器，例如：setInterval()，setTimeout()

## 执行机制 ##

先执行执行栈中的同步任务，异步任务会被放入任务队列中进入等待状态；当执行栈中的任务执行完后，会顺次读取任务队列中的异步任务，任务队列中的异步任务会结束等待状态进入执行栈开始执行。

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 执行机制

[彻底弄懂 JavaScript 执行机制][JavaScript] [Eventloop不可怕，可怕的是遇上Promise][Eventloop_Promi...

柔情只为你懂/ 2024年04月18日 18:15/ 0 赞/ 95 阅读

相关 javascript执行机制

在掘金上讲解js执行机制的文章，收获很多。故复制过来，做复习笔记用不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定

Dear 丶/ 2023年07月22日 04:58/ 0 赞/ 32 阅读

相关如何用JavaScriptJ封装拖动验证滑块？本文教你

前言星期六闲着没事，就想着写写原生js玩玩，在网上看了几个效果后决定做这个效果，并且使用了prototype和eventEmitter封装成了库。最终效果

谁践踏了优雅/ 2023年02月16日 14:30/ 0 赞/ 43 阅读

相关 JavaScript 执行机制

前端开发，一篇文章让你彻底搞懂，什么是JavaScript执行机制！：[https://zhuanlan.zhihu.com/p/139261821][https_zhu

今天药忘吃喽~/ 2023年01月07日 13:24/ 0 赞/ 166 阅读

相关 JavaScript执行机制之执行顺序

JavaScript是一种描述型的脚本语言，不同于C\或者java，它不需要进行编译成中间语言，而是由浏览器动态的解析和执行。今天我们就来说一个JavaScrip

╰半橙微兮°/ 2022年09月25日 10:19/ 0 赞/ 222 阅读

相关 javascript-了解执行机制

1.了解javascript的执行机制 JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序一、浏览器的内核

傷城~/ 2022年06月12日 12:10/ 0 赞/ 226 阅读

相关 js执行机制

js执行机制参考资料： [深入理解JavaScript运行机制][JavaScript] [10分钟理解JS引擎的执行机制][10_JS] [Jav

Dear 丶/ 2022年05月29日 01:14/ 0 赞/ 219 阅读

相关 javascript执行机制

[javascript执行机制][javascript] 转自：[ssssyoki][] [这一次，彻底弄懂 JavaScript 执行机制][ssssyoki]

川长思鸟来/ 2022年05月27日 01:27/ 0 赞/ 247 阅读

相关 JavaScript 执行机制

不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascrip

迷南。/ 2022年04月24日 12:26/ 0 赞/ 268 阅读

相关 JavaScript执行机制

JavaScript执行机制 javascript是按照语句出现的顺序执行的 1.关于javascript javascript是一门单线程语言，在最新的HTML5中提出...

红太狼/ 2020年06月22日 14:32/ 0 赞/ 703 阅读