JS执行过程学习整理

用户7987246211528
169 阅读9分钟

js引擎：v8解析js过程

V8是Google开发的JavaScript引擎，用于解析和执行JavaScript代码。

它是一款高效的引擎，被广泛用于Chrome浏览器和Node.js等JavaScript运行环境中。

V8解析和执行JavaScript代码的过程如下：

  1. 代码解析：当JavaScript代码被传递给V8时，它会首先进行词法分析和语法分析，生成抽象语法树（AST）和字节码（bytecode）。解析过程中，V8会识别代码中的变量、函数、对象等，并将它们存储在堆中。
  2. 编译器优化：一旦生成了字节码后，V8的编译器会对其中的代码进行优化。编译器使用一系列算法来分析代码，并对其进行优化，以提高执行速度和内存使用效率。优化算法包括常量折叠、死代码删除、内联函数等。
  3. 执行：一旦代码被解析和优化后，V8就会开始执行它。在执行过程中，V8使用了一些技术来提高效率，如缓存、JIT编译器、并发标记和清除垃圾回收等。
  4. 垃圾回收：在执行结束后，V8会对内存进行垃圾回收。V8使用了一种基于标记和清除的垃圾回收算法，即在堆中标记不再被引用的对象，并将它们清除出内存。同时，V8还支持增量垃圾回收和预处理垃圾回收，以优化垃圾回收效率。 总体来说，V8解析和执行JavaScript代码的速度非常快，并且在效率和垃圾回收方面都做了很多优化。这也使得它成为了Web开发中最受欢迎的JavaScript引擎之一。

js执行过程

  1. 解析代码：浏览器在执行JavaScript代码之前，需要先将代码解析成抽象语法树（AST）和字节码。
  2. 创建执行环境：每个JavaScript代码都是在执行环境中运行的。在执行之前，浏览器会创建一个全局执行环境，并将全局变量和函数添加到这个环境中。
  3. 变量提升：在创建执行环境时，浏览器会扫描代码并将声明的变量和函数提升到作用域顶部。这意味着可以在变量和函数声明之前使用它们，但是赋值操作的顺序不会被提升。 执行代码：一旦执行环境准备好了，浏览器就可以开始执行JavaScript代码了。浏览器会扫描代码并逐行执行它。在执行过程中，浏览器会跟踪变量和函数的作用域，并在需要时创建新的执行环境。
  4. 事件循环：JavaScript是一种单线程语言，这意味着它只能同时执行一个任务。为了管理所有事件和任务，浏览器使用事件循环来决定何时执行哪些任务。当代码遇到异步操作时（如异步请求或定时器），JavaScript会将这些操作添加到事件队列中，然后继续运行同步代码。一旦异步操作完成，事件循环将从队列中取出操作并执行它。
  5. 垃圾回收：JavaScript中的内存管理是自动进行的。当对象不再被引用时，浏览器会自动将其从内存中删除。垃圾回收机制会定期检查内存中的对象，并删除不再使用的对象。这可以防止JavaScript程序占用太多内存并导致性能问题。

JS堆栈

JavaScript中的堆和栈是两个不同的内存区域，用于存储不同类型的数据。

栈（stack）：栈是一种数据存储结构，它具有后进先出（LIFO）的特性。在JavaScript中，栈用于存储函数调用时的数据（如函数参数、局部变量等）。每个函数调用都会创建一个新的帧（frame），并将其推入调用栈的顶部。当函数执行完成后，它的帧从栈顶弹出，并且控制流回到调用它的函数。这意味着JavaScript中的调用栈具有一个最大深度（通常为数千个帧），如果函数调用嵌套过多，调用栈将溢出并导致错误。

堆（heap）：堆是一种用于存储动态数据的内存池。在JavaScript中，堆用于存储复杂对象（如数组、对象等）和函数定义。堆中的数据可以按照任意顺序进行访问，并且可以被任意数量的代码共享。JavaScript中的垃圾回收机制负责自动管理堆中的内存，当对象不再被引用时，它们将被自动删除。 在JavaScript中，栈和堆都是由JavaScript引擎自动管理的。开发者无需显式地创建、销毁栈或堆中的数据，所有的内存管理都由引擎自动完成。

js事件循环

JavaScript是一种单线程的语言，但是它支持异步执行，通过事件循环机制来管理异步任务的执行。

事件循环（Event Loop）是JavaScript异步编程的核心概念。它是一个以无限循环方式运行的进程，不断从任务队列（Task Queue）中取出任务并执行。JavaScript引擎会先执行所有的同步任务，然后从任务队列中获取异步任务并执行，如定时器、Promise、事件监听等。

一旦异步任务执行完成，就会将结果返回给相应的回调函数，该回调函数被添加到队列中等待执行。执行所有异步任务后，事件循环会进入等待状态，直到有新的任务加入任务队列中。

任务队列中包含两类任务：

  1. 宏任务（Macrotask）：每个宏任务的执行都会新建一个执行上下文，并将其压入调用栈中执行。宏任务包括script标签、setTimeout、setInterval、I/O等。
  2. 微任务（Microtask）：当同步代码执行完毕后，JavaScript引擎会优先执行微任务队列中的所有任务。微任务包括Promise、Mutation Observer、Object.observe。

在事件循环中，当调用栈为空时，JavaScript引擎会先执行微任务队列中的所有任务，然后才会执行宏任务队列中的任务。因此，微任务的执行优先级高于宏任务。 例如，当执行代码setTimeout(function(){console.log('setTimeout')},0) 时，setTimeout函数是异步调用的，在任务队列中添加一个宏任务，在当前任务执行完成后，事件循环会检查任务队列中是否有宏任务，如果有，便执行宏任务。而当前的任务执行完成后，JavaScript引擎会先执行微任务队列中的任务，如果没有就执行宏任务队列中的任务。因此，结果会先打印微任务队列中的任务，再打印setTimeout。 事件循环是JavaScript的异步编程基础，开发者应当了解其工作原理和机制，以编写可靠、高效的异步代码。

JS数据结构

  1. 数组（Array）：一组有序的数据集合，可以通过索引访问元素。数组也可以用于实现队列和栈等数据结构。
  2. 对象（Object）：一组由属性和值组成的无序键值对集合，可以通过属性名访问值。对象也可以用于实现图和哈希表等数据结构。
  3. 栈（Stack）：一种有序的数据集合，只能从栈顶添加或删除元素。常用于实现浏览器的回退功能和匹配括号等问题。
  4. 队列（Queue）：一种有序的数据集合，只能从队尾添加元素，从队头删除元素。常用于实现消息队列和任务队列等。
  5. 链表（Linked List）：一种由节点组成的有序的线性数据结构。每个节点包含一个值和指向下一个节点的指针。常用于实现高效的插入和删除操作。
  6. 树（Tree）：一种由节点组成的非线性数据结构，每个节点可以拥有多个子节点。树的应用非常广泛，如DOM树、文件系统树、二叉搜索树等。
  7. 堆（Heap）：一种特殊的树形数据结构，每个节点的值都不大于（或不小于）它的子节点。堆通常用于实现优先队列和堆排序等算法。
  8. 图（Graph）：一组由节点和边构成的网络结构，常用于表示复杂系统的数据结构。图的应用包括社交网络、搜索引擎等。 以上是JavaScript中常见的数据结构，开发者应当了解它们的特点和应用场景，以选择合适的数据结构来解决问题。

JS闭包

在JavaScript中，闭包是一种函数及其对外部词法环境（即函数定义时所在的作用域）的引用组合而成的特殊对象。

当一个函数返回另一个内部函数时，内部函数可以访问其声明时所在的外部函数的变量和参数，即使外部函数已经返回并销毁了其执行环境。这种内部函数持有对外部函数局部变量的引用，称为闭包。

闭包形成后，外部函数的执行环境会一直存在于内存中，直到内部函数被销毁。

闭包有以下特点：

  1. 在函数内部定义另一个函数，并返回该函数。
  2. 内部函数可以访问外部函数中的变量和参数。
  3. 外部函数的执行环境在返回内部函数后不会被销毁。

闭包常用于以下场合：

  1. 封装私有变量和方法，以避免全局作用域的污染。
  2. 解决异步问题，如定时器和事件监听等。
  3. 实现柯里化（currying）等函数式编程技巧。 需要注意的是，过多的闭包嵌套或使用不当可能导致内存泄漏或性能降低。因此，在使用闭包时应谨慎考虑其性能和内存开销，并尽量避免滥用。
avatar
文章
阅读
粉丝