线程



1.GUI渲染线程(一个)

2.JS引擎线程(一个)

3.事件触发线程

4.定时器触发线程(多个)

5.异步http请求线程（多个）

线程执行

页面加载时

GUI渲染引擎和JS执行引擎互斥，当GUI渲染引擎解析html处理到script标签，会立即挂起解析html的任务，然后开始解析js代码，这里就是执行一个宏任务。直到所有这个宏任务执行完成后，继续执行html解析渲染

JS是单线程指的是执行引擎是单线程

宏任务微任务

宏任务是由宿主发起的，而微任务由JavaScript自身发起。

Event loop

JS是基于事件驱动的，其需要一种事件循环机制和来进行线程的配合

js执行引擎（主线程）在空闲时判断是否有未执行的微任务，有则一个个将微任务中的回调函数放到主线程中执行，直到微任务队列清空；微队列清空后判断宏任务队列

https://zhuanlan.zhihu.com/p/165950721?utm_source=wechat_session&utm_medium=social&utm_oi=930814167984668672&utm_campaign=shareopn

浏览器渲染与event loop的更多相关文章

  1. 浏览器中的 Event Loop

    当我们执行 JS 代码的时候其实就是往执行栈中放入函数,那么遇到异步代码的时候该怎么办?其实当遇到异步的代码时,会被挂起并在需要执行的时候加入到 Task(有多种 Task) 队列中.一旦执行栈为空, ...

  2. js 在浏览器中的event loop事件队列

    目录 前言 认识一个栈两个队列 执行过程 异步任务怎么分配 简单例子 难一点的例子 前言 以下内容是js在浏览器中的事件队列执行,与在nodejs中有所区别,请注意. 都说js是单线程的,不过它本身其 ...

  3. 浏览器与Node的事件循环(Event Loop)有何区别?

    前言 本文我们将会介绍 JS 实现异步的原理,并且了解了在浏览器和 Node 中 Event Loop 其实是不相同的. 一.线程与进程 1. 概念 我们经常说 JS 是单线程执行的,指的是一个进程里 ...

  4. [转]Event loop——浏览器和Node区别

    最近对Event loop比较感兴趣,所以了解了一下.但是发现整个Event loop尽管有很多篇文章,但是没有一篇可以看完就对它所有内容都了解的文章.大部分的文章都只阐述了浏览器或者Node二者之一 ...

  5. Event Loop详解

    1.进程,单线程与多线 进程: 运行的程序就是一个进程,比如你正在运行的浏览器,它会有一个进程. 线程: 程序中独立运行的代码段. 一个进程由单个或多个线程组成,线程是负责执行代码的. 2.单线程与多 ...

  6. js的事件循环（Event Loop）

    (本文从掘金小册整理) 首先介绍一下几个概念 进程与线程 相信大家经常会听到 JS 是单线程执行的,但是你是否疑惑过什么是线程? 讲到线程,那么肯定也得说一下进程.本质上来说,两个名词都是 CPU 工 ...

  7. HTML Standard系列：Event loop、requestIdleCallback 和 requestAnimationFrame

    HTML Standard系列:Event loop.requestIdleCallback 和 requestAnimationFrame - 掘金 https://juejin.im/post/5 ...

  8. JS的Event Loop

    JavaScript是单线程的,只有一个执行栈,一次只能做一件事. 在浏览器中,却“好像”可以同时做几件事:点击,发送请求,执行多个函数,解析代码. 这是因为浏览器实现的Event Loop机制. W ...

  9. 从event loop规范探究javaScript异步及浏览器更新渲染时机

    异步的思考 event loops隐藏得比较深,很多人对它很陌生.但提起异步,相信每个人都知道.异步背后的“靠山”就是event loops.这里的异步准确的说应该叫浏览器的event loops或者 ...

  10. 浏览器组成、线程及event loop

    浏览器组成 User interface: a. Every part of the browser display, except the window. b. The address bar, b ...

随机推荐

  1. java入门与进阶-P1.3+P1.4

    准备一个java编程软件 eclipse官网: Enabling Open Innovation & Collaboration | The Eclipse Foundation 他是一个免费 ...

  2. Unity - 自定义Log

    嗨,崽崽们大家好.实在是不知道写个啥了,最近总是恍惚,今儿偷个懒吧,给大家推荐一个小黑自己写的小型日志工具,在一些小项目中管够使用了. 那有人会问了,Unity不是自带日志么,为什么还要自己做个小工具 ...

  3. MRS_外部库相关问题汇总

    解决问题如下: CH32V307使用IQMath库时 使用MRS时,当使用到math数学库 CH32V307使用IQMath库时 CH32V307是支持硬件浮点的,可以是math.h中的sinf.IQ ...

  4. OpenStack命令行参考

    OpenStack命令行参考 hello,大家好,这里是费冰.在使用OpenStack的过程中,固然我们可以通过 web 页面完成绝大多数的操作,但作为管理人员,不能不知晓 OpenStack 命令行 ...

  5. IoT 边缘集群基于 Kubernetes Events 的告警通知实现（二）：进一步配置

    上一篇文章 IoT 边缘集群基于 Kubernetes Events 的告警通知实现 目标 告警恢复通知 - 经过评估无法实现 原因: 告警和恢复是单独完全不相关的事件, 告警是 Warning 级别 ...

  6. osx安装mpd和ncmpcpp

    简介 mdp 是一款开源的音乐播放软件, 全名为 media player daemon , 从字面意思理解, 就是一个后台播放进程. 不同于传统的音乐播放软件集成了播放解码和界面, mpd 只是一个 ...

  7. Xlight安装与使用

    Xlight安装与使用 一.Xlight安装 下载Xlight安装包,点击安装,默认就可以,下一步 点击左上角增加虚拟服务器,IP地址为本机服务器IP地址 右键点击新添加的虚拟服务器,点击虚拟服务器操 ...

  8. chatGPT帮助开发实战解答问题和反思

    问题来自.Net开发群友 问题 我想做一个自动生成单据号的功能,但是在EFCORE里没有行级锁,请有什么等价方案吗? ChatGPT回答 在 EF Core 中确实没有提供行级锁(row-level ...

  9. 前后端分离项目创建项目详细过程项、目需求分析、pip换源、创建虚环境、后端目录调整以及解决问题

    引言,本项目是前后端分离的,前端用Vue2 后端用Django,后台管理部分是通过simpleUI完成的项目,项目名称为路飞,是商城类(知识付费项目).本篇文章主要讨论一个前后端分离的项目第一步怎么做 ...

  10. CSS less转CSS

    less 转css代码格式cmd命令: lessc D:\workspace\ipad\index.less D:\workspace\ipad\index.css