JavaScript运行机制

1、基础知识:进程与线程

(1)进程:它是CPU资源分配的最小单位 ;是可以独立运行且拥有自己的资源空间的任务程序,eg: 每打开一个软件就会产生一个进程,浏览器每打开一个tab页就会产生一个进程.进程之间是相互独立的.

(2)线程:,线程是CPU调度的最小单位; 建立在进程基础上的一次程序运行单位; 一个进程可以包含多个线程,一个程序中可以同时运行多个不同的线程来执行不同的任务

多进程与多线程:

(1)多进程允许同一个计算机系统中同时运行两个及两个以上的进程,例如打开微信和打开vscode敲代码,两个进程之间不会相互干扰;

(2)多线程:指一个程序中包含多个执行流来执行不同的任务,而这多个不同的执行流是并行的;

2、js是单线程机制:如果JS是多进程的话，那么它可以同时在某个DOM节点上添加内容，又可以删除这个节点，从而导致浏览器不知该以哪个为准。

3浏览器进程:

(1)浏览器进程（Browser Process）：也称为主进程，负责协调和管理其他进程，包括创建、销毁其他进程，处理用户界面、用户输入等。

(2)渲染进程（Renderer Process）：负责页面的渲染和执行 JavaScript 代码。每个标签页通常都有一个对应的全新的渲染进程，这样可以实现多进程的并行处理。

(3)GPU 进程（GPU Process图形处理单元）：负责处理页面中的 GPU 相关操作，例如绘制 3D 效果、进行图像处理等。将这些任务交给独立的 GPU 进程可以提高渲染性能。

(4)插件进程（Plugin Process）：负责运行插件，例如 Flash Player、PDF 阅读器等。由于插件的安全性和稳定性较差，将其放在单独的进程中可以提高浏览器的稳定性。

(5)网络进程（Network Process）：负责处理网络请求，包括发送请求、接收响应等。将网络请求与页面渲染分离，可以提高页面的响应速度

4、前端进程核心—渲染进程—浏览器每打开一个tab页便会产生一个渲染进程(个人有点感觉很不合理,因为每一个进程都是需要CPU分配资源的,如我们在一个标签页打开淘宝页,在另一个标签页也打开同样的淘宝页,会开启两个不同的进程)

渲染进程是一个多线程:前端的页面渲染、JS的执行、事件的循环都在渲染进程中执行;

渲染进程是多线程的:

(1)GUI渲染线程:负责渲染浏览器界面，解析html构建DOM树，解析css生成CSS树，二者合并生成Render树.但是布局和绘制前端页面的GUI 渲染线程通常是单线程的，也就是说只有一个线程来处理整个页面的渲染操作,因此在 GUI 渲染线程中，如果执行了一个长时间运行的 JavaScript 任务，那么整个页面都会被阻塞，用户无法进行任何操作。

(2)JS引擎线程:主要用来执行js代码,js是一门单线程的语言,因为它运行在浏览器的渲染主线程中(即JS引擎线程中),它会按照顺序执行代码.涉及到了事件循环;

在浏览器中，GUI 渲染线程和 JS 引擎线程是互相独立的，它们之间通过任务队列进行通信。当 JavaScript 代码需要更新页面时，会通过任务队列将更新任务传递给 GUI 渲染线程进行处理。GUI 渲染线程则会在下一个渲染帧时，将更新结果呈现在用户的屏幕上。

如何理解JS的异步(并非指异步加载script脚本)—通过事件循环（event loop）机制实现了异步编程

首先js是一种单线程的机制,因为前端代码运行在浏览器中,浏览器的一个标签页便是一个渲染进程,渲染进程(多线程的进程)需要渲染前端页面,渲染进程中包含(1)GUI渲染线程—主要用来解析html,css生成renderTree;渲染进程还包含了(2)js引擎线程(是单线程的),主要用来执行js代码,从上往下执行,如果使用同步的方式,中间的费时操作便会阻塞主线程的执行,从而导致消息队列中很多其他任务无法执行,结果便是(页面无法及时加载);---->出现了事件循环;------也就是说浏览器执行此段代码,遇到了某些费时操作时,浏览器会采用异步的方式来避免,具体做法是当某些任务费时发生时,比如计时器、网络、事件监听,主线程会将此费时任务交给其他线程去处理,自身立即结束当前任务,转而执行后续代码;其他线程处理费时任务时,它是将任务加到消息队列的队尾,然后等待主线程的调度即可;;;那么在这种异步的模式下,浏览器用不阻塞,从而保证了单线程的流畅执行;

微任务:Promise process.nextTick MutationObserver ----MutationObserver 监听 DOM 变化时，其回调函数会被放入微任务队列。

宏任务(W3C标准现在废弃了宏任务的说法):setTimeout setInterval I/O 操作：诸如网络请求、文件读写等 I/O 操作会被推迟到下一个宏任务中执行。UI 渲染：浏览器的 UI 渲染也是一个宏任务

综上:前端页面的解析过程主要是浏览器执行以下几个步骤：

HTML 解析：浏览器首先下载 HTML 文件，然后对 HTML 文件进行解析，将其转化为 DOM 树;

CSS 解析：浏览器接着下载 CSS 文件，并对其进行解析，生成 CSSOM（CSS Object Model）。

Render 树构建：浏览器将 DOM 树和 CSSOM 进行合并，并生成 Render 树。渲染对象是浏览器根据 DOM 元素和 CSS 样式等信息生成的，它包含了元素的位置、尺寸、样式等信息。

布局计算：浏览器对 Render 树进行布局计算，确定每个渲染对象在屏幕上的位置和尺寸。

绘制渲染对象：浏览器最后使用图形库将渲染对象绘制到屏幕上，生成最终的页面。

整个解析过程中，如果遇到 JavaScript 代码，则会暂停解析过程，先执行 JavaScript 代码，等 JavaScript 代码执行完成后，再继续进行解析和渲染。这也是为什么 JavaScript 代码对页面的加载速度和性能有很大影响的原因之一。

总之，前端页面的解析过程主要是浏览器对 HTML、CSS 和 JavaScript 代码进行解析和执行，最终将页面渲染到屏幕上。这个过程是一个复杂的流程，涉及到多种技术和算法，例如 DOM 解析、CSS 解析、布局计算、图形渲染等。