首页 > 其他分享 >浏览器底层原理-工作机制

浏览器底层原理-工作机制

时间:2024-01-08 09:46:05浏览次数:30  
标签:浏览器 渲染 队列 主线 JS 任务 原理 底层

浏览器工作机制

浏览器是多进程多线程的应用,启动浏览器后,会自动启动多个进程(渲染进程、网络进程,存储服务等),每个进程中又包含多个线程协同工作。

渲染主线程工作方式

在浏览器的诸多进程中,渲染进程承担着最重要的工作。渲染进程中有一个渲染主线程,负责解析HTML、解析CSS、计算样式、布局、处理图层、执行JS代码、执行事件函数等。

为了处理众多任务,渲染主线程采用事件循环(消息循环)的工作模式。任务以队列的形式存在,在Chrome中,渲染主线程会开启一个不会结束的for循环:for( ; ;),每次循环从消息队列中取出第一个任务执行,执行完成后出栈,队列中的任务遵循先进先出的原则,而其他线程只需要在合适的时候将任务加入到队列末尾即可。队列中没有任务时,主线程会进入休眠,当其它线程向队列添加任务时会将其唤醒。

消息队列不止一个,不同的队列有不同的优先级。在一次事件循环中,由浏览器自行决定取哪一个队列的任务。各家浏览器自行根据规则设定队列,W3C官方的解释:每个任务有不同的类型,同类型的任务必须在同一个队列,不同的任务可以属于不同的队列(也可属于同一队列)。但按照规范,浏览器必须有一个微队列,微队列中的任务具有最高的优先级,优先调度执行。官方文档

在目前 chrome 的实现中,至少包含了以下队列:

  • 延时队列:⽤于存放计时器到达后的回调任务,优先级「中」
  • 交互队列:⽤于存放⽤户操作后产⽣的事件处理任务,优先级「高」
  • 微队列:⽤户存放需要最快执⾏的任务,优先级「最高」,添加任务到微队列的方式主要是PromiseMutationObserver

JS异步机制

JS是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中,而渲染主线程只有一个。而渲染主线程承担着诸多的工作,渲染页面、执行 JS 都在其中运行。如果使用同步的方式,就极有可能导致主线程产生阻塞,从而导致消息队列中的很多其他任务无法得到执行。这样一来,一方面会导致繁忙的主线程白白的消耗时间,另一方面导致页面无法及时更新,给用户造成卡死现象。

所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时,比如计时器、网络、事件监听,主线程将任务交给其他线程去处理,自身立即结束任务的执行,转而执行后续代码。当其他线程完成时,将事先传递的回调函数包装成任务,加入到消息队列的末尾排队,等待主线程调度执行。在这种异步模式下,浏览器永不阻塞,从而最大限度的保证了单线程的流畅运行。

JS不可以精确计时的原因

  1. 计算机硬件没有原子钟,无法做到精确计时
  2. 操作系统的计时函数本身就有少量偏差,由于 JS 的计时器最终调用的是操作系统的函数,也就携带了这些偏差
  3. 按照 W3C的标准,浏览器实现计时器时,如果嵌套层级超过 5 层,则会带有 4 毫秒的最少时间,这样在计时时间少于 4毫秒时又带来了偏差
  4. 受事件循环的影响,计时器的回调函数只能在主线程空闲时运行,因此又带来了偏差

标签:浏览器,渲染,队列,主线,JS,任务,原理,底层
From: https://www.cnblogs.com/zyj-Blogs/p/17946822

相关文章

  • 基于代码一步一步教你深度学习中循环神经网络(RNN)的原理
    当谈到基于RNN(循环神经网络)的机器学习例子时,一个常见的任务是文本生成。RNN是一种能够处理序列数据的神经网络,它具有记忆能力。以下是一个基于RNN的文本生成例子,并给每一行添加了详细注释:1.importtorch2.importtorch.nnasnn3.importtorch.optimasoptim4.5.#定义......
  • 浏览器中的安全沙箱
    浏览器被划分为浏览器内核和渲染内核两个核心模块,其中浏览器内核是由网络进程、浏览器主进程和GPU进程组成的,渲染内核就是渲染进程。所有的网络资源都是通过浏览器内核来下载的,下载后的资源会通过IPC将其提交给渲染进程(浏览器内核和渲染进程之间都是通过IPC来通信的)。然后渲......
  • Chrome等浏览器下出现net ERR_BLOCKED_BY_CLIENT的解决办法
    当我们在做开发时,调试页面图片会出现部分图片无法正常显示,并且确认图片的地址正确;按F12Debug查看报错原因,提示net::ERR_BLOCKED_BY_CLIENT错误,但当我们点击图片地址发现,图片地址并无错误;遇到这类情况,一般都是浏览器安装的某个第三方扩展程序已阻止对此网页的访问,例如解决办法:当我......
  • RocketMQ系统性学习-RocketMQ原理分析之消息的可靠性以及有序性如何保证
    欢迎关注公众号:【11来了】发送“资料”可以下载Redis、JVM系列文章PDF版本!作者为在读研究生,目前研二,计划在公众号记录学习常用中间件笔记,以及明年更新面试经历!消息的可靠性如何保证?要保证消息的可靠性,先来思考一下从哪些方面保证呢?这要看消息的生命周期,既然保证可靠性,那么就是......
  • 浏览器中的同源策略
    如果两个URL的协议、域名和端口都相同,我们就称这两个URL同源。比如下面这两个URL,它们具有相同的协议HTTPS、相同的域名www.baidu.com,以及相同的端口443,所以我们就说这两个URL是同源的。https://www.baidu.com/?category=1https://www.baidu.com/?category=0浏览器默认两......
  • 一个有趣的浏览器插件“猫抓”
    一个有趣的浏览器插件“猫抓”猫抓是一款非常好用的浏览器插件,它能抓取几乎所有chrome内核浏览器的网页视频链接数据。猫抓插件可以在任意网页抓取任意视频数据并且一键抓取保存获取您需要内容,操作起来简单方便,下载内容可以保存本地电脑。猫抓功能介绍  猫抓Chrome插件是一款......
  • Vuex与Vuex-Class的底层原理简单实现
    vuex-class是在class-component中使用vuex的辅助工具。学习任何技术栈的使用,最透彻的掌握方法就是去简单实现一下,下面先简单实现一下vuex,然后基于我们自己实现的vuex再去实现一个vuex-class,彻底搞定vuex-class的使用。首先回忆一下vuex的使用(配置)方法,首先我们需要在某个位置执行Vue......
  • HTTP代理工作原理介绍 海外代理IP推荐
    HTTP协议即超文本传输协议,是Internet上进行信息传输时使用广泛的一种较为简单的通信协议。部分局域网对协议进行了限制,只允许用户通过HTTP协议访问外部网站。HTTP的功能支持“直接连接”和“通过HTTP代理”两种形式的连接,而选择其中的何种形式,要视用户所在网络的具体情况。http代理......
  • RocketMQ系统性学习-RocketMQ原理分析之源码启动、Broker启动流程分析
    欢迎关注公众号:【11来了】发送“资料”可以下载Redis、JVM系列文章PDF版本!作者为在读研究生,目前研二,计划在公众号记录学习常用中间件笔记,以及明年更新面试经历!RocketMQ原理分析启动RocketMQ源码分析RocketMQ之前,先确保可以成功启动起来NameServer启动在Idea中配置ROCK......
  • 避免重复扣款:分布式支付系统的幂等性原理与实践
    这是《百图解码支付系统设计与实现》专栏系列文章中的第(6)篇。本文主要讲清楚什么是幂等性原理,在支付系统中的重要应用,业务幂等、全部幂等这些不同的幂等方案选型带来的收益和复杂度权衡,幂等击穿场景及可能的严重后果。这也是支付公司面试的必考题目之一。专栏地址:百图解码支付系统......