Home Web Front-end JS Tutorial Summary of how JavaScript improves code performance

Summary of how JavaScript improves code performance

Jul 26, 2017 pm 01:47 PM
javascript js performance

Use string accumulation calculation style

Using the + operation will create a new string in memory and assign the connected value to it. Just assign the result to a variable.
In order to avoid connecting the intermediate variables of the result, you can use += to directly assign the result.

Code that runs slowly:

a += 'x' + 'y';
Copy after login

Code that runs faster:

a += 'x'; a += 'y';
Copy after login


Original Operations will be faster than function calls
Consider using alternative original operations in loops and functions where performance requirements are critical.
Code that runs slowly:

var min = Math.min(a, b); 
arr.push(val);
Copy after login

Code that runs faster:

var min = a < b ? a : b; 
arr[arr.length] = val;
Copy after login

Pass the function name when setting setTimeout() and setInterval() Not a string

If you pass a string to setTimeout() or setInterval(), the string will be eval calculated and cause slowness.
Use an anonymous function wrapper instead so that it can be interpreted and optimized at compile time.

Code that runs slowly:

setInterval(&#39;doSomethingPeriodically()&#39;, 1000); 
setTimeOut(&#39;doSomethingAfterFiveSeconds()&#39;, 5000);
Copy after login

Code that runs faster:

setInterval(doSomethingPeriodically, 1000); 
setTimeOut(doSomethingAfterFiveSeconds, 5000);
Copy after login

Avoid using unnecessary DOM references in objects

Don’t do this:

var car = new Object(); 
car.color = "red"; 
car.type = "sedan"
Copy after login

A better form:

var car = { 
color : "red"; 
type : "sedan" 
}
Copy after login

Clearest target speed, minimized scope Chain

Inefficient method:

var url = location.href;
Copy after login

An efficient form:

var url = window.location.href;
Copy after login

Try to use fewer comments in the script and avoid using long variable names
Keep comments as few as possible or avoid using comments, especially in functions, loops and arrays.
Comments unnecessarily slow down script execution and increase file size. For example:

Not recommended form:

function someFunction() 
{ 
var person_full_name="somename"; /* stores the full name*/ 
}
Copy after login

Better way to write:

function someFunction() 
{ 
var name="somename"; 
}
Copy after login

Storage external variables of the application in the current scope
When a function is executed in the context of execution, an active object containing all local variables will be pushed to the front of the context chain.
In the scope chain, the slowest is the clear identification identifier, which means that local variables are the fastest. Reading and writing frequently used external variables will be significantly faster. This is especially noticeable for global variables and other deep identifier lookups.
Similarly, variables in the current scope (var myVar) are accessed faster than objects like properties (this.myVar).

Code that runs slowly:

function doSomething(text) { 
var ps = document.getElementsByTagName(&#39;p&#39;), 
text = [&#39;foo&#39;, /* ... n ... */, &#39;bar&#39;]; 
for (var i = 0, l = ps.length; i < l; i++) { 
ps[i].innerHTML = text[i]; 
} 
}
Copy after login

Code that runs faster:

function doSomethingFaster(text) { 
var doc = document, 
ps = doc.getElementsByTagName(&#39;p&#39;), 
text = [&#39;foo&#39;, /* ... n ... */, &#39;bar&#39;]; 
for (var i = 0, l = ps.length; i < l; i++) { 
ps[i].innerHTML = text[i]; 
} 
}
Copy after login

If you need to access an element (such as head) in a large In the loop, it will be faster to use a local DOM access (such as get in the example).
Run faster code:

function doSomethingElseFaster() { 
var get = document.getElementsByTagName; 
for (var i = 0, i < 100000; i++) { 
get(&#39;head&#39;); 
} 
}
Copy after login

Use variables to cache values ​​
Use local variables to cache values ​​where you do repeated work.
The following set of examples illustrates the broad significance of storing values ​​in local variables.

Example 1. Use variables to store mathematical functions in the loop body before calculation execution
Wrong method:

var d=35; 
for (var i=0; i<1000; i++) { 
y += Math.sin(d)*10; 
}
Copy after login

Better processing:

var d = 55; 
var math_sind = Math.sin(d)*10; 
for (var i=0; i<1000; i++) { 
y += math_sind; 
}
Copy after login


Example 2. Save the length of the array using
Poor processing in a loop:
The length of the array will be recalculated every time

for (var i = 0; i < arr.length; i++) { 
// do something 
}
Copy after login

Better improvement:
A better way is to save The length of the array

for (var i = 0, len = arr.length; i < len; i++) { 
// do something 
}
Copy after login

In general, if it has been done once, we do not need to do unnecessary work repeatedly. For example, if the value of a calculated expression is used multiple times in a scope or function, saving it to a variable allows it to be used multiple times, otherwise we would overdo it by declaring a variable and assigning it a value that only applies once. So please keep these in mind.


The above is the detailed content of Summary of how JavaScript improves code performance. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Windows 10 vs. Windows 11 performance comparison: Which one is better? Windows 10 vs. Windows 11 performance comparison: Which one is better? Mar 28, 2024 am 09:00 AM

Windows 10 vs. Windows 11 performance comparison: Which one is better? With the continuous development and advancement of technology, operating systems are constantly updated and upgraded. As one of the world's largest operating system developers, Microsoft's Windows series of operating systems have always attracted much attention from users. In 2021, Microsoft released the Windows 11 operating system, which triggered widespread discussion and attention. So, what is the difference in performance between Windows 10 and Windows 11? Which

Comparing the performance of Win11 and Win10 systems, which one is better? Comparing the performance of Win11 and Win10 systems, which one is better? Mar 27, 2024 pm 05:09 PM

The Windows operating system has always been one of the most widely used operating systems on personal computers, and Windows 10 has long been Microsoft's flagship operating system until recently when Microsoft launched the new Windows 11 system. With the launch of Windows 11 system, people have become interested in the performance differences between Windows 10 and Windows 11 systems. Which one is better between the two? First, let’s take a look at W

Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages ​​and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

Kirin 8000 processor competes with Snapdragon series: Who can be king? Kirin 8000 processor competes with Snapdragon series: Who can be king? Mar 25, 2024 am 09:03 AM

In the era of mobile Internet, smartphones have become an indispensable part of people's daily lives. The performance of smartphones often directly determines the quality of user experience. As the &quot;brain&quot; of a smartphone, the performance of the processor is particularly important. In the market, the Qualcomm Snapdragon series has always been a representative of strong performance, stability and reliability, and recently Huawei has also launched its own Kirin 8000 processor, which is said to have excellent performance. For ordinary users, how to choose a mobile phone with strong performance has become a key issue. Today we will

The local running performance of the Embedding service exceeds that of OpenAI Text-Embedding-Ada-002, which is so convenient! The local running performance of the Embedding service exceeds that of OpenAI Text-Embedding-Ada-002, which is so convenient! Apr 15, 2024 am 09:01 AM

Ollama is a super practical tool that allows you to easily run open source models such as Llama2, Mistral, and Gemma locally. In this article, I will introduce how to use Ollama to vectorize text. If you have not installed Ollama locally, you can read this article. In this article we will use the nomic-embed-text[2] model. It is a text encoder that outperforms OpenAI text-embedding-ada-002 and text-embedding-3-small on short context and long context tasks. Start the nomic-embed-text service when you have successfully installed o

Performance comparison of different Java frameworks Performance comparison of different Java frameworks Jun 05, 2024 pm 07:14 PM

Performance comparison of different Java frameworks: REST API request processing: Vert.x is the best, with a request rate of 2 times SpringBoot and 3 times Dropwizard. Database query: SpringBoot's HibernateORM is better than Vert.x and Dropwizard's ORM. Caching operations: Vert.x's Hazelcast client is superior to SpringBoot and Dropwizard's caching mechanisms. Suitable framework: Choose according to application requirements. Vert.x is suitable for high-performance web services, SpringBoot is suitable for data-intensive applications, and Dropwizard is suitable for microservice architecture.

Comparison of PHP and Go languages: big performance difference Comparison of PHP and Go languages: big performance difference Mar 26, 2024 am 10:48 AM

PHP and Go are two commonly used programming languages, and they have different characteristics and advantages. Among them, performance difference is an issue that everyone is generally concerned about. This article will compare PHP and Go languages ​​from a performance perspective, and demonstrate their performance differences through specific code examples. First, let us briefly introduce the basic features of PHP and Go language. PHP is a scripting language originally designed for web development. It is easy to learn and use and is widely used in the field of web development. The Go language is a compiled language developed by Google.

PHP array key value flipping: Comparative performance analysis of different methods PHP array key value flipping: Comparative performance analysis of different methods May 03, 2024 pm 09:03 PM

The performance comparison of PHP array key value flipping methods shows that the array_flip() function performs better than the for loop in large arrays (more than 1 million elements) and takes less time. The for loop method of manually flipping key values ​​takes a relatively long time.

See all articles