JavaScript 已成为现在web开发人员中的主要脚本语言。它是前端编程、构建交互式、功能加载的网站以及快速流畅的 Web 应用程序的绝佳工具。每个前端程序员都知道JavaScript，但是，糟糕的 JavaScript 代码会影响网站的性能、呈现速度和加载时间。今天icode9小编将分享一些技巧，帮助您优化未来的 JavaScript 之旅。我们来看一下：
1. 缩小小文件的 JavaScript 代码——缩小代码与混淆代码不同。然而，这两种都是转换 JavaScript 的方法——阅读起来更复杂或更小。缩小完成后者并可以缩小文件大小以减少页面加载时间。换行符、额外的空格、注释等都会增加 JavaScript 文件的大小并影响页面加载的速度。缩小代码解决了这个问题。
2. 排除 .js 库中未使用的组件——开发人员按原样使用 JavaScript 库，例如 jQuery UI 或 jQuery Mobile 等。这意味着当您可能需要一些时，代码包含每个库的所有组件。
如果您精通了解哪些组件将包含在库的哪个包中，请选择那些特定的组件。您的网站将加载得更快，访客将获得良好的体验。
3. 使用 HTTP/2 协议—— 主要 Internet 协议 HTTP 的更新版本可以为开发人员提供很多很酷的功能。其众多优点之一是多路复用。这使您可以使用 TCP 连接同时进行类似的请求和回复。而且，早期的互联网协议需要对JavaScript理论有透彻的理解和加强知识，而HTTP/2可以使JavaScript快速加载。因此，HTTP/2在性能上要比 HTTP 协议好很多。
4. 用于 Apache、Node.js 和 Nginx 的 GZIP 模块 ——GZIP是一种令人惊叹的压缩技术，早在 Internet 还没有现在这么快的时候就引入了。它减少了 Web 服务器上的文件，将静态文件压缩到其真实大小的 80% 到 90%。由于 JavaScript 是一个文本文件，您可以使用 GZIP 来缩小 JavaScript 文件并帮助减少页面加载时间。
GZIP 压缩
有可用于 Web 服务器的模块，包括 Nginx 和 Apache。由于JavaScript既用于前端编程又用于后端编程，因此可以使用Node.js的zlib模块压缩JS文件。
// Code to run zlib module
Const zlib = require(‘zlib’);
使用 GZIP 的代码：
Const gzip = zlib.createGzip();
Const fs = require(‘fs’);
Const inp = fs.createReadStream(‘input.txt’);
Const out = fs.createWriteStream(‘input.txt.gz’);
Inp.pipe(gzip).pipe(out);
5. 缩短 DOM 和访问大小 ——DOM（文档对象模型）是构成网页结构的对象的数据表示。每个网页都是文档，通常是一个 HTML 文件，文档中的每个对象都称为节点。JavaScript 影响 DOM 及其节点以更改结构、样式和内容作为对用户输入的答复。
每次 JavaScript 代码访问 DOM 组件或修改 DOM 时，这取决于开发人员正在做什么。如果系统必须重新计算 DOM 中的多个节点，这会占用更多内存并降低性能。优化代码时，修剪冗长的 DOM 树是一个很好的实施方案。保持 DOM 较小有很多优点：
减少内存泄漏的风险
优化网络效率和负载性能
执行力良好
下面是一些最小化 DOM 的方法：
减少 DOM 引用
避开复杂的动画
保持简单的CSS规范
6. 将 JavaScript 代码和 CSS 放在 head 部分——这种方法可以帮助您的网页加载速度更快；但是，您需要对 DOM 和 SCCOM 有很好的了解。这个想法是在 head 部分保留较少的 CSS 和 JavaScript 代码，以便页面立即加载，而更通用的代码像往常一样保留在不同的 .css 和 .js 文件中。
7. 忘记 await 并使用 Promise.all——与其等待执行，不如将调用和未解决的 promises 汇总到一个数组中。例如，如果你想对数据库进行多次调用，你通常会等待每个耗时的调用。
//Code to call two databases
const getUsers = async () => {
const consumers = await findAllConsumers();
const managers = await findAllManagers();
Return { consumers, managers}
}
最好的方法之一是同时运行这两个调用并在大约一半的时间内解决输出。
// code to call both databases simultaneously
const getUsers = async () => {
const consumers = findAllConsumers();
const managers = findAllManagers();
Return Promise.all([consumers, managers]);
}
您不必分别等待两个数据库的执行；但是，两者并行运行。
8. 代码破坏——这是在需要时可以调用的小文件中跨功能元素破坏代码的做法。将代码拆分成小块可以将单个大型 JavaScript 文件的加载时间替换为应用程序特定功能和特性的部分加载时间。您可以使用不同的可用捆绑器来拆分代码以优化应用程序。
9. 测试你的代码—— 测试对于识别和恢复内存泄漏等性能问题至关重要。以下是一些常用的 JavaScript 测试工具：
Console.time() — 这是一个内置的 JavaScript 函数，您可以使用它来检查一个过程需要多长时间。在流程开始时，只需调用：
控制台时间（标签）；
在这里，标签可以是您为计时器指定的唯一名称。在该过程结束时，只需调用：
Console.timeEnd(标签);
编写此代码可为您提供有效的处理时间。
YSlow — 它是一种开源性能测量工具，可评估网站并提供性能改进提示。YSlow 调用您的站点并将其性能与雅虎的网站性能标准进行比较。它会给你一个介于 0% 和 100% 之间的分数。这是增强代码以获得更好性能的好方法。
10. 在集群中运行应用程序——在 Node.js 中，您可以利用集群模块来运行一个与父进程同时运行的子进程。子集群或进程在其 V8、事件循环和内存中运行。这将为每个进程分配负载和任务。
nodeJS中的集群
11. 内存溢出——这是一种状态，进程使用完内存但没有将其返回给其他应用程序或进程使用的因果操作系统。每次在 JavaScript 中创建对象或声明变量时，都会占用内存。当你用完一个对象或变量，但 JS 运行时仍然考虑你是否需要它时，就会发生内存溢出。这会影响系统性能，因为应该为不再可用的其他进程释放资源。避免 JavaScript 内存泄漏的最佳方法是适当地管理您的范围。
12. 异步加载：Defer 和 Async 标签 ——JavaScript 的异步加载意味着网站以多流方式加载。 
延迟和异步
当网络浏览器找到带有 <script src =”some.js”></script> 的字符串时，它将在执行 JavaScript 时停止创建 DOM 和 CSSOM 模型。这就是大多数 JavaScript 代码放在主要 HTML 代码之后的原因。看看下面的代码来理解这一点：
<html>
<head>
</head>
<body>
This will not appear until hello.js is loaded.
</body>
</html>
您可以在 JavaScript 中添加一个异步标记，以便并行创建 DOM 模型，并且在加载和执行 JavaScript 时不会受到干扰。
因此，我们试图为您提供 12 大技巧来改善您的 JavaScript 之旅。您可能会发现很难一次记住所有上述提示。但是通过实践，您将学习所有这些方法并见证您的 JavaScript 性能的重大改进。
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/295133.html