【第1293期】浏览器之美，你知道多少？
前言
用通俗的语言，结合图片巧妙的结合，让你理解知识无压力。今日早读文章由@longyu分享。
正文从这开始～
小弟初来乍到，路经宝地，希望留下一片云彩。其实我有个宏伟的，并为之付出一生的目标：我要成为现代化一枚最具有气质，最骚气的程序猿。。。
大家好，今日为大家带来‘作为前端应该具备的浏览器知识’。
目录
进程和线程
浏览器多进程架构
浏览器渲染进程多线程
浏览器事件环
进程和线程
很多童鞋对进程和线程区分不清楚，小编也经常傻傻小迷糊。在思考中，对于非科班出身，只要搞清楚两者是做什么的。对于底层的东西，有兴趣的童鞋可以去深究。
计算机的核心是CPU，它承担了所有的计算任务。它就像一座工厂，时刻在运行。
1.XX镇上，新开了一家婚姻介绍所’CPU’。（处对象程序猿的痛~~~呜）
2.婚介所要顺利运行，首先组织架构要清楚。
部门 — 进程
分配办公区域 —CPU分配资源，空间独立
假设当前只有老板一人，兼职每个部门。比如在客户部工作，然而在其他部门的工作必须放下。这就体现了，单个CUP只能运行一个进程。任何时候都这样。
3.随业务的增长，销售部招了几名新员工。
部门的员工—线程。
员工共享资源—共享分配资源
多人协作完成任务。—多个线程完成在进程中执行任务
其实我们打开任务管理器可以看到，进程的cup占有率和内存资源大小。
总之：
（1）进程是cpu分配资源的最小单位；
（2）线程是进程的最小调度单位；
（3）以多进程形式，允许多个任务同时运行；
（4）以多线程形式，允许单个任务分成不同的部分运行；
（5）提供协调机制，一方面防止进程之间和线程之间产生冲突，另一方面允许进程之间和线程之间共享资源
浏览器多进程架构
基于上面我们对进程和线程的理解，来学习浏览器的多层架构。
理解：
浏览器是多进程；
每个tab页面是新开一个进程；
浏览器包括哪些进程:
1.browser进程（主进程）：负责协调和主控，只有一个。
2.第三方插件：每个类型一个进程。
3.GPU进程：3D绘制。
4.render渲染进程：浏览器渲染进程，每个tab页，单独一个进程，互不影响。
浏览器的多进程优势
页面奔溃，浏览器不会奔溃。
插件奔溃，浏览器不会奔溃。
多进程充分利用多核优势。
浏览器性能稳定
浏览器渲染进程多线程
重点来了，对于前端我需要了解的是浏览器内核的多线程。。。
牢记浏览器是多线程。
概念的东西是很空洞的，我们可以用一张图进行总结哈。
接线来我将解释哈，这些线程是如何构成的事件循环机制。
浏览器事件环
js引擎的运行机制分析，由两部分组成：执行栈和队列。
js的代码都在栈中执行，对于代码而言分为同步执行和异步执行。
异步代码只有在同步代码都执行完了之后，才会执行。
上述图说明：
js先将执行栈的代码执行完；
执行代码的过程中，遇到事件，定时器，http请求时，会由相依线程进行监听，等待放入队列中。
当执行栈空闲时，将会从队列中拿出事件一个个循环执行。
事件任务分为：宏任务和微任务
宏任务： 主代码，setTimeout，setInterval，IE支持的setImmediate等
微任务： es6的then，Object.observe(已废弃), MutationObserver
执行顺序：
每次执行完一个宏任务，都回去清除微任务队列。
console.log('进入程序');
setTimeout(() => {
console.log('定时器1')
}, 0)
setTimeout(() => {
Promise.resolve().then(() => {
console.log('then1');
})
}, 0)
Promise.resolve().then(() => {
console.log('then2');
})
// 进入程序
// then2
// 定时器1
// then1注意这里说的是浏览的事件循环，和node的执行方式是不同的。一定要注意分开。
小编今日带来的分享就到这里了。有什么问题欢迎大家多多指教，学术交流不分高低！！
我没有车，也没有房，但是我骚啊” ———— 送给龙老板
关于本文
作者：@longyu
原文：https://juejin.im/post/5b0a085f6fb9a07aa048774e
最后，为你推荐