javascript优化_优化性能的十大JavaScript技巧

javascript优化

JavaScript has been ruling the tech arena for more than two decades and helping developers simplifying complex tasks. It allows developers to implement complex task web pages in a most simplified manner. For most of the developers minified JavaScript file is the common phenomena while very few developers may be aware of Optimized JavaScript code. While meeting through many Javascript developers, I have come to know that Optimized JavaScript code is something that confuses developers, some of them might be doing it, but they are not aware of this.

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

什么是优化JavaScript代码 (What is an Optimized JavaScript Code)

When combinations of uniquely programmed logics along with small hacks utilized to enhance performance and speed is known as Optimized JavaScript code. Optimization not only optimizes performance and speed but also saves maximum development time. When you save time, you save some bucks as well.

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

So, I am here with some useful and fruitful hacks to help developers optimize performance, enhance speed and save time. Hope, you like the article and after going through it, you may utilize the best of Optimized JavaScript code.

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

1.通过结合Javascript模块和缩小JS文件，精简JS代码 (1.    Make JS code Leaner with Combining Javascript Modules & Minifying JS Files)

Leaner code make standardized code format, which helps both developers and applications by giving more readability. That is possible when you combine the JavaScript modules and minifies the JS files. Though a minified version of the code may, sometimes, be difficult to read and understand, you will get coding leaner and optimized for sure. When you have a minified source, it helps you in many ways. For example, it can reduce the page load time, remove line breaks, additional spaces, comments, and much more. These benefits are possible as the minified source shrinks file sizes.

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

Optimization is also a kind of JavaScript minification, which play a very crucial role not only in removing and deleting unnecessary things such as spaces, commas, etc. but also helps developers do away with unnecessary code blocks. Here are some of the significant tools and library which help you minify the code are;

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

• Google Closure Compiler
  Google Closure编译器
• UglifyJS
  UglifyJS
• Microsoft AJAX Minifier
  微软AJAX Minifier

When you have larger JavaScript file, it affect page performance such as take time to load page and impact on speed while compressing or minifying code will resolve the issue smartly.

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

2.在JavaScript中使用范围是前进的好一步 (2.    Using Scope in JavaScript is Good Step Forward)

Reducing dependency on global variables and closures is yet another way to enhance performance and speed of the applications and that is possible using a JavaScript Scope named 'this'. Yes, 'this' helps developers write asynchronous code with callbacks. However, another scope like 'with' should be avoided as it drags down the performance of the application by modifying the scope chain.

减少对全局变量和闭包的依赖是提高应用程序性能和速度的另一种方法，并且可以使用名为“ 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.利用阵列过滤器 (3.    Utilizing Array Filter)

Using Array filter helps developers filter out all elements from the array pool. It is a method which removes the elements which pass through testing. In short, the method creates an array which creates a callback function for not-required elements.

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

Let's understand how it works through this example.

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

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

4.替换函数字符串以替换值 (4.    Replace Function String to Replace the Values)

There is a function 'String.replace() which help developers replace strings using the functions. For example;

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

• To replace string, use 'String' and 'Regex'
  要替换字符串，请使用“字符串”和“正则表达式”
• To replace all strings, use function 'replaceAll()' function
  要替换所有字符串，请使用功能'replaceAll()'功能
• Use /g at the end if you are using 'Regex'
  如果使用的是'Regex'，请在末尾使用/ g

Let's get understand this from the example given below;

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

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

5.使用断点和控制台进行调试 (5.    Debugging Using Breakpoints and Console)

Utilizing breakpoints and debugging points, you can filter outsource of error by setting multiple barriers. Here's how you can do this;

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

You can call the next function using F11 and resume script execution using F8.

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

Using console, developers can easily check the dynamic values created by the function and what is the output.

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

6.删除JavaScript库中未使用的组件 (6.    Do Away with Unused Components from JavaScript Library)

During the course of development, you may need libraries like jQuery UI or jQuery Mobile, which come up with loads of components. So, you need to decide which components you want to be loaded. You can do this while downloading the libraries.

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

7.使用HTTP / 2可以有所作为 (7.    Using HTTP/2 can make a Difference)

Using the latest version of HTTP protocol can make a huge difference and provide helping hand in enhancing JavaScript performance. Currently, HTTP protocol uses HTTP/2 as its latest version and it utilizes multiplexing which enables multiple requests and responses which can work at the same time. HTTPS has all the features of HTTP/2 and therefore, it can also be a great option to move with.

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

8.使用“ length”删除/清空数组 (8.    Delete / Empty in an Array Using 'length')

Using 'length' you can resize the file by deleting and emptying elements in the array. You need to use the following keyword, 'array.length'.

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

Let's take a look at the example here;

让我们看看这里的例子。

array.length = n

Such as;

如;

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]

Similarly, if you want empty the array, you need to use;

同样，如果要清空数组，则需要使用；

Array.length = 0;.

Take a look at the example here;

看一下这里的例子。

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

The technique is very useful in resizing the file and enhancing the JavaScript performance.

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

9.将开关盒套在If / Else上 (9.    Apply Switch Case over If / Else)

Using the Switch case over if/else enables developers to shorten execution time. Using if/else makes testing lengthier. Therefore, you need to evaluate it.

在if / else上使用Switch案例可以使开发人员缩短执行时间。 使用if / else会使测试时间更长。 因此，您需要对其进行评估。

10.缓存DOM对象 (10. Caching DOM Object)

Using script repeatedly accesses certain DOM objects. For example, the object "document.images" will be looked up two times for each loop and if you have 10 such images, then there will be 20 calls. Let's look at the example here.

使用脚本重复访问某些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>

However, you can look for the alternative which will improve the application performance by reducing the browser loading time. Here's how it happens;

但是，您可以寻找替代方法，通过减少浏览器加载时间来提高应用程序性能。 这是怎么回事？

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

Conclusion

结论

These are the top 10 JavaScript hacks, which will help you improve application performance. However, if you believe that the number of tips I have explained here completes the list, then you are mistaken. There are plenty of similar hacks are there which you apply to gain maximum benefits in terms of performance, speed, and time. Further, it depends on frameworks you used. Here is a list of Top Javascript Frameworks to be used as modern front end development

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

Furthermore, I would love to learn from you. If you come across any such hack/s, then never hesitate to email us. You can do this by sending your message and knowledge through various communication channels such through Skype, WhatsApp, or Contact Us.

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

翻译自: https://habr.com/en/post/456544/

javascript优化