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

为了学习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引擎的执行过程（二）