浏览器的功能与组成____将用户输入的 url 转化为可视化的图像
网络、资源管理、网页浏览、
多页面管理、插件与管理、账户和同步、安全啊机制、开发者工具... ...
- 网络
通过网络模块下载各式各样的资源
安全问题非常重要
- 资源管理
从网络下载,后者本地获取去到的资源 需要有高效的机制来管理
避免重复下载,缓存等等
- 网页浏览
如何将资源渲染为可视化的页面
- 浏览器的内核(渲染引擎)
负责将页面转变为可视化的图像结果
1. url 到 dom 树
2. dom 树 到 可视化图像
IE ----> Trident
Safari ----> WebKit
WebKit 本身主要是由两个引擎构成的,
一个是渲染引擎 "WebCore",
另一个则是 javascript 解释引擎 "JSCore",
它们均是从 KDE 的渲染引擎 KHTML 及 javascript 解释引擎 KJS 衍生而来。
Chrome ----> Blink
Opera ----> Blink
FireFox ----> Gecko
- 进程
程序的一次执行,独占一片内存空间,是操作系统执行的基本单元
一个进程至少有一个运行的线程____主线程 在进程启动后自动创建
一个进程也可以同时运行多个线程
一个进程内的数据可以共享其中的多个线程 直接共享,
多个进程之间的数据不可以直接共享
- 线程
是进程内的一个独立执行单
是 CPU 调度的最小单元
js 引擎 是单线程运行的 (比如 alert() )
程序运行的基本单元
保存多个线程的容器____线程池 实现线程对象的反复利用
- 现代浏览器的多进程多线程模型
在之前,单进程的浏览器:
一个页面的崩溃,会导致整个浏览器的崩溃
避免单个页面或者插件的崩溃影响整个浏览器
提高了安全性
- 浏览器有些什么进程?
- Browser 进程
浏览器的主进程,有且只有一个
负责浏览器界面的显示和各个页面的管理
是其他类型进程的祖先,负责其他进程的创建和销毁
- Renderer 进程
网页渲染进程,负责页面的渲染
不一定等于打开的网页量
即使有 4 个标签页,但是也不一定就有 4 个 Render 进程,可能更多
Renderer 也是有极限的
- GPU 进程
vue 插件进程
React 插件进程
移动设备的浏览器可能不太一样:
Android 不支持插件,意味着没有 插件进程
Renderer 演化成了操作系统的一个服务进程,但仍然是独立的
GPU 演化成了 Browser 进程的一个线程
- 每个进程内部又有很多线程
主要目的: 保护用户界面的高度响应
例如:
- 不让 Browser 进程 的 UI 线程 被其他耗时操作(数据库读写,本地文件读写)所阻塞
我们会将这些耗时操作放到分线程中去处理,并适当多创建几个 UI 线程
- 在 Renderer 进程中,为了不让其他操作阻止渲染线程的高速执行,通常将 Renderer 渲染过程这样的线程 管线化
利用计算机的多核优势, 让渲染的不同阶段在不同的线程中执行