chrome浏览器架构学习

举报
薛定喵君 发表于 2021/06/04 00:32:25 2021/06/04
【摘要】 在从事前端开发过程中,浏览器作为最重要的开发环境,浏览器基础是前端开发人员必须掌握的基础知识点,它贯穿着前端的整个网络体系。对浏览器原理的了解,决定着编写前端代码性能的上限。一起学习下谷歌浏览器的架构知识。 谷歌浏览器运行时的四个主要进程 浏览器进程GPU进程第三方插件进程渲染进程(浏览器内核) # 浏览器进程 Controls "chrome" par...

在从事前端开发过程中,浏览器作为最重要的开发环境,浏览器基础是前端开发人员必须掌握的基础知识点,它贯穿着前端的整个网络体系。对浏览器原理的了解,决定着编写前端代码性能的上限。一起学习下谷歌浏览器的架构知识。
谷歌浏览器运行时的四个主要进程

# 浏览器进程

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 引擎的处理队列中等待处理

# 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处理来自多个应用程序的请求,并将它们绘制在同一个表面上)

# 第三方插件进程

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

# 渲染进程(浏览器内核)

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

文章来源: blog.csdn.net,作者:薛定喵君,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/jsxg2009/article/details/115244297

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。