您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

2023,没有搞不定的JavaScript!

时间:2023-01-06 14:00:41  来源:51CTO  作者:

译者 | 涂承烨

由于代码可见性低,使用JAVA脚本进行编码可能会很耗时。这里有12个优雅的JavaScript技巧,可以帮助你在2023年优化代码生成。

JavaScript已经成为下一批开发人员中最主要脚本语言。对于前端编程、构建交互式、功能丰富的网站以及快速流畅的Web应用程序来说,这是一个不可思议的工具。每个前端程序员都知道JavaScript,然而,如果在不知情的情况下使用它,情况会变得更糟。糟糕的JavaScript代码会影响网站的性能、渲染速度和加载时间。在这篇博文中,我们将分享一些技巧,帮助你优化未来的JavaScript之旅。让我们一起来看看。

一、缩小文件的JavaScript代码

缩小代码与混淆代码不同。然而,这两种方法都是转换JavaScript的方法——读起来更复杂或更小。缩小实现了后者,并可以缩小文件大小以减少页面加载时间。换行符、多余空格、注释等都会增加JavaScript文件的大小,并影响页面加载的速度。缩小代码可以解决这个问题。

二、排除.js库中未使用的组件

开发人员使用JavaScript库,如jQuery UI或jQuery Mobile等。这意味着代码包含了每个库的所有组件,而你可能只需要其中的一些组件。

如果你精通于理解将在库的哪个包中包含哪些组件,那么就选择那些特定的组件。你的网站将加载更快,用户将得到一个很好的体验。

三、使用HTTP/2协议

这一主要互联网协议(HTTP)的更新版本可以为开发人员提供许多很酷的功能。它的众多优点之一是多路复用。这允许你使用TCP连接并发地接受类似的请求和响应。此外,早期的互联网协议需要对JavaScript理论有透彻的了解和增强的知识,而HTTP/2可以使JavaScript快速加载。因此,HTTP/2在性能上要比HTTP协议好得多。

四、GZIP模块适用于Apache、Node.js和Nginx

GZIP是一种令人惊叹的压缩技术,它是在几年前互联网还没有像现在这样高速发展的时候引入的。它减少了Web服务器上的文件,将静态文件压缩到真实大小的80%到90%。由于JavaScript是文本文件,你可以使用GZIP来压缩JavaScript文件,也有助于减少页面加载时间。

有一些模块可用于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);

五、缩短DOM层次和访问深度

DOM (Document Object Model,文档对象模型)是组成网页结构的对象的数据表示形式。每个Web页面都是文档,通常是一个html文件,文档中的每个对象称为节点。作为对用户输入的响应,JavaScript会影响DOM及其节点改变结构、样式和内容。

每次JavaScript代码访问DOM组件或修改DOM时,这取决于开发人员是怎么处理DOM的。如果系统必须在DOM中重新计算多个节点,这将消耗更多内存并降低性能。在优化代码时,修剪冗长的DOM的树型结构层次是一个很好的方法。保持较小的DOM有很多好处:

  • 减少内存泄漏的风险
  • 优化网络效率和负载性能
  • 良好的执行性能

下面是一些最小化DOM的方法:

  • 减少DOM引用
  • 回避复杂动画
  • 保持简单的css规范

六、将JavaScript代码和CSS放在head部分

此方法帮助你更快地加载网页;但是,你需要对DOM和SCCOM有很好的理解。这样做的目的是在head部分保留更少的CSS和JavaScript代码,以便页面立即加载,而更一般的代码通常保存在不同的.CSS和.js文件中。

七、抛弃等待,放到promise.all里一起执行

你应该将调用和未解决的promise合并到一个数组中,而不是等待执行。例如,如果要对数据库进行多次调用,通常需要等待的时间是每次调用完成的时间之和。

复制

//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]);

}

你不必等待两个数据库都执行完成,两者是并行运行的。

八、代码分割

这是一种实践,将函数式元素的代码分解在小文件中,以便在需要时调用。将代码分割为小块,用应用程序中特定功能和特性的部分加载时间替换单个大型JavaScript文件的加载时间。你可以使用不同但可用的打包工具来分割代码以进行应用程序优化。

九、测试代码

测试对于识别内存泄漏等性能问题并恢复它们至关重要。下面是一些常用的JavaScript测试工具:

1.Console.time()

这是一个内置的JavaScript函数,可以使用它来检查执行某个过程需要多长时间。在这个过程的开始,只需调用:Console.time(label);

在这里,label可以是你给定时器的唯一名称。在这个过程的最后,只需要调用:Console.timeEnd(label);

编写此代码可为你提供执行某个过程的处理时间。

2.YSlow

它是一个开源的性能测量工具,可以评估网站并提供性能改进建议。YSlow调用你的网站,并将其性能与雅虎的网站性能标准进行比较。它会给你一个介于0到100%之间的分数。这是增强代码以获得更好性能的好方法。

十、在集群中运行应用程序

在Node.js中,你可以利用集群模块来运行与父进程并发运行的子进程。子集群或进程在V8、事件循环和内存中运行。这将为每个进程分配负载和任务。

十一、内存溢出

在这种状态下,进程完成了对内存的使用,但没有将其返回给另一个应用程序或进程使用的操作系统。每次在JavaScript中创建对象或声明变量时,都会占用内存。当你使用完一个对象或变量时,内存溢出可能会发生,但JS运行时仍然会考虑你还需要它。这将影响系统性能,因为应该为其他不再可用的进程释放资源。避免JavaScript内存泄漏的最佳方法是适当地管理作用域。

十二、异步加载:Defer和Async标签

JavaScript的异步加载意味着网站以多信息流的方式加载。

当Web浏览器找到<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添加一个async标签,这样DOM模型就可以并行创建,并且在JavaScript加载和执行时不会被干扰。

十三、总结

我们尝试为你提供12个技巧来改进你的JavaScript之旅。你可能会发现很难一次性记住上面提到的所有技巧。但通过实践,你会学会所有这些方法,并见证JavaScript性能的重大提升。

原文链接:https://dzone.com/articles/12-ways-to-optimize-your-javascript-journey

译者介绍

涂承烨,51CTO社区编辑,信息系统项目管理师、信息系统监理师、PMP,某省综合性评标专家,拥有15年的开发经验。



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
JavaScript的异步编程常见模式
在JavaScript中,异步编程是一种处理长时间运行操作(如网络请求或I/O操作)的常见方式。它允许程序在等待这些操作完成时继续执行其他任务,从而提高应用程序的响应性和性能。JavaS...【详细内容】
2024-04-12  Search: JavaScript  点击:(2)  评论:(0)  加入收藏
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  Search: JavaScript  点击:(6)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践&mdash;&mdash;如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  Search: JavaScript  点击:(27)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  Search: JavaScript  点击:(20)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  Search: JavaScript  点击:(2)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  Search: JavaScript  点击:(2)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06  Search: JavaScript  点击:(53)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  Search: JavaScript  点击:(71)  评论:(0)  加入收藏
使用 JavaScript 清理我的 200GB iCloud,有了一个意外发现!
本文作者在综合成本因素之下,决定用 Java 脚本来清理一下自己的 iCloud,结果却有了一个意外发现,即在 iCloud 中上传同一个视频和删除此视频之后,iCloud 的空间并不一致,这到底是...【详细内容】
2024-01-11  Search: JavaScript  点击:(99)  评论:(0)  加入收藏
JavaScript前端框架2024年展望
Angular、Next.js、React和Solid的维护者和创作者们展望2024年,分享了他们计划中的改进。译自2024 Predictions by JavaScript Frontend Framework Maintainers,作者 Loraine...【详细内容】
2024-01-05  Search: JavaScript  点击:(91)  评论:(0)  加入收藏
▌简易百科推荐
JavaScript的异步编程常见模式
在JavaScript中,异步编程是一种处理长时间运行操作(如网络请求或I/O操作)的常见方式。它允许程序在等待这些操作完成时继续执行其他任务,从而提高应用程序的响应性和性能。JavaS...【详细内容】
2024-04-12  靳国梁    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  前端新世界  微信公众号  Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践&mdash;&mdash;如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  前端新世界  微信公众号  Tags:JavaScript   点击:(27)  评论:(0)  加入收藏
又出新JS运行时了!JS运行时大盘点
Node.js是基于Google V8引擎的JavaScript运行时,以非阻塞I/O和事件驱动架构为特色,实现全栈开发。它跨平台且拥有丰富的生态系统,但也面临安全性、TypeScript支持和性能等挑战...【详细内容】
2024-03-21  前端充电宝  微信公众号  Tags:JS   点击:(26)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  前端历险记  微信公众号  Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  WangLiwen    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  京东云开发者    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06    51CTO  Tags:JavaScript   点击:(53)  评论:(0)  加入收藏
JS小知识,使用这6个小技巧,避免过多的使用 if 语句
最近在重构我的代码时,我注意到早期的代码使用了太多的 if 语句,达到了我以前从未见过的程度。这就是为什么我认为分享这些可以帮助我们避免使用过多 if 语句的简单技巧很重要...【详细内容】
2024-01-30  前端达人  今日头条  Tags:JS   点击:(58)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  南城大前端  微信公众号  Tags:JavaScript   点击:(71)  评论:(0)  加入收藏
站内最新
站内热门
站内头条