为了学习Promise,困在了浏览器http流程,进程,线程,宏任务,微任务,页面渲染的漩涡当中,不可自拔,
所以查询许多资料,并根据理解,梳理了他们的关系,希望帮忙指正
流程梳理
1.浏览器进程
进程:浏览器一个页面就是新的一个进程,进程是cpu资源分配的最小单位（系统会给它分配内存）;
- Browser进程 (http通讯)
- 第三方插件进程
- GPU进程(加速,3D渲染,一次)
- Renderer进程(新开页面渲染进程)
1.1Browser进程(HTTP请求过程)
1.1HTTP请求过程
- 域名解析
- 发起TCP的三次握手
常见的web server产品有 apache、nginx、IIS、Lighttpd 等
- 拿到域名对应的IP地址之后，浏览器会以一个随机端口（1024 < 端口 < 65535）向服务器的Web server 80端口发起TCP的连接请求。
- CP/IP协议栈，还有可能要经过防火墙的过滤，最终到达WEB程序，最终建立了TCP/IP的连接。
三次握手：
- 客户端–发送带有SYN标志的数据包–一次握手–服务端
- 服务端–发送带有SYN/ACK标志的数据包–二次握手–客户端
- 客户端–发送带有带有ACK标志的数据包–三次握手–服务端
- 建立TCP连接后发起http请求
- 服务器端响应http请求,浏览器得到html代码
- 浏览器处理HTML代码 渲染的主流程
- 浏览器对页面进行渲染呈现给用户
HTTP与HTTPS的区别：
- HTTP 的URL 以[http://]() 开头，而HTTPS 的URL 以[https://]() 开头
- HTTP 是不安全的，而 HTTPS 是安全的
- HTTP 标准端口是80 ，而 HTTPS 的标准端口是443
- 在OSI 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层
- HTTP 无法加密，而HTTPS 对传输的数据进行加密
- HTTP无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书
1.4Renderer进程(浏览器渲染进程)
线程:线程包含在每个进程内,线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）;
- GUI 渲染线程
- JavaScript引擎线程
- 定时触发器线程(宏任务(异步任务))
- 事件触发线程(宏任务(异步任务))
- 异步http请求线程(宏任务(异步任务))
1.4.1GUI 渲染线程
- 解析HTML生成DOM树 – 渲染引擎首先解析HTML文档，生成DOM树
- 构建Render树 – 接下来不管是内联式，外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树，根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree)，
- 布局Render树 – 然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置
- 绘制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)
1.4.2宏任务与微任务
宏任务
定时触发器线程(宏任务(异步任务))
- setTimeout
- setInterval
- setImmediate
- requestAnimationFrame
- 事件触发线程(宏任务(异步任务))
- 异步http请求线程(宏任务(异步任务))
- script方法(宏任务(同步任务))
- new Promise(宏任务(同步任务)) lijizhixing
微任务(异步任务)
由于Es6 和node出现产生的微任务
- Promise.then() catch() finally(),一旦一个pormise有了结果,回调产生一个微任务
- process.nextTick
- MutationObserver
