JavaScript已经成为最流行的编程语言之一。据W3Tech称，世界上几乎96%的网站都在使用它。关于您的网站，您需要了解的最关键的一点是，您无法控制访问您网站的用户的硬件设备规格。访问您网站的最终用户可能使用高端或低端设备，互联网连接也可能良好或较差。这意味着您必须确保您的网站尽可能优化，并且您能够满足任何用户的要求。这里有一些技巧可以帮助您更好地优化JavaScript代码以提高性能。1.删??除不用的代码和函数程序包含的代码越多，传递给客户端的数据就越多。浏览器还需要更多时间来解析和编译代码。有时，代码中可能包含完全未使用的功能，最好只将这些额外的代码保留在开发环境中，而不要将它们留在生产环境中，因为无用的代码可能会增加客户端浏览器的负担。始终问自己是否需要该功能、特性或代码。可以手动删除无用代码，也可以使用Uglify工具或者谷歌开发的ClosureCompiler帮你??删除。您甚至可以使用一种称为treeshaking的技术从您的程序中删除未使用的代码。比如Webpack提供的打包工具。你可以在这里了解更多关于treeshaking的信息。另外，如果你想删除不用的npm包，你可以输入命令npmprune。2.尽可能缓存缓存通过减少延迟和网络请求来提高站点的速度和性能，从而减少显示资源所需的时间。它可以借助缓存API或HTTP缓存来实现。您可能想知道当内容更改时会发生什么。上述缓存机制能够在满足某些条件（例如发布新内容）时处理并重新生成缓存。3.避免内存泄漏JS作为一门高级语言，负责一些底层的管理，比如内存管理。垃圾收集是大多数编程语言的常见过程。通俗地说，垃圾回收就是收集和释放已经分配给对象但当前没有被程序的任何部分使用的内存。在像C这样的编程语言中，开发人员必须使用malloc()和dealloc()函数来处理内存分配和释放。虽然垃圾回收由JavaScript自动执行，但在某些情况下，它可能并不完美。在JavaScriptES6中，引入了Map和Set及其“较弱”的兄弟元素。“较弱”对应于WeakMap和WeakSet，持有每个关键对象的“弱引用”。它们允许对未引用的值进行垃圾回收，防止内存泄漏。了解有关WeakMap的更多信息。4、尽量早点跳出循环在代码量大的循环中执行一个循环肯定会消耗很多宝贵的时间，这就是为什么要尽早跳出循环的原因。您可以使用break关键字和continue关键字来跳出循环。编写最高效的代码是开发人员的责任。在下面的示例中，如果您不在循环中使用break，您的代码将运行循环1000000000次，这显然是过载了。letarr=newArray(1000000000).fill('----');arr[970]='found';for(leti=0;itexasCustomers.includes(name)?'Texas':californiaCustomers.includes(name)?'California':'Unknown';};letcityOfCustomer=findCustomerCity();cityOfCustomer('John');//TexascityOfCustomer('Wade');//CaliforniacityOfCustomer('Max');//未知在上面的例子中，在闭包的帮助下，返回变量cityOfCustomer的内部函数可以访问外部函数findCustomerCity()的常量。并且在调用内部函数并传递参数名时，不需要再次实例化这些常量。6.最小化DOM访问与其他JavaScript语句相比，访问DOM更慢。如果你正在操作DOM，触发布局的重绘，它会非常慢。要减少访问DOM元素的次数，访问一次并将其用作局部变量。当要求完成时，确保通过将变量设置为null来删除该变量的值。这将防止内存泄漏，因为它允许垃圾收集。7.压缩文件通过使用Gzip等压缩方法，您可以减小JavaScript文件的大小。这些较小的文件将提高网站性能，因为浏览器只需要下载较小的资源。这些压缩可以将文件大小减少多达80%。在此处了解有关压缩的更多信息：https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text_compression_with_gzip。8.缩小你的最终代码有些人认为缩小和压缩是一样的。相反，它们是不同的。在压缩中，使用特殊算法来改变输出文件的大小。但在缩小时，需要删除JavaScript文件中的注释和额外空格。这个过程可以在网上找到的许多工具和软件包的帮助下完成。缩小已成为页面优化的标准做法和前端优化的主要组成部分。缩小可以将文件大小减少多达60%。9.使用throttle和debounce通过使用这两种技术，我们可以严格执行代码处理事件所需的次数。节流是指在指定时间内函数被调用的最大次数。例如，“最多每1000毫秒执行一次onkeyup事件函数”。这意味着如果您每秒键入20个键，该事件每秒只会触发一次。这将减少代码加载。另一方面，去抖动是函数在上次触发后再次触发之前的最短时间。换句话说，“只有在600毫秒没有调用函数的情况下才执行函数”。这意味着，直到600毫秒后，即上次执行同一函数时，您的函数才会被调用。要了解有关节流和稳定的更多信息，请快速阅读此处。您可以实现自己的去抖动和节流功能，或从Lodash和Underscore等库中导入它们。10.避免使用delete关键字delete关键字用于从对象中删除属性。关于delete关键字的性能存在一些争论。您可以在此处和[此处](https://stackoverflow.com/questions/43594092/slow-delete-of-object-propertieses-in-js-in-v8/44008788)查看它们。这个问题有望在未来的更新中得到解决。作为替代方案，您可以简单地将不需要的属性设置为未定义。constobject={name:"JaneDoe",age:43};object.age=undefined;您还可以使用Map对象，因为根据Bret的说法，Map的delete方法被认为更快。11.使用异步代码防止线程阻塞你应该知道JavaScript是同步的和单线程的。但在某些情况下，执行一段代码可能会花费很多时间。本质上同步意味着这段代码会阻塞其他代码语句的运行，直到它执行完，从而降低了代码的整体性能。但实际上，我们可以通过实现异步代码来避免这种情况。异步代码以前被编写为回调，但在ES6中引入了一种处理异步代码的新样式。这种新风格称为promises。等等……默认情况下，JavaScript是同步的，也是单线程的。为什么在单线程上运行时运行异步代码？这是很多人感到困惑的地方。这要归功于在浏览器外壳下运行的JavaScript引擎。JavaScript引擎是执行JavaScript代码的计算机程序或解释器。JavaScript引擎可以用多种语言编写。例如，为Chrome浏览器提供支持的V8引擎是用C++编写的，而为Firefox浏览器提供支持的SpiderMonkey引擎则是用C和C++编写的。这些JavaScript引擎可以在后台处理任务。根据Brian的说法，调用堆栈识别WebAPI的功能并将它们交给浏览器进行处理。一旦浏览器处理完这些任务，它们就会返回并作为回调被压入堆栈。有时您可能想知道Node.js是如何在没有浏览器帮助的情况下工作的。事实上，为Chrome提供支持的V8引擎也为Node.js提供支持。12.使用CodeSplitting如果你有使用过GoogleLightHouse的经验，你会熟悉一个叫做“firstcontentfulpaint”的指标。它是Lighthouse报告的性能部分中跟踪的六个指标之一。FirstContentfulPaint(FCP)衡量浏览器在用户导航到页面后呈现DOM的第一个内容所花费的时间。为非白色页面上的图像获得更高FCP分数的最佳方法之一是使用代码拆分。代码拆分是一种在一开始就只将必要的模块交付给用户的技术。减少最初传输的有效负载的大小会显着影响FCP分数。流行的模块打包器如webpack提供代码拆分。您可以在原生ES模块的帮助下加载单个模块。13.使用异步async和defer在现代网站中，脚本比HTML更密集，它们的体积更大，消耗的处理时间也更多。默认情况下，浏览器必须等待脚本下载、执行，然后处理页面的其余部分。庞大的脚本会阻止网页的加载。为了避免这种情况，JavaScript提供了两种技术，async和defer。您只需要将这些属性添加到
