浏览器的进程和线程相关

执器
105 阅读3分钟

组成

  • 浏览器主进程：负责标签页外的内容(地址栏，前进后退、存储等)
  • GUP进程：用于渲染 CSS 3D
  • 网络进程：用于发送和接收网络请求
  • 多个渲染进程：一般一个页签对应一个渲染进程，若多个页签基于同一站点（可以使用同一进程），页签内用iframe（相同站点可以共用同一渲染进程、也可以新建一个单独的渲染进程）
  • 多个插件进程

渲染进程

渲染进程有多个线程

组成

  • GUI渲染线程：用于解析html css，构建Dom树、CSSOM树、绘制、布局（与javaScript线程互斥）

    JS线程和GUI线程都是单线程

  • JS线程：解析和执行JS，处理页面中用户的交互，以及操作DOM树、CSS样式树。

    为什么js是单线程

    JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？还有人说js还有Worker线程，对的，为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程是完 全受主线程控制的，而且不得操作DOM

    避免GUI线程和JavaScript线程的互斥问题，开发人员可以采取一些策略

    • 使用promise/async await 等异步编程技术将代码改为非阻塞执行。
    • 使用Web Workers等多线程技术来将计算密集型任务放在单独的线程中执行，避免阻塞JavaScript线程。

  • 计时器线程：setInterVal和setTimeOut，目的是防止js线程阻塞干扰到定时器的计数。

  • 异步http请求进程

  • 事件进程

浏览器的渲染流程（页面从输入url到渲染的过程）

获取资源过程

  • 解析url->对输入搜索字符使用默认搜索引擎搜索/对输入的地址进行解析（DNS查找ip地址）
  • 是否命中强缓存策略，命中且缓存资源未过期（第一次请求中响应头中设置的（cache-contral:max-age或者Expires）过期时间）则使用缓存资源。然后到渲染页面部分
  • 没有强缓存，tcp三次握手、建立服务端的连接，发送请求
  • （命中协商缓存）请求头中有if-none-match 或者if-last-Modified;
  • 服务端判断资源是否有更新、无返回304 使用缓存资源，有：返回响应数据，更新协商缓存

渲染过程

  • 浏览器（GUI渲染进程）在解析 HTML 时会生成 DOM 树，并在遇到外部 CSS 文件时，会解析并生成 CSSOM 树
  • 遇到script 标签 会根据下面顺序执行
     <script></script>
    <!--  默认的script标签 -->
    <!-- 加载和执行都会阻塞html的解析 -->
    <script async></script>
    <!-- 加载是异步的不会阻止html的解析 -->
    <!-- 加载完成后立即执行，js线程与GUI线程互斥，阻塞html的加载 -->
    <script defer></script>
    <!-- 异步加载，等html解析完成后再执行 -->

GUI 线程是负责解析和渲染 HTML 文档的主线程，当遇到外部 CSS 文件时，GUI 线程会发起网络请求，加载 CSS 文件。CSS 文件加载完成后，GUI 线程会暂停解析 HTML，将 CSS 文件解析成 CSSOM 树，并将其与 DOM 树合并成一棵渲染树。渲染树是由 DOM 树和 CSSOM 树共同构成的，它是用于渲染页面的最终数据结构。

  • 构建渲染树：将 DOM 树和 CSSOM 树结合，生成渲染树(Render Tree)；

  • 布局渲染树：根据生成的渲染树，生成布局 (Layout) (这是一次回流)，得到节点的几何信息（位置，大小等）；

  • 绘制渲染树：根据渲染树以及回流得到的几何信息，进行绘制 (Painting) (这是一次重绘)，绘制完毕后进行 Display 展示。

  • 若没有请求、过一段时间、tcp四次挥手 断开连接

avatar
文章
阅读
粉丝