浏览器
计算机的核心是CPU
,它承担了所有的计算任务。将CPU
比作一个工厂,将进程
比作一个车间,将线程
比作一个工人。
多进程(process)
- 浏览器主进程 (Browser Process)
- 渲染进程 (Renderer Process)
- GPU进程 (GPU Process)
- 插件进程 (Plugin Process)
- 网络进程
每个进程又有多个线程(thread)
TIP
多进程,允许多个任务同时运行;
多线程,允许单个任务分成不同的部分运行;
提供协调机制,一方面防止进程之间和线程之间产生冲突,另一方面允许进程之间和线程之间共享资源。
浏览器主进程 (Browser Process)
它负责什么?
负责浏览器Tab外的工作,包括地址栏,书签栏,前进后退按钮等部分的工作。还负责处理浏览器网络请求和文件访问。
它里面有哪些线程?
- UI thread: 控制浏览器上的按钮及输入框
- network thread: 处理网络请求,从网上获取数据
- storage thread: 控制文件等的访问
总结
当在浏览器中输入文字,UI thread
需要判断用户输入的是URL
还是query
。
当点击回车键,UI thread
通知network thread
获取页面内容,并控制tab显示加载中。
network thread
会执行DNS
查询,随后为请求建立TLS连接
。
当请求响应返回的时候,network thread
会判断响应状态,执行对应的操作。如果响应内容的格式是HTML,下一步会交给Renderer Process
处理。
Browser Process
会给Renderer Process
发送 IPC
消息来确认导航,一旦 Browser Process
收到 Renderer Process
的渲染确认消息,导航过程结束,页面加载过程开始。
渲染进程 (Renderer Process)
它负责什么?
渲染进程几乎负责 Tab 内的所有事情,渲染进程的核心目的在于转换 HTML、CSS、JS 为用户可交互的 web 页面。
它里面有哪些线程?
- 主线程 Main thread
- 工作线程 Worker thread
- 排版线程 Compositor thread
- 光栅线程 Raster thread
渲染流程是什么样的?
构建
DOM
。解析文本字符串为DOM
。加载次级的资源。资源请求会传递给
Browser process
中的network thread
进行相关资源的下载。JS 的下载与执行。当遇到
<script>
标签时,渲染进程会停止解析 HTML,而去加载,解析和执行 JS 代码。样式计算。解析 CSS 获取每一个节点的最终的计算样式值。
获取布局。通过遍历 DOM 及相关元素的计算样式,找到所有元素的几何关系,构建出布局树。
绘制各元素。
合成帧。先分层,再组合成帧。合成帧会被传递给
GPU进程
用以展示在屏幕上,优点是非常流畅。
浏览器对事件的处理
在浏览器看来,用户的所有手势都是输入,鼠标滚动,悬置,点击等等都是输入。
事件发生时,浏览器进程
会发送事件类型及相应的坐标给渲染进程
,渲染进程
随后找到事件对象并执行所有绑定在其上的相关事件处理函数。