浏览器工作原理
作为一个前端工程师,我们每天打交道最多的就是浏览器了,那么了解浏览器的基本工作原理是必不可少的、 现代web浏览器种类繁多,本文主要以谷歌浏览器为准来展开介绍。
1.一个应用程序都是好几个甚至多个进程来构造的、对于浏览器来说也是如此。现代浏览器一般都是多进程模式、一般的应用程序其中也有单进程多线程模式的、首先来介绍一下 “进程” 、线程“”的基本概念。
进程这个东西比较难懂、在我们的应用程序启动的时候、计算机操作系统就会启动一个进程并且为其开辟内存空间、其产生的应用数据都保存在这块空间之中。其中谷歌浏览器就是多进程的模式、每个进程来相互配合协助浏览器完成一系列的操作、而其中一个进程
也可以有多个线程、每个线程相互配置协助当前的进程完成所在的任务、当关闭应用程序或者关闭进程其所占用的内存空间也会被释放。
2. 谷歌浏览器的架构模式:
1.多进程、
主要分为:主进程、GPU进程、渲染进程
主进程:主要是用户界面的前进、后退。刷新、以及用户看不见的底层的操作、比如下载文件、网络请求和文件访问;
GPU进程主要负责3D的渲染。
渲染进程是比较重要的一个进程、下文展示详细的介绍。
2.多进程和单进程多线程模式的优点和缺点。
多进程优点为每个进程互不干涉、其中一个进程挂了、对于其他的进程,没有影响、缺点主要为每个进程有相同的数据。不能共享、占用内存。
谷歌浏览器为了这一个缺点也作出了优化的策略: Chrome 把浏览器不同程序的功能看做服务,这些服务可以方便的分割为不同的进程或者合并为一个进程。以 Broswer Process 为例,如果 Chrome 运行在强大的硬件上,它会分割不同的服务到不同的进程,这 样 Chrome 整体的运行会更加稳定,但是如果 Chrome 运行在资源贫瘠的设备上,这些服务又会合并到同一个进程中运行。
为了节省内存,Chrome 限制了最多的进程数,最大进程数量由设备的内存和 CPU 能力决定,当达到这一限制时,新打开的 Tab 会共用之前同一个站点的渲染进程。
3.当用户在浏览器输入url地址会发生什么:
- UI thread : 控制浏览器上的按钮及输入框;
- network thread: 处理网络请求,从网上获取数据;
- storage thread: 控制文件等的访问;
1. 浏览器的UI线程会判断输入的是URL还是query。
2. 浏览器的UI线程会通知网络线程让其去拿资源、网络线程会执行DNS查询。
3.读取响应。网络线程根据响应头判断是什么类型的文件如果是HTML就会传给渲染进程、其他类型的会传给下载管理器、
4.网络线程通知ui线程数据准备好了。UI线程会通知渲染进程去渲染数据。
5.渲染结束地址栏更新渲染的内容会保存在硬盘。
6.渲染进程接下来做的事情。
4.渲染线程主要处理html和js : 渲染进程主要分为好几个不同的线程来配合:
主要为: 处理js的js引擎线程、http请求的线程、事件处理的线程、定时器线程、渲染html网页的线程、。
1.构建DOM。当渲染进程接收到导航的确认信息,开始接受 HTML 数据时,主线程会解析文本字符串为 DOM。
2. 加载次级的资源、网页中常常包含诸如图片,CSS,JS 等额外的资源,这些资源需要从网络上或者 cache 中获取。主进程可以在构建 DOM 的过程中会逐一请求它们,为了加速 preload scanner 会同时运行,如果在 html 中存 在 `<img>` `<link>` 等标签,preload scanner 会把这些请求传递给 Browser process 中的 network thread 进行相关资源的下载。
3.下载js代码和执行。当遇到 `<script>` 标签时,渲染进程会停止解析 HTML,而去加载,解析和执行 JS 代码,停止解析 html 的原因在于 JS 可能会改变 DOM 的结构
4.计算样式、渲染dom不足以支撑页面的渲染、主进程基于css选择器去处理每个元素的样式、
5.获取布局构建DOM树。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步