从浏览器多进程角度解析输入url到浏览器渲染中间后发生了什么

从浏览器进程角度
1. 首先由 Browser 进程(Process) 接管处理
    1.1.1 它的 UI 线程(thread) 控制浏览器上的按钮及输入框；
    1.1.2 它的 network thread 处理网络请求，从网上获取数据；
    1.1.3 它的 storage thread 控制文件等的访问
    
    1.2.1 UI thread 判断用户输入的是 URL 还是 query，若是 URL 则通知 network thread 获取网页内容
    
    1.3.1 netork thread 会执行 DNS 查询，随后为请求建立 TLS 链接
    1.3.2 当请求响应返回的时候， network thread 会根据 Content-Type 以及 MIME type sniffing 判断内容的格式
    1.3.3 若为 HTML 则将这些数据传递给 renderer process进程，如果是 zip 或其他文件，则会把相关数据传输给下载管理器
    1.3.4 Safe Browing 检查也会在此时触发，如果域名或者请求内容匹配到已知的恶意站点， network thread 会展示一个警告页。此外 CORB 检测也会触发，确保敏感数据不会被传递给渲染进程
    
    1.4.1 查找渲染进程，当上述检查完成， network thread 会通知 UI thread数据已经准备好，UI thread 会查找到一个 renderer process 进行网页的渲染。
    
    1.5.1 经过上述步骤，数据以及渲染进程都可用了， Browser Process 会给 Render Process 发送 IPC 消息来确认导航，一旦 Browser Process 收到 Renderer Process 的渲染确认消息，导航结束，页面加载开始
    1.5.2 此时，地址栏会更新，展示出新页面的网页信息，history tab 会更新，这些信息会存放在硬盘中以便关闭 tab 或者窗口恢复
    
    1.6.1 一旦导航被确认，Renderer Process 会使用相关资源渲染页面，渲染结束(页面内的所有页面，包括 iframe 都触发了 onload时)，会发送 IPC 信号给 Browser Process ，UI thread 会停止展示 tab 中的spinner
    
2. Renderer Process 是如何工作的
    2.1.1 主线程        Main thread
        负责解析浏览器页面，解析html，js和css，构建dom和render树，布局绘制，重绘和回流等。
        由于GUI线程与js线程是互斥的，因此两者可看作共享一个线程。
    2.1.2 合成器线程    Compositor thread
        合成线程。合成是针对layer tree的。
        main thread得到layout tree后创建layer tree和paint order
        然后commit到compositor thread。
        compositor thread将layers合并并分tiles，送到raster thread。

        raster后保存在GPU memory的tile的bitmap和该bitmap对应的网页位置组成一个Draw quads。
        A collection of draw quads成为一个Compositor frame。
        Compositor frame最后会通过IPC发送到浏览器进程，通过GPU显示到屏幕。
    2.1.3 工作线程      Worder thread  
        事件触发线程 + 定时触发器线程 + 异步 HTTP 请求线程 + web works 等用户执行耗时任务的线程
    2.1.4 光栅线程      Raster thread
        将tiles光栅化成bitmap，保存到GPU memory。

    2.2.1 构建 DOM：主线程会解析文本字符串为 DOM ，渲染html为 DOM 的方法由 HTML Standard 定义
    2.2.2 加载次级资源：从网络或者cache中获取 图片、css、js等额外的资源，通过 Browser Process 中的 network thread 进行相关资源的下载
    2.2.3 JS的下载与执行：当遇到'<script>'标签时，渲染进程会停止解析 HTML ，去加载、解析、执行JS文件，遇到async(异步，加载完成后立即执行，无序)、defer(异步，待HTML解析完后执行)
    2.2.4 样式计算：主线程会基于CSS选择器解析CSS后去每一个节点的最终计算样式值
    2.2.5 获取布局：遍历DOM树和CSS树，主线程会构建出包含每个元素的Render树，display:none 不会出现在Render树上，伪元素(::before / ::after)不会出现在DOM树上，但是在Render树上是可见的
    2.2.6 绘制各个元素：主线程遍历布局树以创建绘制记录
    2.2.7 合成帧：主要由 Compositor 线程完成
        主线程会遍历布局树来创建层树(Layer Tree)，添加了`will-change`CSS属性的元素会被单独看做一层
        一旦层数被创建，渲染顺序确定，主线程就会将这些信息通知给合成器线程，合成器线程会栅格化每一层，合成器会将每一层发送到 Raster Thread 栅格线程，栅格线程会栅格化每一层并存储到GPU显存中。
        一旦 layer 被光栅化，合成器线程会收集它们用以创建合成帧
        合成帧随后会通过 IPC 消息传递给浏览器进程
        合成器的优点在于：它的工作无关主线程，不需要等待样式计算或者JS执行，所以合成器相关的动画最流畅