React 和 Vue 都是基于 Virtual DOM 的后端框架。基本原则相似，但也存在一些差异。React 的虚拟 DOM 是一个轻量级的 JavaScript 对象，它比较两个状态树以确定哪些部分需要更新，然后将更新的部分重新渲染到真正的 DOM 上。 React 还使用优化，例如 shouldComponentUpdate 方法，以防止不必要的渲染。Vue 的 Virtual DOM 也是一个 JavaScript 对象，但 Vue 使用模板编译技术将模板编译成渲染函数以提高效率。Vue 还使用响应式数据绑定技术，在数据更改时自动更新相关视图。此外，React 和 Vue 的组件化实现是不同的。React 的组件化是基于函数或类的，组件可以接收属性和状态，返回描述组件 UI 的虚拟 DOM。Vue 的组件化基于选项对象，组件可以包含模板、数据、计算属性、方法和其他选项。一般来说，React 和 Vue 都通过 Virtual DOM 实现了高效的页面渲染和更新，但它们的实现方式和优化策略不同javascript底层javascript底层，开发者可以根据自己的需求和喜好选择适合自己的框架。
JavaScript已经成为有史以来最流行的编程语言之一。根据W3Tech的数据，全球近96%的网站都在使用它。关于 Web 的一个关键事实是，您无法控制访问您网站的用户所使用的设备的硬件大小。最终用户可能会使用低端或高端设备访问您的网站，网络连接条件可能会有所不同。这意味着您必须尽可能优化您的网站以满足任何用户的需求。
本文列出了帮助您编写更好的 JavaScript 代码以提高性能的方法。
作为旁注，共享和重用您的JS组件，以在高质量代码（需要时间编写）和合理的交付时间之间保持适当的平衡。您可以使用 Bit 等流行工具将任何项目（普通的 JS、TS、React、Vue 等）中的组件共享到 Bit 的组件中心，而无需太多努力。
1 删除未使用的代码和功能
应用程序包含的代码越多，需要传输到客户端的数据就越多。浏览器还需要更多时间来剖析和解释代码。
有时，您可能会打包许多根本不需要的功能。最好仅将此额外代码保留在开发环境中，而不是将其推送到生产环境，以避免给客户端的浏览器带来负担。
不断问自己是否需要一个功能或一段代码。
您可以自动删除未使用的代码，也可以使用 Uglify 或 Microsoft 的闭包编译器等工具来删除它。您甚至可以使用一种称为摇树优化的技术从应用程序中删除未使用的代码。打包软件（如 Webpack）提供了这些技术，可以在这里找到。如果要删除未使用的 npm 包javascript优化，可以使用命令 npm prune，有关详细信息，请参阅 NPM 文档。
2 尽可能多地缓存
缓存可减少延迟和网络流量，从而减少显示资源表示以提高网站速度和性能所需的时间。可以使用缓存 API 或 HTTP 缓存实现缓存。您可能想知道修改内容时会发生什么。上述缓存机制只有在满足发布新内容等各个条件时才能处理和重建缓存。
3 避免内存泄漏
作为一种高级语言，JS负责一些低级管理任务，例如内存管理。垃圾回收是大多数编程语言通用的过程。通俗地说，垃圾回收是已分配给对象但当前未在程序的任何部分中使用的视频内存的收集和释放。在像 C 这样的编程语言中，开发人员必须使用 malloc（） 和 dealloc（） 函数来处理内存分配和释放操作。
虽然垃圾回收是在 JavaScript 中手动执行的，但在个别情况下并不完美。在JavaScript ES6中，引入了Map和Set以及它们的“较弱”兄弟姐妹。称为WeakMap和WeakSet的“弱”对应物持有对对象的“弱”引用。它们允许对未引用的值进行垃圾回收，从而避免内存泄漏。你可以在这里阅读更多关于WeakMaps的信息。
4 尽早打破循环
巨大的循环肯定会消耗大量宝贵的时间，因此您应该尽快打破它们。您可以使用 break 关键字和 continue 关键字执行此操作。编写最有效的代码是您的责任。
在下面的示例中，如果您不脱离循环，您的代码将在循环中运行 100000000000 次，这显然是重载的。
let arr = new Array(1000000000).fill('----');arr[970] = 'found';for (let i = 0; i < arr.length; i++) {if (arr[i] === 'found') {console.log("Found");break;}}
在下面的示例中，如果在循环不符合条件时不继续，您仍将运行该函数 10000000000 次。我们只在数组元素处于主要位置时处理它。这将循环执行减少了近一半。
let arr = new Array(1000000000).fill('----');arr[970] = 'found';for (let i = 0; i < arr.length; i++) {if(i%2!=0){continue;};process(arr[i]);}
您可以在此处了解有关循环和性能的更多信息。
5 最小化变量估计数的数量
要减少估计变量的估计次数，可以使用闭包。通俗地说，JavaScript 中的闭包允许您从内部函数访问外部函数作用域。每次创建（不调用）函数时都会创建一个闭包。内部函数将有权访问外部作用域的变量，即使返回了外部函数也是如此。
让我们看两个例子。这些例子来自布雷特的博客。
function findCustomerCity(name) {const texasCustomers = ['John', 'Ludwig', 'Kate'];const californiaCustomers = ['Wade', 'Lucie','Kylie'];return texasCustomers.includes(name) ? 'Texas' :californiaCustomers.includes(name) ? 'California' : 'Unknown';};
如果多次调用该函数，则每次都会创建一个新对象。每次调用时，变量 texasCustomers 和 californiaCustomers 都会导致不必要的内存重新分配。
function findCustomerCity() {const texasCustomers = ['John', 'Ludwig', 'Kate'];const californiaCustomers = ['Wade', 'Lucie','Kylie'];return name => texasCustomers.includes(name) ? 'Texas' :californiaCustomers.includes(name) ? 'California' : 'Unknown';};let cityOfCustomer = findCustomerCity();cityOfCustomer('John');//TexascityOfCustomer('Wade');//CaliforniacityOfCustomer('Max');//Unknown
在前面的示例中，使用
帮助闭包，内部函数返回给变量 cityOfCustomer 可以访问外部函数 findCustomerCity（） 的常量。此外，每当使用传递的名称作为参数调用内部函数时，都无需再次实例化常量。要了解有关闭包的更多信息，我们建议您阅读Prashant的博客文章。
6 最小化 DOM 访问
这
与其他 JavaScript 语句相比，访问 DOM 的速度很慢。如果对 DOM 进行了修改以触发布局重绘，则必须等待一段时间。
要减少对 DOM 元素的访问次数，请访问它一次，然后将其用作局部变量。完成要求后，请务必将其设置为 null 以删除变量的值。这将避免内存泄漏，因为这会触发垃圾回收过程。
7 压缩文件
JavaScript文件的大小可以通过Gzip等压缩方法来减小。较小的文件将提高您网站的性能，因为浏览器只需要下载较小的资产。
这种类型的压缩可以将文件大小减少多达 80%。在此处阅读有关压缩的更多信息。
8 缩小最终代码
有些人认为收缩和压缩是一样的，但事实并非如此。在压缩中，我们使用特殊的算法来更改文件的输出大小;缩小时javascript优化，我们需要从 JavaScript 文件中删除注释和多余的空格。可以在线找到许多工具和软件包来帮助完成此过程。缩小已成为页面优化的标准做法，也是后端优化的主要步骤之一。
缩小可以将文件大小减少多达 60%。您可以在此处阅读有关缩小的更多信息。
9 使用油门和去抖动
我们可以使用这两种技术来严格控制代码必须处理风暴的次数。
限制是指定函数可以超时的最大次数。例如，“onkeyup 事件函数最多每 1000 毫秒执行一次”。这意味着即使您每秒点击 20 个键，风暴也只会每秒触发一次。这将减轻代码的负担。
另一方面，稳定指定自之前执行同一函数以来再次运行函数的最短持续时间。换句话说，“此函数在上次调用函数后至少 600 毫秒执行。若要详细了解限制和聚焦，请快速入门。
您可以实现自己的焦点和限制功能，也可以从 Lodash 和 Underscore 等库中导出它们。
10 避免使用删除关键字
delete 关键字用于从对象中删除属性。此关键字的性能不是很好，预计将在将来的更新中修补。
或者，您可以简单地将不需要的属性设置为 undefined。
const object = {name:"Jane Doe", age:43};object.age = undefined;
您还可以使用 Map 对象，Bret 认为其删除方法会更快。
11 使用异步代码避免线程阻塞
你应该知道JavaScript默认是同步和单线程的。但在个别情况下，您的代码需要很大的估计值。代码本质上是同步的，这意味着当一段代码运行时，它将停止其他代码句子运行，直到后者完成执行。这提高了整体性能。
但是我们可以通过异步代码来防止这些情况。异步代码过去是以反弹方式编写的，但 ES6 引入了一种新的处理异步代码的样式。这种新样式称为承诺。您可以在 MDN 的官方文档中了解有关退回邮件和承诺的更多信息。
但是等等....
JavaScript 默认是同步的，也是单线程的。
如何在单个线程上运行异步代码？这是许多人感到困惑的地方。为此，您主要依赖于在浏览器后台运行的 JavaScript 引擎。JavaScript 引擎是执行 JavaScript 代码的计算机程序或协程。JavaScript引擎可以用多种语言编程。例如，支持 Chrome 的 V8 引擎是用 C++ 编写的，而支持 Firefox 的 SpiderMonkey 引擎是用 C 和 C++ 编写的。
这些 JavaScript 引擎可以在后台处理任务。根据Brian的说法，调用堆栈可以识别Web API的功能并将其交给浏览器。浏览器完成此任务后，它们将返回并作为退回被推到堆栈中。
您可能想知道 Node.js 是如何做到这一点的，毕竟它没有浏览器的帮助。事实上，那种支持 Chrome 的 V8 引擎也是 Node.js 背后的支持。这是Salil的一篇很棒的博客文章，解释了Node生态系统中的这个过程。
12 使用代码拆分
如果你有过谷歌灯塔的经验，你肯定熟悉一个叫做“第一内容绘画”的指标。它是灯塔报告的“性能”部分中跟踪的六个指标之一。
首次内容绘制 （FCP） 测量用户定向到您的页面后浏览器呈现第一段 DOM 内容所需的时间。页面上的图像、非蓝色元素和 SVG 被视为 DOM 内容;iframe 内部不包含任何内容。
获得更高 FCP 分数的最佳方法之一是使用代码拆分。代码解绑是一种在传输开始时仅向用户发送必要模块的技术。通过减小最初发送的负载大小，这会极大地影响 FCP 分数。
流行的模块打包器，如 webpack，为您提供代码拆分功能。您还可以使用本机 ES 模块来加载单个模块。您可以在此处了解有关本机 ES 模块的更多信息。
13 使用异步和延迟
在现代网站中，脚本比 HTML 更密集，大小更大，并且消耗更多的处理时间。默认情况下，浏览器必须等待脚本下载并执行，然后才能处理页面的其余部分。
因此，笨拙的脚本可能会阻止网页加载。为了防止这些情况，JavaScript 为我们提供了两种技术，称为异步和延迟。您只需要将此属性添加到
