线程



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. 行为型模式 - 访问者模式Visitor

    学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 行为型模式,我之所以把他放到第一个,是因为它号称是GoF中最难的一个. 模式的定义与特点 在访问者模式中(Visitor Pat ...

  2. 如何用Python实现http客户端和服务器

    功能:客户端可以向服务器发送get,post等请求,而服务器端可以接收这些请求,并返回给客户端消息. 客户端: #coding=utf-8import http.clientfrom urllib i ...

  3. 数字游戏（NOIP 2003 PJT2）

    一 原始数据处理 1.输入数据得到a[1]~a[n],复制扩展a[n+1]~a[2*n],以便处理不同点为起点出发. cin>>n>>m; for(int i=1;i<= ...

  4. Vue19 常用指令及自定义指令

    部分转自:https://blog.csdn.net/weixin_58032613/article/details/122759818 1 常用指令 1) v-bind 单向数据绑定 https:/ ...

  5. 数据存储单位、编程语言的发展史、python解释器版本、解释器的下载与安装、多版本共存、第一个python程序、pycharm下载

    目录 一.数据存储单位 (1).简介 (2).换算单位 二.编程语言的发展史 (1).机器语言 (2).汇编语言 (3).高级语言 三.编程语言的分类 (1).编译型语言 (2).解释型语言 四.py ...

  6. 随机森林RF模型超参数的优化：Python实现

      本文介绍基于Python的随机森林(Random Forest,RF)回归代码,以及模型超参数(包括决策树个数与最大深度.最小分离样本数.最小叶子节点样本数.最大分离特征数等)自动优化的代码.   ...

  7. 【Vue】Vue开源样式库 Vuex的使用 vuex的执行流程 Vue-router的使用 路由跳转 路由守卫

    目录 昨日回顾 纯净的Vue项目 今日内容 0 开源样式库 1 Vuex 的使用 1.1 vuex的执行流程图 Vuex的使用 购物车案例 2 Vue-router的使用 2.1 基本使用 2.2 路 ...

  8. 双端队列xLIS问题

    题目大意 有 \(N\) 个数 \(A_i\) ,他准备将他们依次插入一个双端队列(每次可以在头或尾插入一个元素),最后将 整个队列从尾到头看成一个序列,求出最长上升子序列的长度 .他想知道 , \( ...

  9. 病程极短(≤16周)的495例未分化关节炎患者随访2年的结局[EULAR2015_SAT0055]

    病程极短(≤16周)的495例未分化关节炎患者随访2年的结局   SAT0055 TWO-YEAR OUTCOME IN 495 PATIENTS WITH UNDIFFERENTIATED ARTH ...

  10. Postgresql索引浅析

    一.摘要 1.索引是提高数据库性能的常用途径.比起没有索引,使用索引可以让数据库服务器更快找到并获取特定行.但是索引同时也会增加数据库系统的日常管理负担,因此我们应该聪明地使用索引. 2.索引其实就是 ...