前端必修-浏览器的事件循环

128 阅读4分钟

大家好,我是青晚舟,这次其实还是主要在记录一下关于浏览器中非常重要的一个知识点事件循环,其实这些本来之前就知道一些,这次专门写一篇文章专门记录并加深一个印象。

1.项目介绍&准备工作

  1. #浏览器的进程模型

    进程:有自己的单独空间,可以进行通信但是需要双方的同意,就像我们每个人都有属于自己的屋子,你在里 面干什么都不会影响到外面的人。

    线程:一个进程至少有一个线程,如果有更多任务主线程就会启动更多的线程来执行代码,所以一个进程中 可以包含多个线程。等同于多件事情多人干。

  2. #渲染主线程是如何工作的

    在w3c中 事件循环又叫 event loop. 谷歌中叫 message loop

    通常渲染主线程循环从消息队列中取任务,如果当前任务中还有别的任务,那么会把这个任务 加到消息队列里面进行排队。假如有其他的进程也被触发,也会被加入到这个消息队列当中等 待被主线程调用,主线程每次到消息队列中拿取任务的时候都会先检查当前消失队列中是否还 有任务,如果没有的话就进行休眠,等待下次任务被加入到消息列表中时唤醒。

  3. #js为什么会阻碍渲染

    其实就是因为所有的工作都是在渲染主线程进行的,那么执行js的时候其他的就会暂停,那么势必就会 造成阻碍。

  4. #任务有优先级吗

    任务没有优先级,秉承着先进先出的原则,但是消息队列里面有 目前chrome中的实现中,最少包含了下面的队列 延迟队列 用于存放定时器等 等级中 交互队列 用于用户点击操作等 等级高 微任务队列 用户存放最高执行顺序的 等级最高

    快速的把一个函数放到微队列里面 Promise.resolve.then(函数)

  5. #面试:阐述一下js的事件循环

    事件循环又叫做消息循环,是浏览器线程主要的渲染方式。 在chrome的源码中,他会开始一个for循环每次循环只需要取出消息队列中的第一位即可,有新加入的消息放到末尾等待被执行,过去把消息队列叫做宏任务和微任务,但是这种说法当前已经无法满足复杂浏览器的环境,取而代之的是一种更加灵活多变的处理方式。 根据W3C的官网解释,每个任务有不同的类型,同类型的任务必须在同一个队列,不同的任务可以处于不同的队列,不同的任务有不同的优先级,在一次事件循环中,由浏览器自行决定取哪个队列的认为有,但浏览器必须要有一个微任务队列,微任务队列具有最高等级必须优先执行

  6. 延迟队列和交互队列

    在W3C中没有精确规定这两个队列要先执行哪一个,所以每个浏览器的厂商所执行的可能不太一样,在这就拿chrome举例,在chrome中他认为用户的交互要比延迟更重要,所以如果当前延迟和交互都有任务,哪怕延迟比交互提前进入自己的队列中的时候也是交互优先运行,因为chrome觉得交互要实时反应给客户。

  7. #js可以精确计时吗 不能 1.计算机硬件中没有原子钟,使用cpu计时做的,无法精确计算 2.操作系统本身就有偏差 3.按照W3C的标准,如果嵌套层数超过5层大概就会有4毫秒的延迟,循环往复就会差距越来越大 4.当计数器结束后不是立刻执行而是放到延迟队列中等待执行,这样下来又会造成一个时间差

👋 写在最后

以上内容纯粹代表自己观点。顺便记录学习一下。不然记得快忘的更快。我们下文再见。