25 # eventloop 执行流程

简介: 25 # eventloop 执行流程

浏览器事件环

1、浏览器的进程

进程是计算机调度的基本单位,进程中包含着线程,浏览器是多进程进程,大致有下面几种

  • 每一个页卡都是进程(互不影响)
  • 浏览器也有一个主进程(用户界面)
  • 每一个页卡里都有一个渲染进程(也叫浏览器内核)
  • 网络进程(处理请求)
  • GPU 进程 3d 绘制
  • 第三方插件进程

2、渲染进程

渲染进程里面包含着多个线程

  • GUI 渲染线程(用于渲染页面)
  • js 引擎线程(和页面渲染时互斥)
  • 事件触发线程(独立的线程 EventLoop)
  • 事件 click、setTimeout、ajax 也是一个独立线程

3、宏任务和微任务

  • 宏任务:宿主环境提供的异步方法都是宏任务,比如:setTimeout、script、ui 渲染
  • 微任务:语言标准提供的 promise、muationObserver

js 执行流程图

例子

例子1:document.body.style.background = "seagreen" 的执行时机在 GUI 渲染的前面,所以刷新不会出现闪一下的效果

document.body.style.background = "salmon";
console.log(1);
Promise.resolve().then(() => {
    console.log(2);
    document.body.style.background = "seagreen";
});
console.log(3);

例子2:document.body.style.background = "seagreen" 的执行时机在 GUI 渲染的后面,所以刷新会出现闪一下的效果

document.body.style.background = "salmon";
console.log(1);
Promise.resolve().then(() => {
    setTimeout(() => {
        console.log(2);
        document.body.style.background = "seagreen";
    }, 0);
});
console.log(3);
目录
相关文章
|
前端开发 关系型数据库 MySQL
开源云真机平台-Sonic应用实践
Sonic,一站式开源分布式集群云真机测试平台,致力服务于中小企业的客户端UI测试。 Sonic当前的愿景是能帮助中小型企业解决在客户端自动化或远控方面缺少工具和测试手段的问题。
开源云真机平台-Sonic应用实践
|
9月前
|
敏捷开发 开发框架 小程序
微信纯血鸿蒙版正式发布,295天走完微信14年技术之路!
不管外界如何评价和鞭策,这款产品本身,依然需要研发团队一个键一个键敲出来,从内核,到架构,到内测,到公测,再到一轮一轮的 debug,他们要在不到一年的时间里,走完微信14 年的路。 回顾鹅厂所做过的产品里,也许从未有过一款,被如此放在放大镜下凝视。每一次上架,每一个 bug,乃至于每一个里程碑,几乎都预定当天热搜。
386 6
微信纯血鸿蒙版正式发布,295天走完微信14年技术之路!
|
12月前
|
存储 JavaScript 前端开发
掌握现代Web开发的基石:深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石:深入理解React与Redux
154 0
|
Dart Android开发 iOS开发
flutter 创建项目、运行项目、项目目录
flutter 创建项目、运行项目、项目目录
453 0
|
测试技术
黑盒测试、白盒测试、灰盒测试的区别和各自的目的
黑盒测试、白盒测试和灰盒测试是软件测试中常用的测试方法。它们的区别和各自的目的如下: 1. 黑盒测试(Black Box Testing): - 黑盒测试是一种功能性测试方法,使用者只关注输入和输出,不考虑内部结构和实现细节。 - 黑盒测试的目的是验证软件功能是否按照需求规格说明书的要求来执行。 - 测试人员不需要了解软件的内部逻辑和代码,只需关注输入和输出的正确性。 - 黑盒测试可通过设计测试用例,模拟用户使用软件的场景,以验证系统的正确性。 2. 白盒测试(White Box Testing): - 白盒测试是一种结构性测试方法,测试人员了解软件的内部结构
3856 0
|
SQL 安全 网络安全
数字堡垒之下:网络安全漏洞、加密技术与安全意识的博弈
在数字化时代的浪潮中,网络安全成了守护信息资产的重要关卡。本文将深入探讨网络安全面临的挑战,包括常见的网络漏洞、先进的加密技术以及提升个人和组织的安全意识。通过具体案例分析,揭示网络攻防之间的较量,并提出相应的防范策略。读者将了解到,尽管技术不断进步,但人类因素仍是安全链中的薄弱环节,因此培养良好的安全习惯至关重要。文章旨在唤起公众对网络安全重要性的认识,并鼓励采取积极措施以保护自己的信息安全。
81 1
|
机器学习/深度学习 人工智能 自然语言处理
脑科学与人工神经网络ANN的发展历程
脑科学与人工神经网络ANN的发展历程
490 0
【宜搭】使用远程API手动或者默认设置中英文(顺便吐槽一下需求提了还浪费时间,因为根本不会做)
在钉钉中使用宜搭,如果是自己发布的应用没有切换语言的按钮。必须到宜搭首页进行切换。这对外贸或者其他有英文需求的行业不是很友好。尤其是上下级组织分发的应用,切换一下语言需要跑到上级组织工作台点一下语言切换才能变为英文。 为此提了需求希望宜搭优化一下,但是然并卵。无用。
【宜搭】使用远程API手动或者默认设置中英文(顺便吐槽一下需求提了还浪费时间,因为根本不会做)
|
监控 安全 网络安全
《阿里云云通信短信服务安全白皮书》——安全责任共担—— 一、 阿里云云通信安全责任
《阿里云云通信短信服务安全白皮书》——安全责任共担—— 一、 阿里云云通信安全责任
353 0
|
前端开发
前端学习笔记202306学习笔记第五十一天-发布订阅者模式5
前端学习笔记202306学习笔记第五十一天-发布订阅者模式5
91 0