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

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

从浏览器进程角度
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的下载与执行:当遇到'
                    
                    

你可能感兴趣的:(前端)