一、浏览器进程 

早期的浏览器是单进程的,所有功能杂糅在一个进程中;现在的浏览器是多进程的,包含浏览器进程、网络进程、渲染进程等等,每个进程负责的工作不同。

  • 浏览器进程:负责界面显示(地址栏、书签、历史记录)、窗口管理、标签页的创建和销毁、用户交互。
  • 网络进程:负责加载网络资源,HTTP请求等。
  • 渲染进程:负责执行HMTL、CSS、JS代码。每一个页面都会有一个或多个独立的渲染进程。

#浏览器对象模型(Browser Object Module, BOM)交互主要依赖浏览器进程。文档对象模型(Document Object Module ,DOM)主要依赖渲染进程。

还有一些其他的辅助进程,如GPU进程等。

在浏览器"自定义及控制"➡️"更多工具"➡️"任务管理器"查看浏览器进程情况:

二、渲染进程的渲染主线程和消息队列

渲染主线程

前端工程师编写的HTML格式文件代码由渲染进程负责解析最终绘制在页面上。

在这个过程中,渲染主线程是最繁忙的线程,其需要处理任务包括:

  • 解析HTML
  • 解析CSS
  • 计算样式
  • 布局
  • 处理图层
  • 每秒渲染页面60次(60帧)
  • 执行全局JS代码
  • 执行封装成任务的事件处理和计时器回调函数等

渲染主线程的任务多、任务频繁,其依赖消息队列(message queue,或事件队列)机制,先进先出原则调度任务。

任务源来自:1️⃣渲染主线程正在执行的任务产生的新任务,如JS代码运行产生的各种 2️⃣其他线程向消息队列递交的新任务,如网络请求、用户交互等。

消息队列的演变:宏/微任务队列➡️多任务队列

本章节关于事件循环中队列和队列优先级的内容。

浏览器的任务没有优先级,但消息队列有优先级。

传统将消息队列简单分为宏任务队列和微任务队列。

但浏览器逐渐复杂,在最新W3C标准下,浏览器不再有宏队列的说法,每个任务都有一个任务类型,在一次事件循环中,由浏览器自行决定哪一个队列的任务(浏览器真实的使用环境是复杂多变的)。但浏览器必须包含一个微队列,微队列的任务一定具有最高优先级,必须优先调度。

在目前Chrome的实现中,与前端开发最相关的队列,至少包含了以下几个:

  • 延时队列:用于存放计时器到时后的回调函数「中」。(setTimeOut、setInternel)
  • 交互队列:用于存放用户操作后产生的时间处理函数「高」。(addEventListener)
  • 微队列:用于存放需要最快执行的任务,优先级「最高」。(Promise.then)

面经总结

Q:为什么JavaScript是异步的?

A:从渲染主线程、同步的劣势和异步操作过程等角度回答。

  1. JS的运行环境JS是单线程的语言,这是因为它运行在浏览器渲染进程中的渲染主线程,渲染主线程只有一个。渲染主线程是浏览器线程里最繁忙的一个,承担了许多工作,解析HTML、解析CSS、计算样式、布局、处理图层、每秒渲染页面60次(60帧)、执行全局JS代码、封装成任务的事件处理和计时器回调函数(选几个回答)等都在其中执行。
  2. 如果使用同步的方式,极有可能会造成渲染主线程的阻塞,从而导致消息队列中的很多其他任务无法执行。这样一方面会导致主线程阻塞等待白白消耗时间,另一方面导致页面无法及时更新,给用户造成页面卡死现象。
  3. 所以浏览器采用异步的方式,具体做法是当某些任务发生时,比如计时器、网络请求、事件监听,主线程将任务分发交给其他线程去处理,自身立即结束该任务的执行,转而执行后续代码,当被转发任务的线程完成时,将事先传递的回调函数包装成任务加入到消息队列的末尾排队,等待主线程调度执行。在这种异步的模式下,浏览器用不阻塞,从而最大限度保证了单线程的流程运行。

Q:如何理解JavaScript中的事件循环?

A:事件循环也叫消息循环,是渲染主线程的工作方式。它帮助渲染主线程从不同优先级的队列中循环调度任务执行。传统将消息队列简单分为宏任务队列和微任务队列。但浏览器逐渐复杂,在最新W3C标准下,浏览器不再有宏队列的说法,每个任务都有一个任务类型,在一次事件循环中,由浏览器自行决定哪一个队列的任务(浏览器真实的使用环境是复杂多变的)。但浏览器必须包含一个微队列,微队列的任务一定具有最高优先级,必须优先调度。

练习题,阅读代码,写出控制台输出字母顺序:

1.

2. 

3. 

    答案:

    第一题:2 1

    第二题:3 2 1

    第三题:5 4 3 1 2

    本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
    如若转载,请注明出处:http://www.pswp.cn/news/913748.shtml
    繁体地址,请注明出处:http://hk.pswp.cn/news/913748.shtml
    英文地址,请注明出处:http://en.pswp.cn/news/913748.shtml

    如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

    相关文章

    Linux网络:UDP socket创建流程与简单通信

    本文介绍 UDP 服务端与客户端 的创建流程&#xff0c;和相关的函数接口 核心流程 创建 socket → socket()填写服务器地址信息 → sockaddr_in 结构体绑定地址和端口 → bind()接收并响应客户端数据 → recvfrom() / sendto()socket() #include<sys/so…

    windows内核研究(系统调用 1)

    WindowsAPI函数的调用过程什么是WindowsApi&#xff1f;Windows API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;是微软为Windows操作系统提供的一套系统级编程接口&#xff0c;允许开发者与操作系统内核、硬件、系统服务等进行交互…

    【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)

    一、背景场景 在某类生成任务中&#xff0c;例如用户点击“执行任务”按钮后触发一个较耗时的后端操作&#xff08;如生成报告、渲染图像、转码视频等&#xff09;&#xff0c;由于其调用了模型、渲染服务或需要较长处理时间&#xff0c;为了防止接口被频繁恶意调用&#xff0c…

    Vim 编辑器常用操作详解(新手快速上手指南)

    &#x1f4bb; Vim 编辑器常用操作详解&#xff08;新手快速上手指南&#xff09;作者&#xff1a;Lixin 日期&#xff1a;2025-07-09 学习内容&#xff1a;Vim 编辑器基础 常用快捷键 Xshell/Xftp连接 Linux基本操作 学习目标&#xff1a;掌握 Vim 的三种常用模式切换与基本…

    OpenGL 生成深度图与点云

    文章目录 一、简介二、实现代码三、实现效果一、简介 这里基于OpenGL实现对一个Mesh对象深度图的获取,思路其实很简单,直接通过glReadPixels函数获取整个OpenGL中的深度缓冲数据即可;那么反过来我们如果有了这个深度图之后,也可以基于每个像素点的深度值,反算出图像中的深…

    25春云曦期末考复现

    Web 疯狂星期四 <?php$tg1u$_GET[tg1u];if(!preg_match("/0|1|[3-9]|\~|\|\|\#|\\$|\%|\^|\&|\*|\&#xff08;|\&#xff09;|\-|\|\|\{|\[|\]|\}|\:|\|\"|\,|\<|\.|\>|\/|\?|\\\\|localeconv|pos|current|print|var|dump|getallheaders|get|define…

    从Prompt到预训练:掌握大模型核心技术的阶梯式进化

    本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 在探讨大模型&#xff08;LLM&#xff09;的四阶段技术时&#xff0c;我们可以从Prompt Engineering&#xff08;提示工程&#xff09;、AI Agent&…

    手机文件夹隐藏工具,一键保护隐私

    软件介绍 今天为大家推荐一款手机文件夹隐藏工具——Amarok&#xff0c;它能帮助用户快速隐藏手机中的私密文件夹&#xff0c;保护个人隐私。 核心功能 Amarok主打文件夹隐藏功能&#xff0c;操作简单便捷。需要注意的是&#xff0c;虽然软件支持应用隐藏功能&#xff0…

    day10-Redis面试篇

    经过前几天的学习&#xff0c;大家已经掌握了微服务相关技术的实际应用&#xff0c;能够应对企业开发的要求了。不过大家都知道在IT领域往往都是面试造火箭&#xff0c;实际工作拧螺丝。为了更好的应对面试&#xff0c;让大家能拿到更高的offer&#xff0c;我们接下来就讲讲“造…

    Axure版本Element组件库-免费版

    Axure版本的Element组件库基于Element UI/Plus设计规范开发&#xff0c;涵盖了从基础元素到复杂交互的全品类组件&#xff0c;能高效支撑各类Web原型设计&#xff0c;尤其适合后台管理系统、企业级应用等场景。以下从核心类别展开详细介绍&#xff1a; 链接地址 添加图片注释&a…

    记一次JVM问题排查

    今天遇到了1次OOM&#xff0c;导入万条数据的Excel于是让运维进行排查。正式环境显示内存还有很多 于是我说让运维加上参数 -XX:HeapDumpOnOutOfMemoryError&#xff0c;出现OOM的时候dump到文件中&#xff0c;将堆内存设置为4G&#xff0c;在Idea上进行测试于是让运维在生产环…

    快手Kwai Keye-VL多模态大模型模型架构、训练策略、数据情况

    快速看一下Kwai Keye-VL的技术报告&#xff0c; 模型架构 Keye-VL和经典的MLLM架构类似&#xff0c;由ViTMLPLLM组成。视觉侧有两点可以看看&#xff1a; 1、具有原生分辨率的视觉编码器 提到&#xff0c;MLLMs使用预训练的固定分辨率ViT作为视觉编码器。然而&#xff0c;这…

    前端-CSS-day2

    目录 1、后代选择器 2、子代选择器 3、并集选择器 4、交集选择器 5、伪类选择器 6、超链接伪类 7、CSS特性-继承性 8、CSS特性-层叠性 9、CSS特性-优先级 10、优先级-叠加计算 11、Emmet写法 12、背景图 13、背景图平铺方式 14、背景图位置 15、背景图缩放 16、…

    米思齐2.0 3.0 mixly arduino 编程软件下载安装及详情使用指南 导入库文件方法 支持8266 esp32

    一、米思齐软件下载及安装 1、 米思齐软件下载 https://item.taobao.com/item.htm?id883253312209 2、软件版本简单说明&#xff1a; a、 Windows版本&#xff08;建议win10及以上系统使用&#xff09;&#xff1a; 一键更新完整版 2.8GB-3GB&#xff1a;下载后解压即可使…

    结构体指针:使用结构体指针访问和修改结构体成员。

    知识点结构体指针Employee *p; 保存结构体的地址&#xff1b;p->member 用箭头运算符访问或修改成员。数组与指针Employee *emps malloc(N * sizeof *emps); 动态创建结构体数组&#xff1b;p < emps N 与 p 配合遍历。scanf 与数组退化p->name 是 char name[50] 的…

    支持零样本和少样本的文本到语音48k star的配音工具:GPT-SoVITS-WebUI

    支持零样本和少样本的文本到语音48k star的配音工具&#xff1a;GPT-SoVITS-WebUI 官网&#xff1a;RVC-Boss/GPT-SoVITS: 1 min voice data can also be used to train a good TTS model! (few shot voice cloning) 用户手册&#xff1a;GPT-SoVITS指南 功能 零样本文本到语…

    基于odoo17的设计模式详解---备忘模式

    大家好&#xff0c;我是你的Odoo技术伙伴。在开发复杂的业务流程时&#xff0c;我们有时会遇到这样的需求&#xff1a;在对一个对象进行一系列复杂操作之前&#xff0c;保存其当前状态&#xff0c;以便在操作失败或用户希望撤销时&#xff0c;能够一键恢复到操作之前的样子。或…

    基于Web门户架构的监狱内网改版实践:值班排班系统设计与信创适配探讨

    面向监狱内网改版场景的门户平台技术架构与智能排班实践关键词&#xff1a;监狱内网改版、监狱内部网站改版、值班排班系统、信创适配、智能门户架构一、场景背景与问题分析 在信创国产化、等级保护合规、政务集约化趋势持续推进的背景下&#xff0c;传统监狱内部网站普遍面临如…

    二分查找篇——在排序数组中查找元素的第一个和最后一个位置【LeetCode】

    34. 在排序数组中查找元素的第一个和最后一个位置 一、算法逻辑&#xff08;逐步通顺讲解每一步思路&#xff09; 该算法用于在一个升序排列的数组 nums 中查找某个目标值 target 的第一个出现的位置和最后一个出现的位置。 ✅ 1️⃣ 定义 lower_bound 函数 def lower_boun…

    【深度学习新浪潮】AI在材料力学领域的研究进展一览

    一、材料力学的研究范畴 材料力学是固体力学的核心分支,聚焦于材料在载荷作用下的变形、失效规律及性能优化,其核心任务是揭示材料的强度、刚度和稳定性机制。具体研究内容包括: 基本力学行为:分析杆、梁、轴等结构在拉伸、压缩、弯曲、扭转等载荷下的应力分布与应变响应。…