首页 > 其他分享 >js运行机制

js运行机制

时间:2023-11-14 10:37:42浏览次数:31  
标签:执行 浏览器 渲染 JS 进程 线程 运行机制 js

区分进程和线程

线程和进程区分不清,是很多新手都会犯的错误,没有关系。这很正常。先看看下面这个形象的比喻:

  • 进程是一个工厂,工厂有它的独立资源
  • 工厂之间相互独立
  • 线程是工厂中的工人,多个工人协作完成任务
  • 工厂内有一个或多个工人
  • 工人之间共享空间

再完善完善概念:

  • 工厂的资源 -> 系统分配的内存(独立的一块内存)
  • 工厂之间的相互独立 -> 进程之间相互独立
  • 多个工人协作完成任务 -> 多个线程在进程中协作完成任务
  • 工厂内有一个或多个工人 -> 一个进程由一个或多个线程组成
  • 工人之间共享空间 -> 同一进程下的各个线程之间共享程序的内存空间(包括代码段、数据集、堆等)

然后再巩固下:

如果是windows电脑中,可以打开任务管理器,可以看到有一个后台进程列表。对,那里就是查看进程的地方,而且可以看到每个进程的内存资源信息以及cpu占有率。

 

 

进程

所以,应该更容易理解了:进程是cpu资源分配的最小单位(系统会给它分配内存)

最后,再用较为官方的术语描述一遍:

  • 进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位)
  • 线程是cpu调度的最小单位(线程是建立在进程的基础上的一次程序运行单位,一个进程中可以有多个线程)

-tips

  • 不同进程之间也可以通信,不过代价较大
  • 现在,一般通用的叫法:单线程与多线程,都是指在一个进程内的单和多。(所以核心还是得属于一个进程才行)
浏览器是多进程的

理解了进程与线程了区别后,接下来对浏览器进行一定程度上的认识:(先看下简化理解)

浏览器是多进程的
浏览器之所以能够运行,是因为系统给它的进程分配了资源(cpu、内存)
简单点理解,每打开一个Tab页,就相当于创建了一个独立的浏览器进程。

关于以上几点的验证,请再第一张图:

 

 

进程

图中打开了 Chrome浏览器的多个标签页,然后可以在 Chrome的任务管理器中看到有多个进程(分别是每一个Tab页面有一个独立的进程,以及一个主进程)。 感兴趣的可以自行尝试下,如果再多打开一个Tab页,进程正常会+1以上

注意:在这里浏览器应该也有自己的优化机制,有时候打开多个tab页后,可以在Chrome任务管理器中看到,有些进程被合并了 (所以每一个Tab标签对应一个进程并不一定是绝对的)

浏览器都包含哪些进程?

知道了浏览器是多进程后,再来看看它到底包含哪些进程:(为了简化理解,仅列举主要进程)

1.Browser进程:浏览器的主进程(负责协调、主控),只有一个。作用有

  • 负责浏览器界面显示,与用户交互。如前进,后退等
  • 负责各个页面的管理,创建和销毁其他进程
  • 将Renderer进程得到的内存中的Bitmap,绘制到用户界面上
  • 网络资源的管理,下载等
    2.第三方插件进程:每种类型的插件对应一个进程,仅当使用该插件时才创建 3.GPU进程:最多一个,用于3D绘制等 4.浏览器渲染进程(浏览器内核)(Renderer进程,内部是多线程的):默认每个Tab页面一个进程,互不影响。主要作用为

强化记忆:在浏览器中打开一个网页相当于新起了一个进程(进程内有自己的多线程)

当然,浏览器有时会将多个进程合并(譬如打开多个空白标签页后,会发现多个空白标签页被合并成了一个进程),如图

 

 

多个空白页

另外,可以通过Chrome的 更多工具 -> 任务管理器自行验证

浏览器多进程的优势

相比于单进程浏览器,多进程有如下优点:

  • 避免单个page crash影响整个浏览器
  • 避免第三方插件crash影响整个浏览器
  • 多进程充分利用多核优势
  • 方便使用沙盒模型隔离插件等进程,提高浏览器稳定性

简单点理解:如果浏览器是单进程,那么某个Tab页崩溃了,就影响了整个浏览器,体验有多差;同理如果是单进程,插件崩溃了也会影响整个浏览器;而且多进程还有其它的诸多优势。。。

当然,内存等资源消耗也会更大,有点空间换时间的意思。

重点是浏览器内核(渲染进程)

重点来了,我们可以看到,上面提到了这么多的进程,那么,对于普通的前端操作来说,最终要的是什么呢?答案是渲染进程

可以这样理解,页面的渲染,JS的执行,事件的循环,都在这个进程内进行。接下来重点分析这个进程

请牢记,浏览器的渲染进程是多线程的(这点如果不理解,请回头看进程和线程的区分)

终于到了线程这个概念了

标签:执行,浏览器,渲染,JS,进程,线程,运行机制,js
From: https://www.cnblogs.com/zha-hdlxdl/p/17831036.html

相关文章

  • vuejs3.0 从入门到精通——Pinia——Store 是什么?
    Pinia——Store是什么?https://pinia.vuejs.org/zh/getting-started.html#what-is-a-store一、Store是什么? Store(如Pinia)是一个保存状态和业务逻辑的实体,它并不与你的组件树绑定。换句话说,它承载着全局状态。它有点像一个永远存在的组件,每个组件都可以读取和写入它。......
  • js实现大文件分片上传
    简单的实现一个分片上传//设置分片大小(大小根据需求调整)constCHUNK_SIZE=1024*1024;//1MB//选择文件并切割成分片constfileInput=document.getElementById('file-input');constchunks=[];letcurrentChunkIndex=0;fileInput.addEventListener('change',hand......
  • js---判断用户是否在浏览当前页面
    最近遇到一个需求,需要判断用户是否在当前页面,只有用户在当前页面才可以播放视频,如果切换到其他窗口就要将视频暂停掉,避免学生刷课程,以下是具体的代码:<scripttype="text/javascript"src="js/jquery-1.8.3.min.js"></script><scripttype="text/javascript">varindex=0,ti......
  • 来来来,一文让你读懂Cocos Creator如何读写JSON文件
    前言在游戏开发过程中,读取配置文件是必不可少的,而使用JSON做配置文件又比较常见,本文重点给大家讲述如何在CocosCreator开发中读取和解析JSON数据文件以及如何写JSON文件。一、JSON简介1.什么是JSONJSON的英文全称是JavaScriptObjectNotation,即JavaScript对象表示法。2.J......
  • Python Object of type float32 is not JSON serializable
    前言使用json.dumps(result)对数据转JSON数据出现错误:TypeError:Objectoftypefloat32isnotJSONserializable数据中存在的float32数据是numpy格式的数据,Python内置的float类型可以写入JSON中,但是numpy的float32类型数据不能写入JSON,所以应将numpy.flo......
  • utils.js
    //获取连接参数值getUrlParams(name){varreg=newRegExp('(^|&)'+name+'=([^&]*)(&|$)','i')varr=window.location.search.substr(1).match(reg)if(r!=null){retur......
  • js实现分割上传大文件
    本文实例介绍了js上传文件操作,分享给大家供大家参考,具体内容如下<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">&l......
  • Newtonsoft.Json 入门介绍
    本人是C#小白,这里摘抄并整理了两位大神的文章:Newtonsoft.Json笔记-JToken、JObject、JArray详解Json基于类Newtonsoft.Json.Linq.JToken的应用简介 简单介绍如何使用Newtonsoft.Json类库和操作Json对象,这里主要介绍LinqtoJson类。Newtonsoft.Json封装类实现了JToken,直......
  • vuejs3.0 从入门到精通——Vuex 4.x —— Getter
    Vuex4.x——Getterhttps://vuex.vuejs.org/zh/guide/getters.html 有时候我们需要从store中的state中派生出一些状态,例如对列表进行过滤并计数:computed:{doneTodosCount(){returnthis.$store.state.todos.filter(todo=>todo.done).length}} 如......
  • 使用PageHelper.startPage时 net.sf.jsqlparser.parser.ParseException: Encountered
    使用PageHelper.startPage时net.sf.jsqlparser.parser.ParseException:Encountered解决方案对比代码:原来的写法:PageHelper.startPage(page,size,order);List<xxx>list=xxxMapperExt.selectxxx(id,type);修改之后:PageHelper.startPage(page,size);List<xxx>list=xxxM......