知识点的整理

序言

仿佛有好几个月，都在看一些技术论坛、博客，让我感受到要有自己的知识体系的重要性。这篇文章做为一个长期的文章，慢慢发现Ta的美~~

从浏览器到JS的运行机制

进程与线程

进程：cpu分配内存的最小单位。
线程：cpu调度的最小单位，可进行资源共享。

浏览器

浏览器是多进程的，每开启一个tab页面会开启一个新的进程(有些tab会合并为一个进程)

Browser进程：浏览器的主进程(负责协调、主控)，只有一个
第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时创建
GPU进程：最多一个，用于3D绘制
浏览器渲染进程(内核)：默认每个Tab页面一个进程，互不影响，绘制页面渲染，脚本执行，事件处理等

渲染进程(浏览器内核)

GUI渲染线程：负责渲染浏览器界面，布局，绘制，回流和重排。与JS引擎互斥
JS引擎线程：负责处理js脚本程序【如：V8引擎】。与GUI渲染线程互斥
事件触发线程：归属于浏览器而不是JS引擎，用来控制事件处理。等待事件被触发时，将事件或回调添加到JS引擎线程的任务队列
定时器触发线程：浏览器定时计数器并不是由JS引擎计数的。比如：setInterval与setTimeout
异步http请求线程
事件轮询处理线程

浏览器的渲染流程

render

JS执行时概念

栈：函数调用形成一个个栈帧
堆：对象被分配在一个堆中，即用以表示一个大部分非结构化的内存区域
队列：即任务队列存放异步任务的回调函数
WebAPIs：引擎之外的API，比如：DOM、AJAX、setTimeout等

Event Loop：由js宿主环境(像浏览器)来实现的。js的并发模型正是基于“事件循环”

1、函数入栈，当Stack中执行到异步任务的时候，就将他丢给WebAPIs，接着执行同步任务，直到Stack为空
2、在此期间WebAPIs完成这个事件，把回调函数放入CallbackQueue中等待
3、当执行栈为空时，Event Loop把Callback Queue中的一个任务放入Stack中，回到第一步

执行过程中的任务

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务
异步任务：不进入主线程，而是进入“任务队列”(task queue),只有主线程空闲时，某个异步任务可以执行了，该任务才会进入主线程执行

参考链接

JavaScript运行机制详解：再谈Event loop
从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
 浏览器的工作原理：新式网络浏览器幕后揭秘

最后更新于 2019-03-04 09:17:26 并被添加「你想知道的」标签，已有 2959 位童鞋阅读过。

小胡