浏览器原理二三事_浏览器每一帧做了什么-CSDN博客

对于简单的网页，一个进程处理多个网页是可行的；但是如果把多个复杂的网页放进一个进程，一个 Tab 页崩溃，将导致同进程的其他页面崩溃，极其影响用户体验
进程之间不共享资源和地址空间，所以使用多个进程，可以避免更多的安全问题；多进程相对于单进程，内存等资源消耗更大，有点空间换时间的意思；这大概也是浏览器中存在多个 Tab 页时共用一个进程的原因吧

2.2 浏览器的五种进程

打开 Google 中的任务管理器（Shift + Esc 或者 Chrome 更多工具 → 任务管理器）

可以看到展现了四种进程：

浏览器主进程
GPU 进程
第三方插件进程
浏览器渲染进程

2.2.1 浏览器主进程（Browser 进程）

只有一个主进程，主要负责：

界面显示
用户交互（前进后退）
子进程管理（创建/销毁其他进程）
将 Renderer 进程得到的内存中的 Bitmap，绘制到用户界面上
提供存储、下载、网络资源管理等

2.2.2 浏览器渲染进程（Renderer 进程）

就是通常所说的浏览器内核，排版引擎 Blink 和 JavaScript 引擎 V8 都运行在该进程中

核心任务：将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页（实现 —— 页面渲染、脚本执行、事件处理等）

出于安全考虑，渲染进程都是运行在沙箱模式下

默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程，互不影响；存在多个标签页时，会自动合并进程

2.2.3 GPU 进程

GPU 的使用初衷是为了实现 3D CSS 的效果

只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制

GPU 进程可以禁用，只有一个 GPU 进程

2.2.4 第三方插件进程

主要是负责插件的运行，每种类型的插件，对应一个进程

因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响

2.2.5 网络进程

主要负责页面的网络资源加载

之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程

2.3 浏览器渲染进程（Renderer 进程）包含的五种线程

前面说过，Renderer 进程的核心任务：将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页（实现 —— 页面渲染、脚本执行、事件处理等）

2.3.1 GUI 渲染线程

主要负责页面的渲染，解析 HTML、CSS，构建 DOM 树，布局和绘制等

当界面需要重绘（Repaint）或由于某种操作引发回流（reflow）时，该线程就会执行

2.3.2 JavaScript 引擎线程

该线程主要负责处理 JavaScript 脚本，执行代码

一个 Tab 页（Renderer进程）中，无论什么时候，都只有一个 JavaScript 线程在运行 JavaScript 程序

该线程与 GUI 渲染线程互斥，当 JavaScript 引擎线程执行 JavaScript 脚本时间过长，将导致页面渲染的阻塞

2.3.3 事件触发线程

用来控制事件循环，将准备好的事件交给 JavaScript 引擎线程执行

事件触发线程不属于 JavaScript 引擎线程，而是属于浏览器（JavaScript 引擎线程自己忙不过来，需要浏览器再开一个线程协助他）

比如 setTimeout 定时器计数结束， ajax 等异步请求成功并触发回调函数，或者用户触发点击事件时，该线程会将整装待发的事件，依次加入到任务队列的队尾，等待 JavaScript 引擎线程的执行

2.3.4 定时器触发线程

负责执行异步定时器一类的函数的线程，如： setTimeout，setInterval

浏览器定时计数器，并不是由 JavaScript 引擎计数的，因为 JavaScript 引擎是单线程的，如果处于阻塞线程状态，就会影响记计时的准确性

2.3.5 异步http请求线程

负责执行异步请求一类的函数的线程，如： Promise，axios，ajax 等

2.4 Chrome 打开一个页面需要启动多少进程？

浏览器从关闭状态进行启动，然后新开 1 个页面，至少需要 1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程，共 4 个进程；

后续再新开标签页，浏览器、网络进程、GPU进程是共享的，不会重新启动；

如果2个页面属于同一站点的话，并且从a页面中打开的b页面，那么他们也会共用一个渲染进程，否则新开一个渲染进程

—— 《浏览器工作原理与实践》

最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。

3. script 标签上的 async、defer

3.1 为什么要使用 async、defer

先来谈一下浏览器的渲染机制：浏览器有 GUI 渲染线程与 JavaScript 引擎线程，这两个线程是互斥的关系

JavaScrip t的加载、解析与执行会阻塞 DOM 的构建。也就是说，在构建 DOM 时，HTML 解析器若遇到了JavaScript，那么它会暂停构建 DOM，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复DOM构建

综上所述，直接使用 script 标签，会阻塞 DOM 渲染；但如果使用带有 async 和 defer 的 script 标签，就会异步请求这些资源，不会阻塞页面渲染

浏览器渲染过程分为：构建DOM -> 构建CSSOM -> 构建渲染树 -> layout布局 -> 绘制

3.2 async、defer 的区别

记忆要点：

defer 有顺序，async 没顺序
defer 在 window.onload 之前，async 都有可能

浅谈script标签中的async和defer - 贾顺名 - 博客园script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染https://www.cnblogs.com/jiasm/p/7683930.html

3.2.1 执行顺序的区别

async 是无顺序的加载，而 defer 是有顺序的加载

async 的执行，并不会按照 script 在页面中的顺序来执行，而是谁先加载完谁执行

defer 的执行，则会按照引入的顺序执行，即便是后面的 script 资源先返回

3.2.2 使用场景的区别

defer 可以用来控制 JavaScript 文件的加载顺序；比如 jqery 和 Bootstrap，因为 Bootstrap 中的 JavaScript 插件依赖于 jqery，所以必须先引入jquery，再引入 Bootstrap 文件

如果你的脚本并不关心页面中的 DOM 元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据，使用 async，如统计、埋点等功能

3.2.3 window.onload 执行顺序的区别

使用 defer 的 script 标签，会在 window.onload 事件之前被执行

使用 async 的 script 标签，对 window.onload 事件没有影响，window.onload 可以在之前或之后执行

4. DOM 事件流（事件执行顺序）

4.1 事件流的基本概念

DOM 同时支持两种事件模型：

捕获型事件流
冒泡型事件流

DOM 事件流的三个阶段：

事件捕获阶段
处于目标阶段
事件冒泡阶段

DOM 事件捕获的具体流程：window➡️document➡️html➡️body➡️目标元素；

DOM 事件冒泡的具体流程：目标元素➡️body➡️html➡️document➡️window；

4.2 事件委托（利用事件冒泡的原理）

事件委托的原理：

当一组元素要添加相同的事件时，可以在父元素上绑定一个事件，利用事件冒泡，达到父元素代理子元素事件
点击子元素，通过 e.target || e.srcElement 可以获取点击的具体子元素

事件委托优点：可以减少事件的注册，节省内存；也可以实现新增对象时，无需再次绑定事件

4.3 addEventListener 的第三个参数

第三个参数默认是 false，表示在事件冒泡阶段调用；

第三个参数值为 true 时，表示在事件捕获阶段调用；

4.4 事件流的执行顺序（先捕获再冒泡）

// 鼠标点击子元素后，打印顺序为
// 父捕获
// 子捕获
// 子冒泡
// 父冒泡

<html>
  <div class="parent">
    <div class="child">子元素</div>
  </div>

  <script>
     let parentDom = document.querySelector('.parent');
     parentDom.addEventListener('click', function () {console.log('父捕获'); }, true)
     parentDom.addEventListener('click', function () {console.log('父冒泡');}, false)

     let childDom = document.querySelector('.child')
     childDom.addEventListener('click', function () {console.log('子捕获');}, true)
     childDom.addEventListener('click', function () {console.log('子冒泡');}, false)
  </script>
</html>

5. 浏览器空闲时间

页面是一帧一帧绘制出来的，一般情况下，设备的屏幕刷新率为 1s 60次，而当 FPS 小于 60 时，会出现一定程度的卡顿现象

5.1 浏览器一帧内做了什么

首先需要处理输入事件，能够让用户得到最早的反馈

接下来是处理定时器，需要检查定时器是否到时间，并执行对应的回调

接下来处理 Begin Frame（开始帧），即每一帧的事件，包括 window.resize、scroll、media、query、change 等

接下来执行请求动画帧 requestAnimationFrame（rAF），即在每次绘制之前，会执行 rAF 回调

紧接着进行 Layout 操作，包括计算布局和更新布局，即这个元素的样式是怎样的，它应该在页面如何展示

接着进行 Paint 操作，得到树中每个节点的尺寸与位置等信息，浏览器针对每个元素进行内容填充

到这时以上的六个阶段都已经完成了，接下来处于空闲阶段（Idle Peroid）

5.2 requestIdleCallback

在空闲阶段（Idle Peroid）时，可以执行 requestIdleCallback 里注册的任务

requestIdleCallback 接受了两个参数：

window.requestIdleCallback(callback, { timeout: 1000 })

1）第一个参数是一个函数，该函数的入参，可以获取：

当前帧的剩余时间
该任务是否超时

window.requestIdleCallback(deadline => {
  // 返回当前帧还剩多少时间供用户使用
  deadline.timeRamining;
  // 返回 callback 任务是否超时
  deadline.didTimeout;
});

2）第二个参数，传入 timeout 参数自定义超时时间，如果到了超时时间，浏览器必须立即执行

// 该函数的执行时间超过1s
function calc() {
  let start = performance.now();
  let sum = 0;
  for (let i = 0; i < 10000; i++) {
    for (let i = 0; i < 10000; i++) {
      sum += Math.random();
    }
  }
  let end = performance.now();
  let totolTime = end - start;
  // 得到该函数的计算用时
  console.log(totolTime, "totolTime");
}

let tasks = [
  () => {
    calc();
    console.log(1);
  },
  () => {
    calc();
    console.log(2);
  },
  () => {
    console.log(3);
  }
];

let work = deadline => {
  console.log(`此帧的剩余时间为: ${deadline.timeRemaining()}`);

  // 如果此帧剩余时间大于0，或者已经到了定义的超时时间（上文定义了timeout时间为1000，到达时间时必须强制执行），且当时存在任务，则直接执行这个任务
  // 如果没有剩余时间，则应该放弃执行任务控制权，把执行权交还给浏览器
  while (
    (deadline.timeRemaining() > 0 || deadline.didTimeout) &&
    tasks.length > 0
  ) {
    let fn = tasks.shift();
    fn();
  }
  // 如果还有未完成的任务，继续调用 requestIdleCallback 申请下一个时间片
  if (tasks.length > 0) {
    window.requestIdleCallback(work, { timeout: 500 });
  }
};

window.requestIdleCallback(work, { timeout: 500 });

打印结果：