事件循环原理-学习笔记

前置知识:
        


    1·程序运行需要有自己的内存空间,可以把这块内存卡空间简单的理解为进程。
    2·每个应用至少有一个进程,进程之间互相独立,即使要通信,也要双方同意。
        Ⅰ·一个进程至少有一个线程,所以在进程开启后会自动创建一个线程来运行代码,该线程称之为主线程。
        Ⅱ·如果程序需要同时执行多块代码,主线程就会启动更多线程来执行代码,所以一个进程中可以包含多个线程。

            浏览器内部工作极其复杂:浏览器是一个多进程多线程的应用程序。
            为了避免互相影响,减少连环崩溃的几率,当启动浏览器后,它会自动启动多个进程。
            浏览器中主要进程有:浏览器进程、网络进程、渲染进程等

                渲染进程启动后,会开启一个渲染主线程,主线程负责执行:HTML,CSS,JS代码
                默认情况下,浏览器会为每一个标签页开启一个新的渲染进程,以保证不同的标签页之间不互相影响。

渲染主线程如何工作:


        渲染主线程是浏览器中最繁忙的线程,需要他处理的任务包括但不限于:
            解析:HTML
            解析:CSS
            计算样式
            布局
            处理图层
            60帧
            执行全局JS代码
            执行事件处理函数
            执行计时器的回调函数

        要处理这么多任务,主线程遇到了一个前所未有的难题:如何调度任务?

            比如:
                问题1: 我正在执行一个JS函数,执行一半用户点击了另一个按钮,我该怎么办?
                问题2:我正在执行一个JS函数,执行到一半某个计时器到达时间了,我该立刻执行计时器回调吗?

        此时渲染主线程想到了一个绝妙的处理方法:排队
            正在执行的渲染主线程 当作一个任务 进入消息队列 
            其他线程的操作 当作一个任务 放入消息队列


            渲染主线程 ⬇
                  任务➡
                    ⬇
                     消息队列 === 》 【任务,任务,任务】===》 按顺序执行每一个任务

                    ⬆
                  任务➡
            其他线程    ⬆

            问题1答案:用户点击另一个按钮以后,将这个按钮的任务放到消息队列中
            问题2答案:定时器到期以后,将定时器的回调放到消息队列中(此时引出一个问题,js定时器是不精确的)
            
                Ⅰ·  渲染主线程在最开始的时候会进入一个无限循环
                Ⅱ·  每一次循环会检查消息队列中有没有任务,如果有,就取出第一个任务执行,执行完一个后进入下一次循环,如果没有,就进入休眠状态。
                Ⅲ·  其他所有线程(包括其他进程的线程),可以随时向消息队列中添加任务,新任务会加到消息队列的末尾,在添加新任务时,如果主线程是休眠状态,则会将其唤醒以继续循环拿去任务。


            这样一来,就可以让每个任务有条不紊、持续的经行下去了,整个过程被称为事件循环

何为异步?
            计时器:setTimeout(fn,3000)
            网络通信:XHR,Fetch
            用户操作后的需要执行的任务:addEventListener

        如果让渲染主线程等待这些任务的到达时机,就会导致主线程长时间处于 阻塞 状态,从而导致浏览器【卡死】
        但是渲染主线程承担着极其重要的工作,无论如何都不能让他阻塞!
        使用异步的方式:渲染主线程用不阻塞。

        如何理解JS的异步:
            面试题:如何理解 JS的异步?
                参考答案:
                    JS是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中。
                    而渲染主线程只有一个。而渲染主线程承担着诸多的工作,渲染页面、执行 JS 都在其中运行。
                    如果使用同步的方式,就极有可能导致主线程产生阻塞,从而导致消息队列中的很多其他任务无法得到执行。
                    这样一来,一方面会导致繁忙的主线程白白的消耗时间,另一方面导致页面无法及时更新,给用户造成卡死现象。
                    所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时,比如计时器、网络、事件监听,主线程将任务交给其他线程去处理,自身立即结束任务的执行,转而执行后续代码。当其他线程完成时,将事先传递的回调函数包装成任务,加入到消息队列的未尾排队,等待主线程调度执行。
                    在这种异步模式下,浏览器可以实现永不阻塞,从而最大限度的保证了单线程的流畅运行。
 

任务有优先级吗?


            任务没有优先级,只能排队,任务只能排到末尾
            但是!消息队列是有优先级的。

            随着浏览器的复杂度急剧提升,W3C不在使用宏队列说法。

                每一个任务都有一个任务类型,同一个类型的任务必须在同一个队列,不同类型的任务可以分属于不同的队列。在一次事件循环中,浏览器可以根据实际情况从不同的队列中取出任务并执行。
                浏览器必须准备好一个微队列,微队列中的任务优先所有其他任务执行。


                目前在chrom的队列中,至少包含了:延时队列,交互队列,微队列。
                    权重等级: 微队列(用户存放需要最快执行的任务) ===》 交互队列(用户操作任务) ===》 延时队列(计时器的回调)
                当然浏览器还包含很多队列,但对开发影响不大,不做举例。

                添加任务到微队列的主要方式是使用Promise、MutationObserver
                Promise.resolve().then(fn) 这里的fn将会直接进入微队列

总结:

        事件循环会在执行完一个任务后从消息队列中取出下一个要执行的任务(队列中的函数将会被包装为任务),但是消息队列是有优先级的,优先级顺序如下:微队列 > 交互队列 > 延时队列

        假设现在微队列待执行1, 交互队列待执行1, 延时队列待执行1的情况下

         执行顺序为:全局函数 ===》 微队列取出任务执行 ===》 交互队列取出任务执行 ===》 延时队列取出任务执行

                当事件事件循环执行微队列函数时,假设微队列函数中嵌套了另一个微队列函数,那么这个函数继续被包装为一个微队列任务放入微队列中,所以此时执行顺序为:

                 执行顺序为:全局函数 ===》 微队列取出任务执行 ===》 微队列取出任务执行 ===》 交互队列取出任务执行 ===》 延时队列取出任务执行

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值