【第1293期】浏览器之美，你知道多少？

前言

用通俗的语言，结合图片巧妙的结合，让你理解知识无压力。今日早读文章由@longyu分享。

正文从这开始～

小弟初来乍到，路经宝地，希望留下一片云彩。其实我有个宏伟的，并为之付出一生的目标：我要成为现代化一枚最具有气质，最骚气的程序猿。。。

大家好，今日为大家带来‘作为前端应该具备的浏览器知识’。

目录

• 进程和线程

• 浏览器多进程架构

• 浏览器渲染进程多线程

• 浏览器事件环

进程和线程

很多童鞋对进程和线程区分不清楚，小编也经常傻傻小迷糊。在思考中，对于非科班出身，只要搞清楚两者是做什么的。对于底层的东西，有兴趣的童鞋可以去深究。

计算机的核心是CPU，它承担了所有的计算任务。它就像一座工厂，时刻在运行。

1.XX镇上，新开了一家婚姻介绍所’CPU’。（处对象程序猿的痛~~~呜）

2.婚介所要顺利运行，首先组织架构要清楚。

部门 — 进程

分配办公区域 —CPU分配资源，空间独立

假设当前只有老板一人，兼职每个部门。比如在客户部工作，然而在其他部门的工作必须放下。这就体现了，单个CUP只能运行一个进程。任何时候都这样。

3.随业务的增长，销售部招了几名新员工。

部门的员工—线程。

员工共享资源—共享分配资源

多人协作完成任务。—多个线程完成在进程中执行任务

其实我们打开任务管理器可以看到，进程的cup占有率和内存资源大小。

总之：

（1）进程是cpu分配资源的最小单位；

（2）线程是进程的最小调度单位；

（3）以多进程形式，允许多个任务同时运行；

（4）以多线程形式，允许单个任务分成不同的部分运行；

（5）提供协调机制，一方面防止进程之间和线程之间产生冲突，另一方面允许进程之间和线程之间共享资源

浏览器多进程架构

基于上面我们对进程和线程的理解，来学习浏览器的多层架构。

理解：

1. 浏览器是多进程；

2. 每个tab页面是新开一个进程；

浏览器包括哪些进程:

1.browser进程（主进程）：负责协调和主控，只有一个。

2.第三方插件：每个类型一个进程。

3.GPU进程：3D绘制。

4.render渲染进程：浏览器渲染进程，每个tab页，单独一个进程，互不影响。

浏览器的多进程优势

• 页面奔溃，浏览器不会奔溃。

• 插件奔溃，浏览器不会奔溃。

• 多进程充分利用多核优势。

• 浏览器性能稳定

浏览器渲染进程多线程

重点来了，对于前端我需要了解的是浏览器内核的多线程。。。

牢记浏览器是多线程。

概念的东西是很空洞的，我们可以用一张图进行总结哈。

接线来我将解释哈，这些线程是如何构成的事件循环机制。

浏览器事件环

js引擎的运行机制分析，由两部分组成：执行栈和队列。

js的代码都在栈中执行，对于代码而言分为同步执行和异步执行。

异步代码只有在同步代码都执行完了之后，才会执行。

上述图说明：

1. js先将执行栈的代码执行完；

2. 执行代码的过程中，遇到事件，定时器，http请求时，会由相依线程进行监听，等待放入队列中。

3. 当执行栈空闲时，将会从队列中拿出事件一个个循环执行。

事件任务分为：宏任务和微任务

宏任务： 主代码，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

最后，为你推荐