线程



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#代码整洁之道笔记07_代码评审和集成测试

    1. 代码评审注意事项 1.1. 始终保持代码评审的意识 1.2. 保证代码构建成功 1.3. 确保所有的测试都是通过的 1.4. 注意YAGNI原则 1.5. 检查重复代码 1.6. 使用静态分析器 ...

  2. Node.js学习笔记----day03

    认真学习,认真记录,每天都要有进步呀!!! 加油叭!!! 一.Node中的模块系统 使用Node编写应用程序主要就是在使用 EcmaScript 和浏览器不一样的是,在Node中没有BOM.DOM 核 ...

  3. Nacos注册中心 (介绍与配置)

    Nacos注册中心 和Euraka一样都是注册中心,但Nacos不需要注册Nacos,因为阿里巴巴已经注册在好了.只需要下载安装后打开即可 Windows安装 开发阶段采用单机安装即可 1.1.下载安 ...

  4. 笔记:C#Quart帮助类 定时器 拿来即用

    using Quartz.Impl; using Quartz.Impl.Triggers; using System; using System.Collections.Generic; using ...

  5. statefulset详解及为何结合headless service部署有状态应用

    1.1 有状态应用管理statefulset StatefulSet(有状态集,缩写为sts)常用于部署有状态的且需要有序启动的应用程序,比如在进行SpringCloud项目容器化时,Eureka的部 ...

  6. activiti03 SSM使用activity

    1.添加依赖 <!--activity依赖--> <dependency> <groupId>org.activiti</groupId> <ar ...

  7. VeryCapture V1.8.9.5 中文版安装使用教程

    VeryCapture简介 VeryCapture中文版是一款实用的屏幕捕捉工具.VeryCapture最新版持将图钉在桌面.这个功能可以方便图片对比,在写论文或者写文章时比较方便.VeryCaptu ...

  8. 《关于我因为flink成为spark源码贡献者这件小事》

    各位读者老爷请放下手上的板砖,我可真没有标题党,且容老弟慢慢道来. spark和flink本身相信我不用做过多的介绍,后端同学不管搞没搞过大数据,应该都多多少少听过. 如果没听过,简单说,spark和 ...

  9. Zookeeper+SpringCloud微服务（入门二）

    1.Zookeeper注册中心 1.服务提供者Provider 新建cloud-provider-zk-payment-8004 pom.xml: <dependencies> <d ...

  10. 郁金香 注入DLL代码 与MFC窗口DLL文件 开源

    10/10号更新 DLL注入器注入DLL卡死 问题 新增打开控制台 将阳光输出到控制台中 注入DLL代码 1 #include <stdio.h> 2 #include<Window ...