iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >前端浏览器的工作原理是什么
  • 855
分享到

前端浏览器的工作原理是什么

2023-06-03 16:06:16 855人浏览 泡泡鱼
摘要

这期内容当中小编将会给大家带来有关前端浏览器的工作原理是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。浏览器架构在讲浏览器架构之前,先理解两个概念,进程和线程。进程(process)是程序的一次执行过

这期内容当中小编将会给大家带来有关前端浏览器的工作原理是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

    浏览器架构

    在讲浏览器架构之前,先理解两个概念,进程和线程

    进程(process)是程序的一次执行过程,是一个动态概念,是程序在执行过程中分配和管理资源的基本单位,线程(thread)是CPU调度和分派的基本单位,它可与同属一个进程的其他的线程共享进程所拥有的全部资源。

    简单的说呢,进程可以理解成正在执行的应用程序,而线程呢,可以理解成我们应用程序中的代码的执行器。而他们的关系可想而知,线程是跑在进程里面的,一个进程里面可能有一个或者多个线程,而一个线程,只能隶属于一个进程。

    大家都知道,浏览器属于一个应用程序,而应用程序的一次执行,可以理解为计算机启动了一个进程,进程启动后,CPU会给该进程分配相应的内存空间,当我们的进程得到了内存之后,就可以使用线程进行资源调度,进而完成我们应用程序的功能。

    而在应用程序中,为了满足功能的需要,启动的进程会创建另外的新的进程来处理其他任务,这些创建出来的新的进程拥有全新的独立的内存空间,不能与原来的进程内向内存,如果这些进程之间需要通信,可以通过IPC机制(Inter Process Communication)来进行。

    很多应用程序都会采取这种多进程的方式来工作,因为进程和进程之间是互相独立的它们互不影响,也就是说,当其中一个进程挂掉了之后,不会影响到其他进程的执行,只需要重启挂掉的进程就可以恢复运行。

    浏览器的多进程架构

    假如我们去开发一个浏览器,它的架构可以是一个单进程多线程的应用程序,也可以是一个使用IPC通信的多进程应用程序。

    不同的浏览器使用不同的架构,下面主要以Chrome为例,介绍浏览器的多进程架构。

    在Chrome中,主要的进程有4个:

  • 浏览器进程 (Browser Process):负责浏览器的TAB的前进、后退、地址栏、书签栏的工作和处理浏览器的一些不可见的底层操作,比如网络请求和文件访问。

  • 渲染进程 (Renderer Process):负责一个Tab内的显示相关的工作,也称渲染引擎。

  • 插件进程 (Plugin Process):负责控制网页使用到的插件

  • GPU进程 (GPU Process):负责处理整个应用程序的GPU任务

  • 这4个进程之间的关系是什么呢?

    首先,当我们是要浏览一个网页,我们会在浏览器的地址栏里输入URL,这个时候Browser Process会向这个URL发送请求,获取这个URL的html内容,然后将HTML交给Renderer Process,Renderer Process解析HTML内容,解析遇到需要请求网络的资源又返回来交给Browser Process进行加载,同时通知Browser Process,需要Plugin Process加载插件资源,执行插件代码。解析完成后,Renderer Process计算得到图像帧,并将这些图像帧交给GPU Process,GPU Process将其转化为图像显示屏幕。

    多进程架构的好处

    Chrome为什么要使用多进程架构呢?

    第一,更高的容错性。当今WEB应用中,HTML,javascriptCSS日益复杂,这些跑在渲染引擎的代码,频繁的出现BUG,而有些BUG会直接导致渲染引擎崩溃,多进程架构使得每一个渲染引擎运行在各自的进程中,相互之间不受影响,也就是说,当其中一个页面崩溃挂掉之后,其他页面还可以正常的运行不收影响。

    第二,更高的安全性和沙盒性(sanboxing)。渲染引擎会经常性的在网络上遇到不可信、甚至是恶意的代码,它们会利用这些漏洞在你的电脑上安装恶意的软件,针对这一问题,浏览器对不同进程限制了不同的权限,并为其提供沙盒运行环境,使其更安全更可靠

    第三,更高的响应速度。在单进程的架构中,各个任务相互竞争抢夺CPU资源,使得浏览器响应速度变慢,而多进程架构正好规避了这一缺点。

    多进程架构优化

    之前的我们说到,Renderer Process的作用是负责一个Tab内的显示相关的工作,这就意味着,一个Tab,就会有一个Renderer Process,这些进程之间的内存无法进行共享,而不同进程的内存常常需要包含相同的内容。

    浏览器的进程模式

    为了节省内存,Chrome提供了四种进程模式(Process Models),不同的进程模式会对 tab 进程做不同的处理。

  • Process-per-site-instance (default) - 同一个 site-instance 使用一个进程

  • Process-per-site - 同一个 site 使用一个进程

  • Process-per-tab - 每个 tab 使用一个进程

  • Single process - 所有 tab 共用一个进程

  • 这里需要给出 site 和 site-instance 的定义

  • site 指的是相同的 reGIStered domain name(如: Google.com ,bbc.co.uk)和scheme (如:https://)。比如a.baidu.com和b.baidu.com就可以理解为同一个 site(注意这里要和 Same-origin policy 区分开来,同源策略还涉及到子域名和端口)。

  • site-instance 指的是一组 connected pages from the same site,这里 connected 的定义是 can obtain references to each other in script code 怎么理解这段话呢。满足下面两中情况并且打开的新页面和旧页面属于上面定义的同一个 site,就属于同一个 site-instance

  • 用户通过这种方式点击打开的新页面

  • js代码打开的新页面(比如 window.open)

  • 理解了概念之后,下面解释四个进程模式

    首先是Single process,顾名思义,单进程模式,所有tab都会使用同一个进程。接下来是Process-per-tab ,也是顾名思义,每打开一个tab,会新建一个进程。而对于Process-per-site,当你打开 a.baidu.com 页面,在打开 b.baidu.com 的页面,这两个页面的tab使用的是共一个进程,因为这两个页面的site相同,而如此一来,如果其中一个tab崩溃了,而另一个tab也会崩溃。

    Process-per-site-instance 是最重要的,因为这个是 Chrome 默认使用的模式,也就是几乎所有的用户都在用的模式。当你打开一个 tab 访问 a.baidu.com ,然后再打开一个 tab 访问 b.baidu.com,这两个 tab 会使用两个进程。而如果你在 a.baidu.com 中,通过JS代码打开了 b.baidu.com 页面,这两个 tab 会使用同一个进程。

    默认模式选择

    那么为什么浏览器使用Process-per-site-instance作为默认的进程模式呢?

    Process-per-site-instance兼容了性能与易用性,是一个比较中庸通用的模式。

  • 相较于 Process-per-tab,能够少开很多进程,就意味着更少的内存占用

  • 相较于 Process-per-site,能够更好的隔离相同域名下毫无关联的 tab,更加安全

  • 导航过程都发生了什么

    前面我们讲了浏览器的多进程架构,讲了多进程架构的各种好处,和Chrome是怎么优化多进程架构的,下面从用户浏览网页这一简单的场景,来深入了解进程和线程是如何呈现我们的网站页面的。

    网页加载过程

    之前我们我们提到,tab以外的大部分工作由浏览器进程Browser Process负责,针对工作的不同,Browser Process 划分出不同的工作线程:

  • UI thread:控制浏览器上的按钮及输入框;

  • network thread:处理网络请求,从网上获取数据;

  • storage thread: 控制文件等的访问;

  • 前端浏览器的工作原理是什么

    第一步:处理输入

    当我们在浏览器的地址栏输入内容按下回车时,UI thread会判断输入的内容是搜索关键词(search query)还是URL,如果是搜索关键词,跳转至默认搜索引擎对应都搜索URL,如果输入的内容是URL,则开始请求URL。

    前端浏览器的工作原理是什么

    第二步:开始导航

    回车按下后,UI thread将关键词搜索对应的URL或输入的URL交给网络线程Network thread,此时UI线程使Tab前的图标展示为加载中状态,然后网络进程进行一系列诸如DNS寻址,建立TLS连接等操作进行资源请求,如果收到服务器的301重定向响应,它就会告知UI线程进行重定向然后它会再次发起一个新的网络请求。

    第三步:读取响应

    network thread接收到服务器的响应后,开始解析Http响应报文,然后根据响应头中的Content-Type字段来确定响应主体的媒体类型(MIME Type),如果媒体类型是一个HTML文件,则将响应数据交给渲染进程(renderer process)来进行下一步的工作,如果是 zip 文件或者其它文件,会把相关数据传输给下载管理器。

    与此同时,浏览器会进行 Safe Browsing 安全检查,如果域名或者请求内容匹配到已知的恶意站点,network thread 会展示一个警告页。除此之外,网络线程还会做 CORB(Cross Origin Read Blocking)检查来确定那些敏感的跨站数据不会被发送至渲染进程。

    第四步:查找渲染进程

    各种检查完毕以后,network thread 确信浏览器可以导航到请求网页,network thread 会通知 UI thread 数据已经准备好,UI thread 会查找到一个 renderer process 进行网页的渲染。

    浏览器为了对查找渲染进程这一步骤进行优化,考虑到网络请求获取响应需要时间,所以在第二步开始,浏览器已经预先查找和启动了一个渲染进程,如果中间步骤一切顺利,当 network thread 接收到数据时,渲染进程已经准备好了,但是如果遇到重定向,这个准备好的渲染进程也许就不可用了,这个时候会重新启动一个渲染进程。

    第五步:提交导航

    到了这一步,数据和渲染进程都准备好了,Browser Process 会向 Renderer Process 发送IPC消息来确认导航,此时,浏览器进程将准备好的数据发送给渲染进程,渲染进程接收到数据之后,又发送IPC消息给浏览器进程,告诉浏览器进程导航已经提交了,页面开始加载。

    这个时候导航栏会更新,安全指示符更新(地址前面的小),访问历史列表(history tab)更新,即可以通过前进后退来切换该页面。

    第六步:初始化加载完成

    当导航提交完成后,渲染进程开始加载资源及渲染页面(详细内容下文介绍),当页面渲染完成后(页面及内部的iframe都触发了onload事件),会向浏览器进程发送IPC消息,告知浏览器进程,这个时候UI thread会停止展示tab中的加载中图标。

    网页渲染原理

    导航过程完成之后,浏览器进程把数据交给了渲染进程,渲染进程负责tab内的所有事情,核心目的就是将HTML/CSS/JS代码,转化为用户可进行交互的web页面。那么渲染进程是如何工作的呢?

    渲染进程中,包含线程分别是:

  • 一个主线程(main thread)

  • 多个工作线程(work thread)

  • 一个合成器线程(compositor thread)

  • 多个光栅化线程(raster thread)

  • 不同的线程,有着不同的工作职责。

    构建DOM

    当渲染进程接受到导航的确认信息后,开始接受来自浏览器进程的数据,这个时候,主线程会解析数据转化为DOM(Document Object Model)对象。

    DOM为web开发人员通过JavaScript与网页进行交互的数据结构api

    资源子加载

    在构建DOM的过程中,会解析到图片、CSS、JavaScript脚本等资源,这些资源是需要从网络或者缓存中获取的,主线程在构建DOM过程中如果遇到了这些资源,逐一发起请求去获取,而为了提升效率,浏览器也会运行预加载扫描(preload scanner)程序,如果如果HTML中存在img、link等标签,预加载扫描程序会把这些请求传递给Browser Process的network thread进行资源下载。

    JavaScript的下载与执行

    构建DOM过程中,如果遇到

上述就是小编为大家分享的前端浏览器的工作原理是什么了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网精选频道。

--结束END--

本文标题: 前端浏览器的工作原理是什么

本文链接: https://www.lsjlt.com/news/234957.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 前端浏览器的工作原理是什么
    这期内容当中小编将会给大家带来有关前端浏览器的工作原理是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。浏览器架构在讲浏览器架构之前,先理解两个概念,进程和线程。进程(process)是程序的一次执行过...
    99+
    2023-06-03
  • 浏览器的工作原理是什么
    本篇内容主要讲解“浏览器的工作原理是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“浏览器的工作原理是什么”吧!浏览器架构在讲浏览器架构之前,先理解两个概念,...
    99+
    2024-04-02
  • web浏览器的工作原理是什么
    这篇文章主要介绍“web浏览器的工作原理是什么”,在日常操作中,相信很多人在web浏览器的工作原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”web浏览器的工作原理是...
    99+
    2024-04-02
  • CSS浏览器的前缀是什么
    这篇文章将为大家详细讲解有关CSS浏览器的前缀是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。CSS浏览器前缀浏览器样式前缀为了让CSS3样式兼容,需要将某些样式加上...
    99+
    2024-04-02
  • open打开浏览器的原理是什么
    今天小编给大家分享一下open打开浏览器的原理是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用配置 webpack ...
    99+
    2023-07-04
  • JavaScript浏览器事件的原理是什么
    JavaScript浏览器事件的原理是什么 ,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。JavaScript 程序采用了异步事件驱动编程(E...
    99+
    2024-04-02
  • 了解SessionStorage:它的工作原理在浏览器中是怎样的?
    解析SessionStorage:它是如何在浏览器中工作的? 随着现代Web应用在功能和复杂性上的不断增加,为了提供更好的用户体验,开发人员开始使用各种技术来储存和管理应用程序中的数据。其中,会话存储(SessionStorag...
    99+
    2024-01-15
    浏览器 工作
  • Vendor Prefix:需要浏览器引擎前缀的原因是什么
    这篇文章给大家分享的是有关Vendor Prefix:需要浏览器引擎前缀的原因是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。浏览器引擎前缀(Vendor Prefix)是什么?Vendor prefix&a...
    99+
    2023-06-08
  • 怎么判断当前浏览器是否是微信浏览器或者移动端
    怎么判断当前浏览器是否是微信浏览器或者移动端,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1,用JS代码判断浏览器是否为微信浏览器function is_weixn(...
    99+
    2023-06-20
  • JavaScript 浏览器开发者工具,前端开发的超级工具
    JavaScript 浏览器开发者工具是一套强大的工具,可帮助前端开发人员调试、分析和优化其 Web 应用程序。这些工具集成在 Chrome、Firefox、Safari 和 Microsoft Edge 等现代浏览器中,提供了各种功能,...
    99+
    2024-04-02
  • 浏览器私有前缀的概念是什么
    今天小编给大家分享一下浏览器私有前缀的概念是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2024-04-02
  • puppet的工作原理是什么
    今天小编给大家分享一下puppet的工作原理是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Puppet 的介绍什么是P...
    99+
    2023-06-28
  • 定时器的工作原理是什么
    定时器的工作原理可以分为硬件定时器和软件定时器两种类型。硬件定时器的工作原理是时钟信号源提供稳定的时钟信号作为计时器的基准。计数器从预设值开始计数,每当时钟信号到达时计数器递增。当计数器达到预设值时,定时器会触发一个中断信号通知中断控制器处...
    99+
    2023-08-16
  • 蜂鸣器的工作原理是什么
    蜂鸣器工作原理主要基于压电效应或电磁效应,通过改变输入的电压、频率或者触发信号,可以控制蜂鸣器的声音频率和强度,实现不同的音调和音量效果。本教程操作系统:Windows10系统、Dell G3电脑。蜂鸣器(Buzzer)是一种电子器件,用于...
    99+
    2023-08-18
  • NTPD的工作原理是什么
    今天小编给大家分享一下NTPD的工作原理是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Network Time Pro...
    99+
    2023-06-28
  • Torrents的工作原理是什么
    本篇内容主要讲解“Torrents的工作原理是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Torrents的工作原理是什么”吧!Torrents 是如何工作的?假设 ‘...
    99+
    2023-06-27
  • RabbitMQ的工作原理是什么
    这篇文章给大家介绍RabbitMQ的工作原理是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。RabbitMQ简介在介绍RabbitMQ之前实现要介绍一下MQ,MQ是什么?MQ全称是Message Queue,可以理...
    99+
    2023-06-19
  • ipsec的工作原理是什么
    IPSec(Internet Protocol Security)是一种用于保护网络通信安全的协议套件。它可以提供数据加密、数据完整...
    99+
    2023-10-10
    ipsec
  • chatgpt的工作原理是什么
    chatgpt的工作原理是以电子邮件和电子传真方式为用户提供多媒体信息传输,利用一个基于网络的、安全的点对点通讯系统为用户进行多人的...
    99+
    2023-02-09
    chatgpt
  • Hadoop的工作原理是什么
    Hadoop的工作原理是基于分布式存储和计算的概念。Hadoop由两个核心组件组成:Hadoop分布式文件系统(HDFS)和MapR...
    99+
    2024-03-11
    Hadoop
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作