线程



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. C++迭代器种类与编译期间多态

    迭代器分类 C++ STL 中根据移动能力将迭代器分成了 5 类: Input Iterator 输入迭代器,只支持 operator++ 操作. Output Iterator 输出迭代器,只支持 ...

  2. 面试必问：说一下 Java 虚拟机的内存布局？

    我们通常所说的 Java 虚拟机(JVM)的内存布局,一般是指 Java 虚拟机的运行时数据区(Runtime Data Area),也就是当字节码被类加载器加载之后的执行区域划分.当然它通常是 JV ...

  3. socket模块实现网络编程及struct模块解决黏包问题

    目录 一.socket模块 1.简介 2.基于文件类型的套接字家族 3.基于网络类型的套接字家族 二.socket代码简介 三.socket代码优化 1.聊天内容自定义 2.让聊天循环起来 3.用户输 ...

  4. 1888: 生成括号（等级考试3级 2021-09 T5）

    题目: 程序: #include<bits/stdc++.h> using namespace std; int n; string s1; void dfs(int l,int r) { ...

  5. JAVA虚拟机06-垃圾回收及引用类型

    Java和C++之间有一堵由内存自动分配和垃圾收集技术围成的高墙 1.了解垃圾收集.内存自动分配的意义 2.JAVA虚拟机各个区域的垃圾回收简介 3.判断对象是否存活 3.1引用计数算法 3.2可达性 ...

  6. JSON Crack 数据可视化工具

    JSON Crack简介 JSON Crack 是一个很方便的 JSON 数据可视化工具. 该项目不是简单的展示 JSON 数据,而是将其转化为类似思维导图的形式,支持放大/缩小.展开/收缩.搜索节点 ...

  7. Three.js 进阶之旅：物理效果-碰撞和声音 💥

    摘要 本文内容主要汇总如何在 Three.js 创建的 3D 世界中添加物理效果,使其更加真实.所谓物理效果指的是对象会有重力,它们可以相互碰撞,施加力之后可以移动,而且通过铰链和滑块还可以在移动过程 ...

  8. 使用 DirectSound 录制麦克风音频

    使用 DirectSound 录制麦克风音频 本文所有代码均可在以下仓库找到 https://gitcode.net/PeaZomboss/learnaudios 目录是demo/dscapture ...

  9. Cesium鼠标移动到模型上，给模型添加高亮轮廓(四)

    2023-01-09 Cesium虽然也支持两种方式(Entity和Primitive)加载3D Tiles数据, 但因为多数情况下3D Tiles数据都是成片区的数据,数据量比较大,所以为了保证性能 ...

  10. LG P2839 [国家集训队]middle

    \(\text{Solution}\) 不考虑起点区间和终点区间的限制,求区间中位数 可以二分中位数,大于等于中位数的位置赋为 \(1\),小于的位置赋 \(-1\) 当区间和大于等于 \(0\) 时 ...