优化性能的十大JavaScript技巧

JavaScript在技术领域已经统治了20多年,并帮助开发人员简化了复杂的任务。 它允许开发人员以最简化的方式实现复杂的任务网页。 对于大多数开发人员来说,缩小的JavaScript文件是常见现象,而很少有开发人员可能意识到优化的JavaScript代码。 在与许多Javascript开发人员会面时,我已经知道,优化JavaScript代码会使开发人员感到困惑,其中有些人可能会这么做,但他们并不了解。


什么是优化的JavaScript代码


当独特编程的逻辑与用于提高性能和速度的小技巧结合在一起时,称为优化JavaScript代码。 优化不仅可以优化性能和速度,而且可以节省最长的开发时间。 当您节省时间时,还可以节省一些钱。


因此,我这里有一些有用且富有成果的技巧,可帮助开发人员优化性能,提高速度并节省时间。 希望您喜欢本文,并在阅读完该文章后,可以利用最佳的JavaScript代码。


1.通过结合Javascript模块和缩小JS文件,精简JS代码


精简代码形成标准化的代码格式,通过提高可读性来帮助开发人员和应用程序。 当您组合JavaScript模块并缩小JS文件时,这是可能的。 尽管有时缩小的代码版本可能难以阅读和理解,但是您肯定会精简和优化代码。 当您拥有缩小的来源时,它可以在许多方面为您提供帮助。 例如,它可以减少页面加载时间,删除换行符,其他空格,注释等。 随着源代码的缩小,这些好处是可能的。


优化也是一种JavaScript最小化,它不仅在删除和删除不必要的内容(例如空格,逗号等)方面起着至关重要的作用。 而且还可以帮助开发人员消除不必要的代码块。 这里有一些重要的工具和库,可以帮助您减少代码。


  • 谷歌关闭编译器
  • UglifyJS
  • 微软AJAX Minifier

当您拥有较大的JavaScript文件时,这会影响页面性能,例如,加载页面所需的时间和对速度的影响,同时压缩或压缩代码将巧妙地解决此问题。


2.在JavaScript中使用范围是前进的好一步


减少对全局变量和闭包的依赖性是提高应用程序性能和速度的另一种方法,并且可以使用名为“ this”的JavaScript Scope来实现。 是的,“这”可以帮助开发人员使用回调编写异步代码。 但是,应避免使用“ with”之类的其他作用域,因为它通过修改作用域链降低了应用程序的性能。


init: function(name) { this.name = name; }, do: function(callback) { callback.apply(this); } }); var bob = new Car('Aventador'); bob.do(function() { alert(this.name); // 'Aventador' is alerted because 'this' was rewired }); 

3.利用阵列过滤器


使用数组过滤器有助于开发人员从数组池中过滤掉所有元素。 这是一种删除通过测试的元素的方法。 简而言之,该方法创建一个数组,该数组为不需要的元素创建一个回调函数。


让我们通过本示例了解它是如何工作的。


 schema = schema.filter(function(n) { return n }); Output:  ["hi","ilove javascript", "goodbye"] 

4.替换函数字符串以替换值


有一个函数'String.replace(),可帮助开发人员使用该函数替换字符串。 例如;


  • 要替换字符串,请使用“字符串”和“正则表达式”
  • 要替换所有字符串,请使用函数'replaceAll()'函数
  • 如果使用的是'Regex',请在末尾使用/ g

让我们从下面给出的示例中了解这一点;


 var string = "login login"; console.log(string.replace("in", "out")); // "logout login" console.log(string.replace(/in/g, "out")); //"logout logout" 

5.使用断点和控制台进行调试


利用断点和调试点,您可以通过设置多个障碍来过滤错误源。 这是您可以执行的操作;


您可以使用F11调用下一个函数,并使用F8恢复脚本执行。


使用控制台,开发人员可以轻松检查该函数创建的动态值以及输出是什么。


6.删除JavaScript库中未使用的组件


在开发过程中,您可能需要诸如jQuery UI或jQuery Mobile之类的库,其中包含大量组件。 因此,您需要确定要加载的组件。 您可以在下载库时执行此操作。


7.使用HTTP / 2可以有所作为


使用最新版本的HTTP协议可以带来巨大的不同,并有助于增强JavaScript性能。 当前,HTTP协议使用HTTP / 2作为其最新版本,并且利用多路复用技术来实现多个请求和响应,这些请求和响应可以同时工作。 HTTPS具有HTTP / 2的所有功能,因此,它也是一个不错的选择。


8.使用“ length”删除/清空数组


使用“长度”,您可以通过删除和清空数组中的元素来调整文件的大小。 您需要使用以下关键字“ array.length”。


让我们看看这里的例子。


 array.length = n 

如;


 var array = [1, 2, 3, 4, 5, 6]; console.log(array.length); // 6 array.length = 3;</strong> console.log(array.length); // 3 console.log(array); // [1,2,3] 

同样,如果要清空数组,则需要使用;


 Array.length = 0;. 

看一下这里的例子;


 var array = [1, 2, 3, 4, 5, 6]; array.length = 0; console.log(array.length); // 0 console.log(array); // [] 

该技术在调整文件大小和增强JavaScript性能方面非常有用。


9.将开关盒套在If / Else上


如果使用if / else,则使用Switch case可使开发人员缩短执行时间。 使用if / else使测试更长。 因此,您需要对其进行评估。


10.缓存DOM对象


使用脚本重复访问某些DOM对象。 例如,对于每个循环,将对对象“ document.images”进行两次查找,如果您有10个这样的图像,则将有20个调用。 让我们看看这里的例子。


 <script type”text/javascript”> for (var i = 0; i &lt;document.images.length; i++) { document.images[i].src=”image.gif”; } <script> 

但是,您可以寻找替代方法,通过减少浏览器加载时间来提高应用程序性能。 这是怎么发生的;


 <script type=”text/javascript”> Var domImages = document.images; For (var i=0; i&lt;domImages.length' i++) domImages[i].src = “image.gif”; <script> 

结论


这些是十大JavaScript hack,它们将帮助您提高应用程序性能。 但是,如果您相信我在这里解释的提示数量可以使列表更完整,那么您就错了。 您可以使用许多类似的技巧来在性能,速度和时间方面获得最大的收益。 此外,它取决于您使用的框架。 这是用作现代前端开发的顶级Javascript框架的列表


此外,我想向您学习。 如果您遇到任何此类攻击,请随时向我们发送电子邮件。 您可以通过各种通信渠道(例如,Skype,WhatsApp或联系我们)发送消息和知识来做到这一点。

Source: https://habr.com/ru/post/zh-CN456544/


All Articles