翻译|涂承业评论|SunShujuan由于代码可见性低，使用Javascript编码可能非常耗时。这里有12个优雅的JavaScript技巧，可帮助您在2023年优化代码生成。JavaScript已成为下一批开发人员中最主要的脚本语言。它是前端编程、构建交互式、功能丰富的网站以及快速流畅的Web应用程序的绝佳工具。每个前端程序员都知道JavaScript，但是，当您在不了解它的情况下使用它时，情况会变得更糟。糟糕的JavaScript代码会影响网站的性能、呈现速度和加载时间。在这篇博文中，我们将分享一些技巧，帮助您优化未来的JavaScript之旅。让我们来看看。1.压缩文件的JavaScript代码压缩代码不同于混淆代码。然而，这两种方法都是改造JavaScript的方法——读起来更复杂或更小。缩小实现了后者，可以减小文件大小以减少页面加载时间。换行符、额外的空格、注释等都会增加JavaScript文件的大小并影响页面加载的速度。缩小代码解决了这个问题。2.排除.js库中不用的组件。开发人员使用JavaScript库，例如jQueryUI或jQueryMobile。这意味着代码包含每个库的所有组件，而您可能只需要其中的一部分。如果您精通了解哪些组件将包含在您的库的哪个包中，那么选择那些特定的组件。您的网站将加载速度更快，用户将获得出色的体验。3、使用HTTP/2协议这个主要互联网协议（HTTP）的更新版本可以为开发者提供很多很酷的特性。它的众多优点之一是多路复用。这允许您使用TCP连接同时接受类似的请求和响应。此外，早期的互联网协议需要对JavaScript理论有扎实的理解和增强的知识，而HTTP/2使JavaScript加载速度更快。因此，HTTP/2在性能上要比HTTP协议好很多。4.GZIP模块适用于Apache、Node。js和NginxGZIP是一项了不起的压缩技术，是几年前互联网发展还没有现在这么快的时候推出的。它减少了Web服务器上的文件，将静态文件压缩到其真实大小的80%到90%。由于JavaScript是文本文件，您可以使用GZIP压缩JavaScript文件，这也有助于减少页面加载时间。有可用于Web服务器的模块，包括Nginx和Apache。由于前端和后端编程都使用JavaScript，因此可以使用Node.js的zlib模块来压缩JS文件。//运行zlib模块的代码Constzlib=require('zlib');使用GZIP的代码：Constgzip=zlib.createGzip();Constfs=require('fs');Constinp=fs.createReadStream('输入.txt');Constout=fs.createWriteStream('input.txt.gz');Inp.pipe(gzip).pipe(out);五、缩短DOM层次和访问深度DOM（DocumentObjectModel，文档对象模型）是构成网页结构的对象的数据表示。每个网页都是一个文档，通常是一个HTML文件，文档中的每个对象称为一个节点。为了响应用户输入，JavaScript会影响DOM及其节点以更改结构、样式和内容。JavaScript代码每次访问DOM组件或修改DOM时，都取决于开发人员如何处理DOM。如果系统必须重新计算DOM中的多个节点，这会消耗更多内存并降低性能。优化代码时，修剪冗长的DOM树层次结构是个好主意。保持DOM小有很多好处：降低内存泄漏的风险优化网络效率和加载性能良好的执行性能以下是一些最小化DOM的方法：减少DOM引用避免复杂的动画保持简单的CSS规范第六，结合JavaScript代码和CSShead这个方法可以帮助你的网页加载得更快；但是，您需要对DOM和SCCOM有很好的了解。这样做的目的是在head部分保留较少的CSS和JavaScript代码，以便页面立即加载，而更通用的代码通常保存在单独的.CSS和.js文件中。7、放弃等待，在promise.all中一起执行应该把调用和未解决的promise组合成一个数组，而不是等待执行。例如，如果您对数据库进行多次调用，您通常必须等待每次调用完成的时间总和。//调用两个数据库的代码constgetUsers=async()=>{constuss=awaitfindAllConsumers();constmanagers=awaitfindAllManagers();Return{consumers,managers}}最好的方法之一是同时运行两个调用，并在大约一半的时间内解析输出。//同时调用两个数据库的代码constgetUsers=async()=>{constconsumers=findAllConsumers();constmanagers=findAllManagers();returnPromise.all([consumers,managers]);}不必等待两个数据库执行完成，两者并行运行。8.代码拆分将功能元素的代码分解成小文件，以便在需要时调用它们是一种做法。将您的代码拆分成小块，将单个大型JavaScript文件的加载时间替换为应用程序中特定功能和特性的部分加载时间。您可以使用不同但可用的打包工具来拆分代码以优化应用程序。9.测试你的代码测试对于识别内存泄漏等性能问题并从中恢复至关重要。下面是一些常用的JavaScript测试工具：1.Console.time()这是一个内置的JavaScript函数，可以用来检查执行某个进程需要多长时间。在流程开始时，只需调用：Console.time(label);其中label可以是您为计时器指定的唯一名称。在该过程结束时，只需调用：Console.timeEnd(label);编写此代码可为您提供执行特定流程的处理时间。2.YSlow是一个开源的性能测量工具，可以评估网站并提供性能改进建议。YSlow获取您的网站并将其性能与雅虎的网站性能标准进行比较。它会给你一个介于0和100%之间的分数。这是增强代码以获得更好性能的好方法。10.在集群中运行应用程序在Node.js中，您可以使用集群模块与父进程并发运行子进程。子集群或进程在V8、事件循环和内存中运行。这会将负载和任务分配给每个进程。十一、内存溢出在这种状态下，进程已经完成了对内存的使用，但还没有归还给另一个应用程序或进程所使用的操作系统。每次在JavaScript中创建对象或声明变量时，它都会占用内存。当您使用完对象或变量时可能会发生内存不足，但JS运行时仍然认为您仍然需要它。这将影响系统性能，因为应该为不再可用的其他进程释放资源。避免JavaScript内存泄漏的最佳方法是正确管理范围。12、异步加载：Defer和Async标签中JavaScript的异步加载，是指网站以多流的方式加载。当Web浏览器找到字符串时，它会在JavaScript执行期间停止创建DOM和CSSOM模型。这就是为什么大多数JavaScript代码都放在主要HTML代码之后的原因。请看下面的代码来理解这一点：DOM模型可以并行创建的方式，并且在加载和执行JavaScript时不会受到干扰。13.总结我们试图给你12个技巧来改善你的JavaScript之旅。您可能会发现很难一次记住上面提到的所有提示。但是通过实践，您将学习所有这些方法并见证JavaScript性能的显着提高。原文链接：https://dzone.com/articles/12-ways-to-optimize-your-javascript-journey涂成业，社区编辑，信息系统项目经理，信息系统主管，PMP，某省综合评标拥有15年开发经验的专家。
