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

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

流程梳理

1.浏览器进程

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

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

1.1Browser进程(HTTP请求过程)

  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
参考
原文链接:segmentfault.com

上一篇:前端工作1年后的感悟
下一篇:JavaScript继承背后的场景-prototype,__proto__, [[prototype]]

相关推荐

官方社区

扫码加入 JavaScript 社区