乐趣区

进线程微宏任务与http通讯串联理解

jiezi

为了学习 Promise, 困在了浏览器 http 流程, 进程, 线程, 宏任务, 微任务, 页面渲染的漩涡当中, 不可自拔,
所以查询许多资料, 并根据理解, 梳理了他们的关系, 希望帮忙指正

流程梳理

1. 浏览器进程

进程:浏览器一个页面就是新的一个进程, 进程是 cpu 资源分配的最小单位（系统会给它分配内存）;

  1. Browser 进程 (http 通讯)
  2. 第三方插件进程
  3. GPU 进程(加速,3D 渲染, 一次)
  4. Renderer 进程(新开页面渲染进程)

1.1Browser 进程(HTTP 请求过程)

1.1HTTP 请求过程

  1. 域名解析
  2. 发起 TCP 的三次握手

常见的 web server 产品有 apache、nginx、IIS、Lighttpd 等

  • 拿到域名对应的 IP 地址之后，浏览器会以一个随机端口（1024 < 端口 < 65535）向服务器的 Web server 80 端口发起 TCP 的连接请求。
  • CP/IP 协议栈，还有可能要经过防火墙的过滤，最终到达 WEB 程序，最终建立了 TCP/IP 的连接。

 三次握手：

  • 客户端–发送带有 SYN 标志的数据包–一次握手–服务端
  • 服务端–发送带有 SYN/ACK 标志的数据包–二次握手–客户端
  • 客户端–发送带有带有 ACK 标志的数据包–三次握手–服务端
  1. 建立 TCP 连接后发起 http 请求
  2. 服务器端响应 http 请求, 浏览器得到 html 代码
  3. 浏览器处理 HTML 代码 渲染的主流程
  4. 浏览器对页面进行渲染呈现给用户

HTTP 与 HTTPS 的区别：

  1. HTTP 的 URL 以[http://]() 开头，而 HTTPS 的 URL 以[https://]() 开头
  2. HTTP 是不安全的，而 HTTPS 是安全的
  3. HTTP 标准端口是 80，而 HTTPS 的标准端口是 443
  4. 在 OSI 网络模型中，HTTP 工作于应用层，而 HTTPS 的安全传输机制工作在传输层
  5. HTTP 无法加密，而 HTTPS 对传输的数据进行加密
  6. HTTP 无需证书，而 HTTPS 需要 CA 机构 wosign 的颁发的 SSL 证书

1.4Renderer 进程(浏览器渲染进程)

线程:线程包含在每个进程内, 线程是 cpu 调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）;

  1. GUI 渲染线程
  2. JavaScript 引擎线程
  3. 定时触发器线程(宏任务(异步任务))
  4. 事件触发线程(宏任务(异步任务))
  5. 异步 http 请求线程(宏任务(异步任务))

1.4.1GUI 渲染线程

  1. 解析 HTML 生成 DOM 树 – 渲染引擎首先解析 HTML 文档，生成 DOM 树
  2. 构建 Render 树 – 接下来不管是内联式，外联式还是嵌入式引入的 CSS 样式会被解析生成 CSSOM 树，根据 DOM 树与 CSSOM 树生成另外一棵用于渲染的树 - 渲染树(Render tree)，
  3. 布局 Render 树 – 然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置
  4. 绘制 Render 树 – 最后遍历渲染树并用 UI 后端层将每一个节点绘制出来

GUI 渲染线程与 JS 引擎线程互斥

由于 JavaScript 是可操纵 DOM 的，如果在修改这些元素属性同时渲染界面（即 JS 线程和 UI 线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了。
因此为了防止渲染出现不可预期的结果，浏览器设置 GUI 渲染线程与 JS 引擎为互斥的关系，当 JS 引擎执行时 GUI 线程会被挂起，
GUI 更新则会被保存在一个 队列中 等到 JS 引擎线程空闲时立即被执行。

1.4.2 JavaScript 引擎线程(主线程执行栈)

永远只有 JS 引擎线程在执行 JS 脚本程序,
也称为 JS 内核，负责解析执行 Javascript 脚本程序的主线程（例如 V8 引擎）
只能在 JavaScript 引擎线程 (主线程执行栈) 执行js 脚本

1.4.2 js 引擎执行顺序

  1. 宏任务 (同步任务) 直接执行, 其他线程先进入任务队列等待执行
  2. 然后任务队列中先执行 微任务(只有异步任务)
  3. 再执行 宏任务 (异步任务)(如果有任务内还包含 宏任务(同步任务), 继续依此执行 1)

1.4.2 宏任务与微任务

宏任务

  • 定时触发器线程 ( 宏任务(异步任务))

    • setTimeout
    • setInterval
    • setImmediate
    • requestAnimationFrame
  • 事件触发线程 ( 宏任务(异步任务))
  • 异步 http 请求线程 ( 宏任务(异步任务))
  • script 方法 ( 宏任务(同步任务))
  • new Promise(宏任务(同步任务)) lijizhixing 

微任务(异步任务)

由于 Es6 和 node 出现产生的微任务

  • Promise.then() catch() finally(), 一旦一个 pormise 有了结果, 回调产生一个微任务
  • process.nextTick
  • MutationObserver

参考

  • 浅析浏览器渲染原理
  • 完整的 http 流程
  • 从浏览器多进程到 JS 单线程，JS 运行机制最全面的一次梳理[](https://juejin.im/post/5a6547…
  • JavaScipt 中的事件循环(event loop)，以及微任务 和宏任务的概念
  • https://juejin.im/post/5b73d7a6518825610072b42b#heading-3
  • js 引擎的执行过程（二）
退出移动版