前端需要懂进程和线程么?

前言

作为一个前端我为什么要了解进程和线程,这对我有啥用呢?我一个前端还要学习这些么?能不能不要卷了,你把前端都卷死了。 咳咳,大家克制一下,这节内容是帮助你理解前端的,其实前端在学习的过程中也会接触到进程和线程,我们不妨问自己以下几个问题

  • 浏览器是单进程还是多进程?
  • 为什么js是单线程的?

进程

一个进程就是一个程序的运行实例。

启动一个程序的时候,操作系统会为该程序创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,我们把这样的一个运行环境叫进程
进程是拥有自己的资源(内存等等),而线程不拥有资源,只是能使用资源。

进程就好比火车

线程

线程,作为进程的一部分,扮演的角色就是怎么利用中央处理器去运行代码。这其中牵扯到的最重要资源的是中央处理器和其中的寄存器,和线程的栈(stack)。这里想强调的是,线程关注的是中央处理器的运行,而不是内存等资源的管理。

线程就好比火车的车厢

进程VS线程

  1. 线程在进程下运行,这就好比单纯的车厢是无法运营的

2. 一个进程可以包含多个线程,这就好比一个进程可以有多个车厢

  1. 同进程不同线程数据易共享,这就好比我从a车厢换到b车厢,很容易换
  1. 进程中一个线程如果挂掉,将导致整个进程都挂掉,这就好比如果一个车厢着火了,可能整个火车都受影响
  1. 当一个进程关闭之后,操作系统会回收进程所占用的内存。这就好比如果火车行驶到终点站以后,火车停了,那么你这条线路就被回收了

  2. 进程之间的内容相互隔离。这就好比两个火车之间是相互隔离的

浏览器是单进程还是多进程呢?

这个主要由两点来决定的

  • 进程和线程的区别,也就是我们上面讲的那些
  • 浏览器的插件,尤其是早期的时候像一些web视频,web游戏等这些强大的功能,都是使用插件来支持的

所以接下来我们先来看看浏览器的缺点是啥

单进程浏览器缺点

  1. 不稳定(进程vs线程决定): 进程中一个线程如果挂掉,将导致整个进程都挂掉
  2. 不流畅(插件决定):

从上面的'单进程浏览器'示意图可以看出,页面渲染,javascript环境,插件等都在一个线程里面,这就会导致,如果此线程中有什么任务被卡住了,比如说死循环,这是我们常见的,那么像插件那些功能就不能执行了(这样子你一个页面出问题,其他页面都会卡死,现在只是最多一个页面卡死)

  1. 不安全(插件决定): 早期的插件都是用C/C++来写的,他们可以获取电脑的任何资源,如果要做一些窃取文件,或者病毒的事情,还是很可怕的

多进程浏览器

所以为了解决上面的问题,现在的浏览器基本上都是多进程的,因为多进程之间的内容是相互隔离的,现在每一个页面就是一个进程,插件也单独出来一个进程,这就解决了不稳定和不流畅的问题,至于不安全,因为多进程可以使用安全沙箱,来保证隔离

为什么js是单线程的

这个我们需要看一下js的用途,js在浏览器中主要用于用户交互和操作dom,如果设计为多线程的话可能会加重程序的复杂性。举例来说,如果一个线程用来修改dom,而另一个线程用来删除dom,那这个时候浏览器就很懵逼,到底以哪个为准呢?

而且js当时被设计出来的时候主要考虑的是简单实用,当时连继承都没有,更别提设计成多线程了

总结

今天我们主要讲了以下内容

  1. 什么是进程?一个进程就是一个程序的实例,千万不能说程序就是进程,这是两个概念,而且一个程序可能是多进程。进程报错内存,运行环境等,线程不包括这些
  2. 什么是线程?线程就是怎么利用CPU去运行代码,所以CPU里面跑的就是线程,而不是进程。
  3. 进程和线程的区别,这里我们用车厢进行比喻,方便记忆
  4. 为什么浏览器是多进程的?讲了单进程的缺点
  5. 讲了为什么js是单线程的

参考

相关推荐
小政爱学习!19 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。25 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼31 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093334 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0011 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax