【前端浏览器原理】浏览器简介及JavaScript线程

浏览器中的JavaScript线程

一、进程和线程

什么是并行处理

计算机中的并行处理就是同一时刻处理多个任务，比如我们要计算下面这三个表达式的值，并显示出结果

A = 1+2
B = 20/5
C = 7*8

在编写代码的时候，我们可以把这个过程拆分为四个任务：

• 任务1 是计算A=1+2；
• 任务2 是计算B=20/5；
• 任务3 是计算C=7*8；
• 任务4 是显示最后计算的结果

正常情况下程序可以使用单线程来处理，也就是分四步按照顺序分别执行这四个任务。

如果采用多线程，会怎么样呢？我们只需分“两步走”：第一步，使用三个线程同时执行前三个任务；第二步，再执行第四个显示任务。

通过对比分析，你会发现用单线程执行需要四步，而使用多线程只需要两步。因此，使用并行处理能大大提升性能

进程 VS 线程

• 线程和进程是操作系统中的两个概念：
  • 进程（process）：计算机已经运行的程序，是操作系统管理程序的一种方式；
  • 线程（thread）：操作系统能够运行运算调度的最小单位，通常情况下它被包含在进程中；
• 听起来很抽象，这里还是给出我的解释：
  • 进程：我们可以认为，启动一个应用程序，就会默认启动一个进程（也可能是多个进程）；
  • 线程：每一个进程中，都会启动至少一个线程用来执行程序中的代码，这个线程被称之为主线程；
  • 所以我们也可以说进程是线程的容器；
• 再用一个形象的例子解释：
  • 操作系统类似于一个大工厂；
  • 工厂中里有很多车间，这个车间就是进程；
  • 每个车间可能有一个以上的工人在工厂，这个工人就是线程；

一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。

线程：

• 是进程内的一个独立执行单元

• 是程序执行的一个完整流程

• 是CPU的最小的调度单元

一个进程里有很多个线程

在电脑上打开一个软件就相当于打开了一个进程

在浏览器上打开一个新建标签页就相当于打开了一个进程

应用程序必须运行在某个进程的某个线程上

一个进程中至少有一个运行的线程:主线程 -->进程启动后自动创建

多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程来启动和管理的。

操作系统是如何做到同时让多个进程（边听歌、边写代码、边查阅资料）同时工作呢？

• 这是因为CPU的运算速度非常快，它可以快速的在多个进程之间迅速的切换；
• 当我们进程中的线程获取到时间片时，就可以快速执行我们编写的代码；
• 对于用户来说是感受不到这种快速的切换的；

进程和线程之间的关系有以下4个特点

1. 进程中的任意一线程执行出错，都会导致整个进程的崩溃。

我们可以模拟以下场景：

A = 1+2
B = 20/0
C = 7*8

我把上述三个表达式稍作修改，在计算B的值的时候，我把表达式的分母改成0，当线程执行到B = 20/0时，由于分母为0，线程会执行出错，这样就会导致整个进程的崩溃，当然另外两个线程执行的结果也没有了

2. 线程之间共享进程中的数据。

如下图所示，线程之间可以对进程的公共数据进行读写操作。

从上图可以看出，线程1、线程2、线程3分别把执行的结果写入A、B、C中，然后线程2继续从A、B、C中读取数据，用来显示执行结果。

3. 当一个进程关闭之后，操作系统会回收进程所占用的内存。

当一个进程退出时，操作系统会回收该进程所申请的所有资源；即使其中任意线程因为操作不当导致内存泄漏，当进程退出时，这些内存也会被正确回收。

比如之前的IE浏览器，支持很多插件，而这些插件很容易导致内存泄漏，这意味着只要浏览器开着，内存占用就有可能会越来越多，但是当关闭浏览器进程时，这些内存就都会被系统回收掉

4. 进程之间的内容相互隔离。

进程隔离是为保护操作系统中进程互不干扰的技术，每一个进程只能访问自己占有的数据，也就避免出现进程A写入数据到进程B的情况。正是因为进程之间的数据是严格隔离的，所以一个进程如果崩溃了，或者挂起了，是不会影响到其他进程的。如果进程之间需要进行数据的通信，这时候，就需要使用用于进程间通信（IPC）的机制了。

二、单进程浏览器时代

单进程浏览器是指浏览器的所有功能模块都是运⾏在同⼀个进程⾥，这些模块包含了⽹络、插件、JavaScript运⾏环境、渲染引擎和⻚⾯等。其实早在2007年之前，市⾯上浏览器都是单进程的。单进程浏览器的架构如下图所⽰：

问题1：不稳定

早期浏览器需要借助于插件来实现诸如Web视频、Web游戏等各种强⼤的功能，但是插件是最容易出问题的
模块，并且还运⾏在浏览器进程之中，所以⼀个插件的意外崩溃会引起整个浏览器的崩溃。
除了插件之外，渲染引擎模块也是不稳定的，通常⼀些复杂的JavaScript代码就有可能引起渲染引擎模块的
崩溃。和插件⼀样，渲染引擎的崩溃也会导致整个浏览器的崩溃。

问题2：不流畅

从上⾯的“单进程浏览器架构⽰意图”可以看出，所有⻚⾯的渲染模块、JavaScript执⾏环境以及插件都是
运⾏在同⼀个线程中的，这就意味着同⼀时刻只能有⼀个模块可以执⾏。

⽐如，下⾯这个⽆限循环的脚本：

function freeze() {
	while (1) {
		console.log("freeze");
	}
}
freeze();

因为这个脚本是⽆限循环的，所以当其执⾏时，它会独占整个线程，这样导致其他运⾏在该线程中的模块就
没有机会被执⾏。因为浏览器中所有的⻚⾯都运⾏在该线程中，所以这些⻚⾯都没有机会去执⾏任务，这样
就会导致整个浏览器失去响应，变卡顿。

除了上述脚本或者插件会让单进程浏览器变卡顿外，⻚⾯的内存泄漏也是单进程变慢的⼀个重要原因。通常
浏览器的内核都是⾮常复杂的，运⾏⼀个复杂点的⻚⾯再关闭⻚⾯，会存在内存不能完全回收的情况，这样
导致的问题是使⽤时间越⻓，内存占⽤越⾼，浏览器会变得越慢。

问题3：不安全

这⾥依然可以从插件和⻚⾯脚本两个⽅⾯来解释该原因。
插件可以使⽤C/C++等代码编写，通过插件可以获取到操作系统的任意资源，当你在⻚⾯运⾏⼀个插件时也
就意味着这个插件能完全操作你的电脑。如果是个恶意插件，那么它就可以释放病毒、窃取你的账号密码，
引发安全性问题。
⾄于⻚⾯脚本，它可以通过浏览器的漏洞来获取系统权限，这些脚本获取系统权限之后也可以对你的电脑做
⼀些恶意的事情，同样也会引发安全问题。

三、多进程浏览器时代

早期多进程架构

从图中可以看出，Chrome的⻚⾯是运⾏在单独的渲染进程中的，同时⻚⾯⾥的插件也是运⾏在单独的插件
进程之中，⽽进程之间是通过IPC机制进⾏通信（如图中虚线部分）。

我们先看看如何解决不稳定的问题。由于进程是相互隔离的，所以当一个页面或者插件崩溃时，影响到的仅仅是当前的页面进程或者插件进程，并不会影响到浏览器和其他页面，这就完美地解决了页面或者插件的崩溃会导致整个浏览器崩溃，也就是不稳定的问题。

接下来再来看看不流畅的问题是如何解决的。同样，JavaScript也是运行在渲染进程中的，所以即使JavaScript阻塞了渲染进程，影响到的也只是当前的渲染页面，而并不会影响浏览器和其他页面，因为其他页面的脚本是运行在它们自己的渲染进程中的。所以当我们再在Chrome中运行上面那个死循环的脚本时，没有响应的仅仅是当前的页面。

对于内存泄漏的解决方法那就更简单了，因为当关闭一个页面时，整个渲染进程也会被关闭，之后该进程所占用的内存都会被系统回收，这样就轻松解决了浏览器页面的内存泄漏问题。

最后我们再来看看上面的两个安全问题是怎么解决的。采用多进程架构的额外好处是可以使用安全沙箱，你可以把沙箱看成是操作系统给进程上了一把锁，沙箱里面的程序可以运行，但是不能在你的硬盘上写入任何数据，也不能在敏感位置读取任何数据，例如你的文档和桌面。Chrome把插件进程和渲染进程锁在沙箱里面，这样即使在渲染进程或者插件进程里面执行了恶意程序，恶意程序也无法突破沙箱去获取系统权限。

⽬前多进程架构

其实这里的各种进程指的是浏览器一个页面中的各个线程（一个页面相当于一个进程）

从图中可以看出，最新的Chrome浏览器包括：1个浏览器（Browser）主进程、1个 GPU 进程、1个⽹络
（NetWork）进程、多个渲染进程和多个插件进程。

• 浏览器进程。主要负责界⾯显示、⽤户交互、⼦进程管理，同时提供存储等功能。
• 渲染进程。核⼼任务是将 HTML、CSS 和 JavaScript 转换为⽤⼾可以与之交互的⽹⻚，排版引擎Blink和
  JavaScript引擎V8都是运⾏在该进程中，默认情况下，Chrome会为每个Tab标签创建⼀个渲染进程。出
  于安全考虑，渲染进程都是运⾏在沙箱模式下。
• GPU进程。其实，Chrome刚开始发布的时候是没有GPU进程的。⽽GPU的使⽤初衷是为了实现3D CSS的效果，只是随后⽹⻚、Chrome的UI界⾯都选择采⽤GPU来绘制，这使得GPU成为浏览器普遍的需求。最后，Chrome在其多进程架构上也引⼊了GPU进程。
• ⽹络进程。主要负责⻚⾯的⽹络资源加载，之前是作为⼀个模块运⾏在浏览器进程⾥⾯的，直⾄最近才独
  ⽴出来，成为⼀个单独的进程。
• 插件进程。主要是负责插件的运⾏，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃
  不会对浏览器和⻚⾯造成影响。

引出的问题

1.仅仅打开了1个⻚⾯，为什么有4个进程？

因为打开1个⻚⾯⾄少需要1个⽹络进程、1个浏览器进程、1个GPU进程以及1个渲染进程，共4个；如果打开的⻚⾯有运⾏插件的话，还需要再加上1个插件进程。

2.浏览器运行是单线程还是多线程?

都是多线程运行的

3.JS是单线程还是多线程?

JS是单线程运行的 , 但使用H5中的 Web Workers可以多线程运行

只能由一个线程去操作DOM界面

四、定时器引发的思考

<body>
<button id="btn">启动定时器</button>
<script type="text/javascript">
document.getElementById('btn').onclick = function () {
var start = Date.now()
console.log('启动定时器前...')
setTimeout(function () {
 console.log('定时器执行了', Date.now()-start) //定时器并不能保证真正定时执行,一般会延迟一丁点
}, 200)
console.log('启动定时器后...')
// 做一个长时间的工作
for (var i = 0; i < 1000000000; i++) { //会造成定时器延长很长时间
   ...
}
}
</script>
</body>

Ⅰ-定时器真是定时执行的吗?

• 定时器并不能保证真正定时执行
• 一般会延迟一丁点(可以接受), 也有可能延迟很长时间(不能接受)

Ⅱ-定时器回调函数是在分线程执行的吗?

在主线程执行的, JS是单线程的

Ⅲ-定时器是如何实现的?

事件循环模型

五、JS是单线程的

• 我们经常会说JavaScript是单线程的，但是JavaScript的线程应该有自己的容器进程：浏览器或者Node。
• 浏览器是一个进程吗，它里面只有一个线程吗？
  • 目前多数的浏览器其实都是多进程的，当我们打开一个tab页面时就会开启一个新的进程，这是为了防止一个页面卡死而造成所有页面无法响应，整个浏览器需要强制退出；
  • 每个进程中又有很多的线程，其中包括执行JavaScript代码的线程；
• JavaScript的代码执行是在一个单独的线程中执行的：
  • 这就意味着JavaScript的代码，在同一个时刻只能做一件事；
  • 如果这件事是非常耗时的，就意味着当前的线程就会被阻塞；
• 所以真正耗时的操作，实际上并不是由JavaScript线程在执行的：
  • 浏览器的每个进程是多线程的，那么其他线程可以来完成这个耗时的操作；
  • 比如网络请求、定时器，我们只需要在特性的时候执行应该有的回调即可；

如果在执行JavaScript代码的过程中，有异步操作呢？

• 中间我们插入了一个setTimeout的函数调用；
• 这个函数被放到入调用栈中，执行会立即结束，并不会阻塞后续代码的执行；

function sum(num1, num2) {
  return num1 + num2;
}
function bar() {
  return sum(20, 30)
}

setTimeout(() => {
  console.log("setTimeout");
},1000)

const result = bar()

console.log(result);
// 50
// setTimeout

为什么js要用单线程模式, 而不用多线程模式?

1. JavaScript的单线程，与它的用途有关。
2. 作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。
3. 这决定了它只能是单线程，否则会带来很复杂的同步问题
   • 举个栗子:如果我们要实现更新页面上一个dom节点然后删除,用单线程是没问题的
   • 但是如果多线程,当我删除线程先删除了dom节点,更新线程要去更新的时候就会出错