试述电子商务网站的建设流程,贵阳建站模板搭建,网址地址,建立多个wordpress“事件循环机制” 和 “宏任务微任务” 也是前端面试中常考的面试题了。首先#xff0c;要深刻理解这些概念的话#xff0c;需要回顾一些知识点。知识点回顾1、进程与线程进程。 程序运行需要有它自己的专属内存空间#xff0c;可以把这块内存空间简单的理解为进程每个应用至…“事件循环机制” 和 “宏任务微任务” 也是前端面试中常考的面试题了。首先要深刻理解这些概念的话需要回顾一些知识点。知识点回顾1、进程与线程进程。 程序运行需要有它自己的专属内存空间可以把这块内存空间简单的理解为进程每个应用至少有一个进程进程之间相互独立即使要通信也需要双方同意。线程。线程是CPU的基本调度单位是程序执行的一个完整流程。一个进程至少有一个线程所以在进程开启后会自动创建一个线程来运行代码该线程称之为 主线程。如果程序需要同时执行多块代码主线程就会开启更多的线程来执行代码所以一个进程中可以包含多个线程。简单总结一些它们的关系一个进程中一般至少有一个运行的线程——主线程一个进程中也可以同时运行多个线程多个进程之间的数据是不能同时直接共享的那浏览器有哪些进程与线程呢浏览器内部的工作其实极为复杂它是多进程多线程的。且为了避免相互影响它会自动启动多个进程。比如我们可以在浏览器任务管理器查看一下所有进程。其中最主要的进程有浏览器进程主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。网络进程负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务渲染进程渲染进程启动后会开启一个 渲染主线程主线程负责执行 HTML、CSS、JS代码默认情况下浏览器会为每一个标签页开启一个新的渲染进程以保证不同的标签页之间不互相影响。2、JS是单线程还是多线程JS肯定是单线程的。如果是多线程会发生什么 如果JS是多线程那当两个线程同时对dom进行操作一个是添加事件一个是删除dom要怎么处理 所以为了避免这种情况JS选择只用一个主线程来执行代码以保证一致性。3、怎么去理解JS的异步上面写到JS是单线程的它运行在浏览器的渲染主线程中且渲染主线程有且仅有一个。 但是它却有很多任务比如渲染页面、执行JS都包含在内。那如果不使用异步而是同步的方式就极有可能造成主线程的阻塞那其他任务就无法执行了一方面消耗时间另一方面页面又没法及时更新很容易有卡死现象。所以浏览器采用异步方式。 具体做法其实就是 比如一些任务发生了假设现在遇到了计时器主线程会将任务交给其他线程处理自己立马结束这个任务转而执行后续代码。 而等其他线程完成后将事先传递的回调函数包装成任务再加入到消息队列的末尾排队等待主线程的调度执行。在这种异步模式下浏览器就可以避免阻塞。这一段解释涉及到操作系统的进程调度问题和我们所要理解的事件循环机制。暂时看不懂的可以先往下看。4、进程调度进程调度的知识点稍多比如抢占式调度非抢占式调度先来先服务优先级调度等等。我们这里就简单介绍一下先来先服务(FCFS)。它的算法思想其实就是从“公平”的角度来考虑的 我们可以理解成 排队买东西先来排队的优先买。所以它的算法规则其实是按照 作业/进程 到达的先后顺序进行服务。 它是一种非抢占式算法 可以理解成 “不允许你插队”它不会导致 “饥饿”现象也就是一直轮不到执行苦苦等待因为只要排队终有一天会轮到它的。事件循环机制介绍完一些知识点后再理解一下主角“事件循环机制”我们在前面说了浏览器会通过渲染主线程去执行JS在最开始的时候渲染主线程会进入一个无限的循环中每一次的循环都会检查一下消息队列中是否存在任务。 如果存在任务就取出第一个任务执行执行完一个后进入下一次循环 如果没有就进入等待态休眠其他所有线程包括其他进程的线程可以随时向消息队列添加任务如果主线程是等待态会将其唤醒以继续循环拿取任务执行。这种过程也就被称为 事件循环(消息循环)在上面的过程中我们先简单的将消息队列理解成一个队列虽然有具体划分。 而队列的特性是先进先出比如我们按顺序执行代码分别遇到了 加法任务、输出任务、乘法任务。 那他们依次入队渲染主线程循环获取任务也是按照这个顺序去执行的宏任务和微任务在上面为了便于简单的理解说是当成一个队列其实不是的。 JS中用来存储代执行回调函数的队列可以分为2种不同的队列那就是 宏队列 和 微队列。 顾名思义就是分别用来保存待执行的宏任务和微任务(回调)。常见的宏任务包括setTimeoutsetIntervalscript(整体代码)I/O操作等等微任务包括PromiseMutation等等既然会划分成2个队列那肯定是要在JS执行时区别对待它们的。 JS引擎首先必须先执行所有的初始化同步任务 在每次准备取出第一个宏任务执行前都要看看有没有微任务要一个个取出来执行。 当该宏任务执行完毕后会检查其中的微任务队列如果没有那就直接执行下一个宏任务如果不为空那就依次执行微任务执行完毕再执行下一个宏任务。所以引入微任务的初衷是为了解决异步回调的问题。其实我们可以理解为 微任务的优先级比较高根据优先级调度算法调度时会选优先级最高的进行调度执行即然说到优先级就必须要提一下。任务本身是没有优先级的都是遵循先来先服务算法。 但是 消息队列是有优先级的。 也就是上面我们所说的 微队列比宏队列优先级高。所以每执行一次宏任务都要看看有没有微任务的存在。但随着浏览器复杂的提升W3C似乎不再采用宏队列的说法。 而是至少分为了 延时队列、交互队列、微队列。 它们优先级是从低到高的微队列优先级最高。具体内容可能还需要看一下官方解释。如果我们想把一个函数添加到微队列可以这么写Promise.resolve().then(函数)基本的介绍就结束了应该差不多可以理解这些概念了。接下来可以看一道简单的题h1Eric is handsome/h1
buttonchange/buttonscriptvar h1 document.querySelector(h1);var btn document.querySelector(button);// 死循环指定时间function delay(duration){var start Date.now();while(Date.now() - start duration) {}}btn.onclick function() {h1.textContent Eric真帅;delay(3000);}
/script对于以上代码当我们点击按钮后会发生什么呢实际上点击完按钮后需要经过3秒h1的文本才会发生变化。因为对于渲染主线程而言运行解析JS代码以后会用交互线程去监听按钮的点击事件。 假设我们在某一个时刻点击了它此时消息队列中没有其他任务那交互线程会将这个function作为一个任务假设记为fn添加至消息队列中。 渲染主线程会被唤醒从而调用fn任务。 所以可以执行function里面的代码了。 首先是h1.textContent “Eric真帅”fn任务会产生一个绘制任务也就是改变h1文本那这个绘制任务就会到消息队列中进行排队此时fn任务继续执行到下一行 delay(3000)也就是被阻塞了3秒。3秒后fn执行完毕进行循环这时候获取了消息队列中的绘制任务调度执行文本发生改变。如果有帮助的话可以点赞收藏哦
