浏览器

计算机的核心是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
  • 渲染流程是什么样的?

    1. 构建DOM。解析文本字符串为DOM

    2. 加载次级的资源。资源请求会传递给Browser process中的network thread进行相关资源的下载。

    3. JS 的下载与执行。当遇到 <script> 标签时,渲染进程会停止解析 HTML,而去加载,解析和执行 JS 代码。

    4. 样式计算。解析 CSS 获取每一个节点的最终的计算样式值。

    5. 获取布局。通过遍历 DOM 及相关元素的计算样式,找到所有元素的几何关系,构建出布局树。

    6. 绘制各元素。

    7. 合成帧。先分层,再组合成帧。合成帧会被传递给 GPU进程 用以展示在屏幕上,优点是非常流畅。

浏览器对事件的处理

在浏览器看来,用户的所有手势都是输入,鼠标滚动,悬置,点击等等都是输入。

事件发生时,浏览器进程会发送事件类型及相应的坐标给渲染进程渲染进程随后找到事件对象并执行所有绑定在其上的相关事件处理函数。

参考资料

Last Updated: 2022/6/30 11:49:42
Contributors: licong96