您当前的位置:首页 > 电脑百科 > 程序开发 > 架构

5分钟帮你了解一下谷歌浏览器的架构

时间:2019-11-06 09:41:02  来源:  作者:

chrome

在从事前端开发过程中,浏览器作为最重要的开发环境,浏览器基础是前端开发人员必须掌握的基础知识点,它贯穿着前端的整个网络体系。对浏览器原理的了解,也可以提高编写前端代码性能的上限。如果你是web前端开发人员那就来一起学习下谷歌浏览器的架构知识吧。

谷歌浏览器运行的时候会启动四个主要进程:浏览器进程、GPU进程、第三方插件进程及渲染进程。

下面来一一介绍下四个主要进程的作用。

1.浏览器进程

Controls "chrome" part of the Application including address bar, bookmarks, back and forward buttons. Also handles the invisible, privileged parts of a web browser such as network requests and file access
(控制地址栏、书签前进后退按钮,标签页创建/销毁、页面显示、网络请求、资源管理下载)

  • GUI 渲染线程
    • html Parser 解析HTML文档,将元素转换为树结构DOM节点
    • css Parser 解析Style数据,包括外部的CSS文件以及在HTML元素中的样式,用于创建渲染树
    • Layout 为每个节点计算出在屏幕中展示的准确坐标
    • Painting 遍历渲染树,调用UI Backend提供的接口绘制每个节点
  • JAVAScript 引擎线程
    • 解析JavaScript脚本,运行代码 JS引擎一直等待着任务队列中任务的到来,然后加以处理,一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序
    • GUI渲染线程与JS引擎线程互斥
      • 由于JavaScript是可操纵DOM的,如果在修改这些元素属性同时渲染界面(即JS线程和GUI线程同时运行),那么渲染线程前后获得的元素数据就可能不一致了。为了防止渲染出现不可预期的结果,浏览器设置GUI渲染线程与JS引擎为互斥的关系,当JS引擎执行时GUI线程会被挂起,GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行
  • 定时触发器线程
    • setInterval与setTimeout所在线程
    • 定时计数器并不是由 JavaScript 引擎计数的(因为 JavaScript 引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确, 因此通过单独线程来计时并触发定时更为合理)
    • W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms
  • 事件触发线程
    • 归属于浏览器而不是JS引擎,用来控制事件循环
    • 一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待 JavaScript 引擎的处理。
    • 这些事件可以是当前执行的代码块如定时任务(也可来自浏览器内核的其他线程如鼠标点击、AJAX 异步请求等),会将对应任务添加到事件线程中
    • 由于 JavaScript 的单线程关系所有这些事件都得排队等待 JavaScript 引擎处理。
  • http 异步请求线程
    • XMLHttpRequest 在连接后是通过浏览器新开一个线程请求, 将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件放到 JavaScript 引擎的处理队列中等待处理

2.GPU进程

Handles GPU tasks in isolation from other processes. It is separated into different process because GPUs handles requests from multiple apps and draw them in the same surface (处理来自其他进程的GPU任务。它被分为不同的进程,因为gpu处理来自多个应用程序的请求,并将它们绘制在同一个表面上)

3.第三方插件进程

Controls any plugins used by the website, for example, flash. 控制网站使用的任何插件,每个插件对应一个进程,当插件运行时创建

4.渲染进程(所说的"浏览器内核")

Controls anything inside of the tab where a website is displayed. 控制显示网站的选项卡内的任何内容,默认每个标签页创建一个渲染引擎实例

以上就是谷歌浏览器主要进程的相关介绍,当然有一些其他进程,这里不再展开。



Tags:架构   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关推荐
COLA架构中,一些建议的命名规范,可供参考,不同的COLA版本也略有差异。 在COLA架构中,我们也能找到以前熟悉的VO,DTO等对象,只不过在COLA中后缀名变了:VO->CO,COLA中CO对象用于展...【详细内容】
2021-07-16  Tags: 架构  点击:(4)  评论:(0)  加入收藏
作者 | Natan Silnitsky译者 | 平川策划 | 万佳在过去一年里,我一直是数据流团队的一员,负责 Wix 事件驱动的消息传递基础设施(基于 Kafka)。有超过 1400 个微服务使用这个基础...【详细内容】
2021-07-12  Tags: 架构  点击:(6)  评论:(0)  加入收藏
前言要理解微服务,首先要先理解不是微服务的那些。通常跟微服务相对的是单体应用,即将所有功能都打包成在一个独立单元的应用程序。从单体应用到微服务并不是一蹴而就的,这是一...【详细内容】
2021-07-09  Tags: 架构  点击:(8)  评论:(0)  加入收藏
一、前言server.xml 配置,是 Tomcat启动配置,从配置结构可以看出 Tomcat 的整体架构。如果能够了解其常用配置项,对 Tomcat有一个高屋建瓴的把握,然后再庖丁解牛,一步步深入源码...【详细内容】
2021-07-04  Tags: 架构  点击:(10)  评论:(0)  加入收藏
兄弟姐妹们,一定要找好自己赖以生存的老窝。南橘北枳,根正才能苗红,否则你看起来一些主流的技术,可能就会成为毒药。...【详细内容】
2021-06-29  Tags: 架构  点击:(16)  评论:(0)  加入收藏
环境:JavaIDEAMaven 多层级架构Jenkins描述:由于架构是 Maven 多层级架构,采用 Jenkins 打包发布的方式对服务部署,与传统的单层架构不同。传统的单层架构直接在 pom.xml 文件层...【详细内容】
2021-06-29  Tags: 架构  点击:(15)  评论:(0)  加入收藏
应用系统架构种类及优缺点分析 软件体系结构是构建计算机软件实践的基础。 软件架构是一个系统的草图。它描述的对象是直接构成系统的抽象组件。各个组件之间的连接则明确...【详细内容】
2021-06-29  Tags: 架构  点击:(13)  评论:(0)  加入收藏
What is 限流?限流顾名思义,限制流量或者说叫流量管制。很形象的比喻如老式电闸都安装了保险丝,一旦有人使用超大功率的设备,保险丝就会烧断以保护各个电器不被强电流给烧坏。W...【详细内容】
2021-06-28  Tags: 架构  点击:(10)  评论:(0)  加入收藏
领域驱动,各自只管各自的模块,顶层再来进行组装和分配...【详细内容】
2021-06-25  Tags: 架构  点击:(17)  评论:(0)  加入收藏
第一章:认识SpringSpring认识框架spring全家桶: spring ,springmvc,spring boot,spring cloudspring:出现在2002左右,解决企业开发的难度,减轻对项目模块之间的管理。类和类之间的...【详细内容】
2021-06-24  Tags: 架构  点击:(21)  评论:(0)  加入收藏
▌简易百科推荐
COLA架构中,一些建议的命名规范,可供参考,不同的COLA版本也略有差异。 在COLA架构中,我们也能找到以前熟悉的VO,DTO等对象,只不过在COLA中后缀名变了:VO->CO,COLA中CO对象用于展...【详细内容】
2021-07-16  软件架构    Tags:COLA 架构   点击:(4)  评论:(0)  加入收藏
作者 | Natan Silnitsky译者 | 平川策划 | 万佳在过去一年里,我一直是数据流团队的一员,负责 Wix 事件驱动的消息传递基础设施(基于 Kafka)。有超过 1400 个微服务使用这个基础...【详细内容】
2021-07-12  技术联盟总坛    Tags:架构   点击:(6)  评论:(0)  加入收藏
前言要理解微服务,首先要先理解不是微服务的那些。通常跟微服务相对的是单体应用,即将所有功能都打包成在一个独立单元的应用程序。从单体应用到微服务并不是一蹴而就的,这是一...【详细内容】
2021-07-09  码农老K    Tags:微服务架构   点击:(8)  评论:(0)  加入收藏
大家都知道,MyBatis 框架是一个持久层框架,是 Apache 下的顶级项目。Mybatis 可以让开发者的主要精力放在 sql 上,通过 Mybatis 提供的映射方式,自由灵活的生成满足需要的 sql 语句。使用简单的 XML 或注解来配置和映射原...【详细内容】
2021-07-06  武哥  武哥聊编程  Tags:MyBatis   点击:(12)  评论:(0)  加入收藏
契约测试◎ 契约测试概述◎ 契约测试与TDD◎ 契约测试与独立交付◎ 契约测试的相关技术与用法实战在微服务架构中最常见的事情就是远程调用,如服务和服务之间的远程调用,前端...【详细内容】
2021-07-04  java领路人  今日头条  Tags:微服务   点击:(11)  评论:(0)  加入收藏
兄弟姐妹们,一定要找好自己赖以生存的老窝。南橘北枳,根正才能苗红,否则你看起来一些主流的技术,可能就会成为毒药。...【详细内容】
2021-06-29  小姐姐味道  公众号   Tags:架构   点击:(16)  评论:(0)  加入收藏
前言在 4 月 27 日举办的 Gopher China 2019 中,来自花椒直播的周洋进行了题为《花椒直播关于创业公司中台的技术思考与实践》的演讲,以下为演讲实录。No.0背景介绍 周洋:2009...【详细内容】
2021-06-29  MrDeng008    Tags:中台   点击:(10)  评论:(0)  加入收藏
环境:JavaIDEAMaven 多层级架构Jenkins描述:由于架构是 Maven 多层级架构,采用 Jenkins 打包发布的方式对服务部署,与传统的单层架构不同。传统的单层架构直接在 pom.xml 文件层...【详细内容】
2021-06-29  旷野历程  CSDN  Tags:Maven   点击:(15)  评论:(0)  加入收藏
应用系统架构种类及优缺点分析 软件体系结构是构建计算机软件实践的基础。 软件架构是一个系统的草图。它描述的对象是直接构成系统的抽象组件。各个组件之间的连接则明确...【详细内容】
2021-06-29  梦幻神域    Tags:架构   点击:(13)  评论:(0)  加入收藏
1、Feign简介Feign是一种声明式、模板化的HTTP客户端。使用Feign,可以做到声明式调用。尽管Feign目前已经不再迭代,处于维护状态,但是Feign仍然是目前使用最广泛的远程调用框架...【详细内容】
2021-06-29  深夜敲代码  今日头条  Tags:SpringCloud   点击:(15)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条