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

i_garfileo 发布于2019-08-26 10:14 / 1135人阅读

摘要：为了学习困在了浏览器流程进程线程宏任务微任务页面渲染的漩涡当中不可自拔所以查询许多资料并根据理解梳理了他们的关系希望帮忙指正流程梳理浏览器进程进程浏览器一个页面就是新的一个进程进程是资源分配的最小单位系统会给它分配内存进程通讯第三方插件进程

为了学习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

参考

浅析浏览器渲染原理

完整的http流程

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理[](https://juejin.im/post/5a6547...

JavaScipt 中的事件循环(event loop)，以及微任务和宏任务的概念

https://juejin.im/post/5b73d7a6518825610072b42b#heading-3

js引擎的执行过程（二）

GPU云服务器云服务器线上课程python docker离线任务深度学习与理解定时任务与触发任务

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105830.html

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

摘要：如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程浏览器内核多线程单线程运行机制的区别。因此准备梳理这块知识点，结合已有的认知，基于网上的大量参考资料，从浏览器多进程到单线程，将引擎的运行机制系统的梳理一遍。前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。 ----------超长文+多图预警，需要花费不少时间。---------- 如果看完本文后，还...

wanghui 2019-08-22 13:56 评论0 收藏0
前端面试--浏览器

摘要：打开一个网页，看到服务器返回给客户端浏览器的各种文件类型图片构建浏览器会遵守一套步骤将文件转换为树。因为浏览器有渲染线程与引擎线程，为了防止渲染出现不可预期的结果，这两个线程是互斥的关系。 1. 浏览器架构用户界面主进程内核渲染引擎 JS 引擎执行栈事件触发线程消息队列微任务宏任务网络异步线程定时器线程 2. 从输入 url 到页面展示...

bigdevil_s 2019-08-23 17:20 评论0 收藏0
setTimeout&Promise&Async之间的爱恨情仇

摘要：但是提出标准，允许脚本创建多个线程，但是子线程完全受主线程控制。只是将事件插入了任务队列，必须等到当前代码执行栈执行完，主线程才会去执行它指定的回调函数。之后全局上下文进入函数调用栈。 setTimeout 一、setTimeout 初现定义：setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。语法： setTimeout(code, millisec...

Half 2019-08-23 15:31 评论0 收藏0
深入理解JavaScript运行机制

摘要：换句话说当一个异步过程调用发出后，调用者不会立刻得到结果，而是调用发出后，被调用者通过状态通知或回调函数处理这个调用。 JavaScript单线程机制 JavaScript的一个语言特性（也是这门语言的核心）就是单线程。什么是单线程呢？简单地说就是同一时间只能做一件事，当有多个任务时，只能按照一个顺序一个完成了再执行下一个为什么JS是单线程的呢？ JS最初被设计用在浏览器中，作为...

phodal 2019-08-22 13:55 评论0 收藏0