8 essential tips for your JavaScript code perform faster

JavaScript has ranked as the most popular language in the world by the StackOverflow survey for the seventh year in a row. With the rising popularity of JavaScript, it is clear that it is the most used language for coding frontend applications. It is interesting to note that visitors to websites, lose interest or leave your website if the content doesn’t load within two seconds. The two seconds benchmark is hard to keep up with and that means you need to optimize your JavaScript code for better performance. In this post, we will learn some quick tips that you can follow to keep you JavaScript code concise and improve the overall performance of your application. Alright, let’s dive in.

Tip 1: Minimize accessing the DOM

Accessing the DOM (Document Object Model) directly comes with a cost. If your application happens to access the DOM elements many times, you can instead access it once and use it as a local variable. Remember that, if you remove this value from the DOM, then the variable needs to be set to null, to prevent memory leaks.

React and Vue make use of Virtual DOM

In modern web libraries like React and Vue, they simplify the DOM access and instead use what is called the Virtual DOM. To learn more about the Virtual DOM in React. React and Vue provide great performance with the use of Virtual DOM over the real DOM. And developers don’t need to worry about what happens behind the scene with the DOM access in React or Vue.

If you are using plain JavaScript, then make sure that you minimize access to the DOM as much as you can.

Tip 2: Remove unused code and dependencies

This tip is applicable across any programming language. Removing unused code and dependencies, will ensure that your code compiles faster and performs faster. If you come across features that the users are never using, it would be a good time to deprecate all the code related to that feature. Using analytics can provide insight on how users are using your app. If there are features that are absolutely never touched, you can always discuss with your team and retire these features. This will ensure that your web app loads faster.

We also tend to add a ton of dependency packages to our projects. Make it a point to ensure that you do not have any unwanted dependencies in your project. Also don’t add dependencies to third parties, if you are able to natively code them without additional dependencies.

A clean and concise package will ensure that your website loads faster, and has an improved overall performance.

Tip 3: Call APIs Asynchronously

Using async code for features like API calls, drastically increases the performance of your JavaScript code. With async code, instead of blocking the single thread that JavaScript has, the async events are pushed to a queue that fires up after all the other code executes. Always use asynchronous APIs in your code.

You can learn about using JavaScript’s async/await operation in this post and to understand more about Async programming

Tip 4: Avoid using Global Variables

A standard advice that you will hear from your peers who have been coding in JavaScript for a while, is to avoid the use of global variables as much as possible. The reason behind this is that, it takes longer for the JavaScript engine at runtime to search for variables that exist in the global scope. Another reason to avoid global variables is to avoid collision of variable names. In JavaScript, all of the code shares a single global namespace. When there are many global variables in your code, it can result in collisions between various scripts on the same page.

In the example below, name is a global variable, and has a global scope. It can be used anywhere.

var name = "Adhithi Ravichandran";
// can access name
function myFunction() {
 // can access name
}

This can be re-written to have a local scope instead. We can re-write the code and define the variable within the function. Now the scope of the name variable is within the function only.

// cannot access name
function myFunction() {
 var name = "Adhithi Ravichandran";
 // can access name
}

Always try to use variables in local scope and avoid writing global variables, unless absolutely necessary. You can use JavaScript let and const that have local scope over JavaScript var. This article gives you more insight on var vs. let vs. const.

Tip 5: Profile Your Code and Remove Memory Leaks

Memory leaks are performance killers. Memory leaks use up more and more memory, and eventually take up all of the available memory space and crash your app sometimes. To improve your JavaScript performance, ensure that your code is free of memory leaks. This is a common problem that we have all faced as developers. You can track down your memory leaks, using Chrome Dev Tools. The performance tab can provide you insight into any memory leaks. Watch out for any leaks in your code regularly.

Tip 6: Utilize the power of Caching

Caching your files in the browser will drastically improve the performance of your app and speed up the loading time of the website. The browser will use the locally cached copy for any web pages that are loaded after the initial load, instead of going back and forth and fetching it from the network. This provides a seamless experience to the users.

JavaScript service workers can be used to cache files that can be used while the user is offline. This is an essential piece in creating a Progressive Web App (PWA). Users will still be able to access the site while they are offline with the use of the cached files.

Lighthouse tool

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. This tools is very helpful to run audits on your website, and also indicates if your website qualifies as a Progressive Web App (PWA), based on its capacity to handle offline rendering.

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

Tip 7: Minify your code

Minification of JavaScript code is a common practice that you will find across any development team. It refers to the removal of any unwanted or cumbersome elements from the JavaScript source. The minification process removes things like comments, whitespaces, shortening variable and function names etc..

You can minify your code with build tools like Google Closure compiler or online tools like JS Compress, JS minifier and so on.

This makes a significant improvement to your JavaScript code performance, so don’t forget this step.

Tip 8: Be cautious with Loops

This tip is applicable to all programming languages, especially in JavaScript. When we use lots of loops or nested loops, it impacts the browser. Something to keep in mind, is to keep as much as possible outside the loop, and do only the required operations inside the loop. The less your loop does, the faster the JavaScript code is. Make sure to avoid unnecessary nesting of loops as well in this regard.

Thanks for reading ❤

If you liked this post, please do share/like it with all of your programming buddies!

Follow us on Facebook | Twitter

Originally published at https://programmingwithmosh.com

#javascript #web-development

What is GEEK

Buddha Community

top 30 Python Tips and Tricks for Beginners

Welcome to my Blog , In this article, you are going to learn the top 10 python tips and tricks.

1) swap two numbers.

2) Reversing a string in Python.

3) Create a single string from all the elements in list.

4) Chaining Of Comparison Operators.

5) Print The File Path Of Imported Modules.

6) Return Multiple Values From Functions.

7) Find The Most Frequent Value In A List.

8) Check The Memory Usage Of An Object.

…

#python #python hacks tricks #python learning tips #python programming tricks #python tips #python tips and tricks #python tips and tricks advanced #python tips and tricks for beginners #python tips tricks and techniques #python tutorial #tips and tricks in python #tips to learn python #top 30 python tips and tricks for beginners

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript

According to an analysis, a developer creates 70 bugs per 1000 lines of code on average. As a result, he spends 75% of his time on debugging. So sad!

Bugs are born in many ways. Creating side effects is one of them.

Some people say side effects are evil, some say they’re not.

I’m in the first group. Side effects should be considered evil. And we should aim for side effects free code.

Here are 4ways you can use to achieve the goal.

1. use strict;

Just add use strict; to the beginning of your files. This special string will turn your code validation on and prevent you from using variables without declaring them first.

#functional-programming #javascript-tips #clean-code #coding #javascript-development #javascript

Static Code Analysis: What It Is? How to Use It?

Static code analysis refers to the technique of approximating the runtime behavior of a program. In other words, it is the process of predicting the output of a program without actually executing it.

Lately, however, the term “Static Code Analysis” is more commonly used to refer to one of the applications of this technique rather than the technique itself — program comprehension — understanding the program and detecting issues in it (anything from syntax errors to type mismatches, performance hogs likely bugs, security loopholes, etc.). This is the usage we’d be referring to throughout this post.

“The refinement of techniques for the prompt discovery of error serves as well as any other as a hallmark of what we mean by science.”

• J. Robert Oppenheimer

Outline

We cover a lot of ground in this post. The aim is to build an understanding of static code analysis and to equip you with the basic theory, and the right tools so that you can write analyzers on your own.

We start our journey with laying down the essential parts of the pipeline which a compiler follows to understand what a piece of code does. We learn where to tap points in this pipeline to plug in our analyzers and extract meaningful information. In the latter half, we get our feet wet, and write four such static analyzers, completely from scratch, in Python.

Note that although the ideas here are discussed in light of Python, static code analyzers across all programming languages are carved out along similar lines. We chose Python because of the availability of an easy to use ast module, and wide adoption of the language itself.

How does it all work?

Before a computer can finally “understand” and execute a piece of code, it goes through a series of complicated transformations:

As you can see in the diagram (go ahead, zoom it!), the static analyzers feed on the output of these stages. To be able to better understand the static analysis techniques, let’s look at each of these steps in some more detail:

Scanning

The first thing that a compiler does when trying to understand a piece of code is to break it down into smaller chunks, also known as tokens. Tokens are akin to what words are in a language.

A token might consist of either a single character, like (, or literals (like integers, strings, e.g., 7, Bob, etc.), or reserved keywords of that language (e.g, def in Python). Characters which do not contribute towards the semantics of a program, like trailing whitespace, comments, etc. are often discarded by the scanner.

Python provides the tokenize module in its standard library to let you play around with tokens:

Python

1

import io

2

import tokenize

3

4

code = b"color = input('Enter your favourite color: ')"

5

6

for token in tokenize.tokenize(io.BytesIO(code).readline):

7

    print(token)

Python

1

TokenInfo(type=62 (ENCODING),  string='utf-8')

2

TokenInfo(type=1  (NAME),      string='color')

3

TokenInfo(type=54 (OP),        string='=')

4

TokenInfo(type=1  (NAME),      string='input')

5

TokenInfo(type=54 (OP),        string='(')

6

TokenInfo(type=3  (STRING),    string="'Enter your favourite color: '")

7

TokenInfo(type=54 (OP),        string=')')

8

TokenInfo(type=4  (NEWLINE),   string='')

9

TokenInfo(type=0  (ENDMARKER), string='')

(Note that for the sake of readability, I’ve omitted a few columns from the result above — metadata like starting index, ending index, a copy of the line on which a token occurs, etc.)

#code quality #code review #static analysis #static code analysis #code analysis #static analysis tools #code review tips #static code analyzer #static code analysis tool #static analyzer

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

• For single line comment in JavaScript we have to use // (double slashes)
• For multiple line comments we have to use / * – – * /

<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript