TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
How to Speed up Your JavaScript Code Performance
Gopi Chand
Apr 30, 2020
17.2k
0
0
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Print
Other Artcile
This article explains how to speed up your JavaScript code performance.
Performance of JavaScript code
There are ways to speed up your JavaScript code performance.
Reduction of activities in loops
In our programming, we often use loops for iteration.
For each iteration of the loop, every statement inside a loop is executed.
The statements or assignments that are to search can be placed outside the loop.
Reduction of DOM Access
As compared to other JavaScript statements, accessing the HTML DOM is very slow.
If you want to access the DOM element several times then, access it once and use it as a local variable.
This is how you can access your DOM element easily as many times you want.
Example
<html>
<body>
<p id=
"dom"
></p>
<script>
var
obj;
obj=document.getElementById(
"dom"
);
obj.innerHTML=
"Hello JavaScript..!!"
;
</script>
</body>
</html>
Output
Reduction of DOM size
In HTML DOM, use only a small number of elements.
This will always make faster page loading and speed up rendering (page display) especially on a small device.
Each attempt to search the DOM like “getElementByTagName” will benefit from a smaller DOM.
Avoid Unnecessary variables
Avoid creating new variables that are not of use to save any value.
This will unnecessarily create a loading problem.
You can replace your code by optimized code.
Example
<p id=
"dom"
></p>
<script>
var
fullName=firstName+
""
+lastName;
fullName=document.getElementById(
"dom"
);
fullName.innerHTML=fullName;
</script>
After reduction or optimization
<p id=
"dom"
></p>
<script>
document.getElementById(
"dom"
).innerHTML=firstName+
""
+lastName;
</script>
Delay JavaScript loading
When you put your JavaScript code at the bottom of the page, then the browser will load the page first.
While a script is downloading, the browser will not start any other downloads. In addition, all parsing and rendering might be blocked.
Note-
The HTTP specification defines that the browsers should not download more than two components in parallel.
There is an alternative to use defer=” true” on your script page. This attribute specifies that the script should be executed before the page has finished the parsing, but it only works for external scripts.
You can also add your script by the code given below.
<script>
window.onload = downScripts;
function
downScripts() {
var
element = document.createElement(
"script"
);
element.src =
"myScript.js"
;
document.body.appendChild(element);
}
</script>
Avoid using “with” keyword
Always avoid using the “with” keyword. It has a negative impact on speed and also clutters up the JavaScript scopes. It is also not allowed in JavaScript “strict mode”.
HTML DOM
JavaScript
JavaScript code performance
Reduction DOM Size
Recommended Free Ebook
JavaScript Interview Q & A
Download Now!
Similar Articles