{"id":1407,"date":"2020-08-14T16:40:56","date_gmt":"2020-08-14T16:40:56","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1407"},"modified":"2020-08-14T16:40:56","modified_gmt":"2020-08-14T16:40:56","slug":"14-javascript-code-optimization-tips-for-front-end-developers","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1407","title":{"rendered":"14 JavaScript Code Optimization Tips for Front-End Developers"},"content":{"rendered":"\n

JavaScript has become one of the most popular programming languages of all time. It is used by almost 96% of websites all over the world according to\u00a0W3Tech<\/a>. <\/p>\n\n\n\n\n\n\n\n

One key fact you should know about the web is that you have no control over the hardware specifications of the devices your user would access your website on. The end-user may access your website on a high-end or a low-end device with either great or poor internet connection. This means that you have to make sure your website is optimized as much as possible for you to be able to satisfy the requirements of any user.<\/p>\n\n\n\n

Here are a few tips for you to have a better-optimized JavaScript code that would result in greater performance.<\/p>\n\n\n\n

As a side-note, make sure to share and reuse your JS components to keep the right balance between high-quality code (that takes time to produce) and reasonable delivery times. You can use popular tools like Bit<\/strong><\/a> (Github<\/a>), to share components (vanilla JS, TS, React, Vue, etc.) from any project to Bit\u2019s component hub<\/a>, without losing too much time over it.teambit\/bitDocumentation * Tutorials * Quick start guide * Workflows * bit.dev components cloud * Video demo Bit is an open-source\u2026github.com<\/a><\/p>\n\n\n\n

\n\n\n\n

1. Remove Unused Code and Features<\/h1>\n\n\n\n

The more code your application contains, the more data needs to be transmitted to the client. It would also require more time for the browser to analyze and interpret the code.<\/p>\n\n\n\n

Sometimes, you might include features that are not used at all. It is better to keep this extra code only in the development environment, and not to push it for production so that you would not burden the client\u2019s browser with unused code.<\/p>\n\n\n\n

Always ask yourself whether that function, feature, or piece of code is a necessity.<\/em><\/p>\n\n\n\n

You can remove unused code manually or by using tools such as Uglify<\/a> or Google\u2019s Closure Compiler<\/a>. You can even use a technique called tree shaking which removes unused code from your application. Bundlers such as Webpack provide this technique. You can read more about tree shaking over here<\/a>. If you want to remove unused npm packages, you can use the command npm prune<\/code> . More info can be read from NPM docs.<\/a><\/p>\n\n\n\n

\n\n\n\n

2. Cache Whenever Possible<\/h1>\n\n\n\n

Caching increases the speed and performance of your website by reducing latency and network traffic and thus lessening the time needed to display a representation of a resource. This can be achieved with the help of the Cache API<\/a> or HTTP caching<\/a>. You might wonder what happens when your content changes. The above caching mechanisms are capable of handling and regenerating the cache when certain conditions are met such as the publishing of new content.<\/p>\n\n\n\n

\n\n\n\n

3. Avoid Memory Leaks<\/h1>\n\n\n\n

Being a high-level language, JS looks after several low-level management such as memory management. Garbage collection is a process common for most programming languages. Garbage Collection in layman terms is simply collecting and freeing back memory of which has been allocated to objects but which is not currently in use in any part of our program. In programming languages like C, the developer has to take care of memory allocation and deallocation using malloc()<\/code> and dealloc()<\/code> functions.<\/p>\n\n\n\n

Even though garbage collection is performed automatically in JavaScript, there can be certain instances where it will not be perfect. In JavaScript ES6, Map and Set were introduced with their \u201cweaker\u201d siblings. This \u201cweaker\u201d counterpart known as WeakMap and WeakSet hold \u201cweak\u201d references to objects. They enable unreferenced values to be garbage collected and thereby prevent memory leaks. You can read more about WeakMaps here<\/a>.<\/p>\n\n\n\n

\n\n\n\n

4. Try to Break Out of Loops Early<\/h1>\n\n\n\n

Looping for large cycles can definitely consume a lot of precious time. That is why you should always try to break out of a loop early. You can do this with the help of the break<\/code> keyword and continue<\/code> keyword. It is your responsibility to write the most efficient code.<\/p>\n\n\n\n

In the below example, if you did not break<\/code> from the loop, your code will run the loop 1000000000 times which is clearly in an overload.<\/p>\n\n\n\n

let arr = new Array(1000000000).fill('----');
arr[970] = 'found';
for (let i = 0; i < arr.length; i++) {
  if (arr[i] === 'found') {
        console.log(\"Found\");
        break;
    }
}<\/pre>\n\n\n\n
In the below example, if you did not continue<\/code> when the loop does not match your condition, you will still be running the function 1000000000 times. We only process the array element if it is in even position. This reduces the loop execution by almost half.<\/p>\n\n\n\n
let arr = new Array(1000000000).fill('----');
arr[970] = 'found';
for (let i = 0; i < arr.length; i++) {
  if(i%2!=0){
        continue;
    };
    process(arr[i]);
}<\/pre>\n\n\n\n
You can read more about loops and performance over here<\/a>.<\/p>\n\n\n\n
\n\n\n\n
5. Minimize the Number of Times the Variables Get Computed<\/h1>\n\n\n\n
To reduce the number of times a variable gets computed, you can use closures. In layman terms, closures in JavaScript gives you access to an outer functions scope from an inner function. The closures are created every time a function is created-not called<\/strong>. The inner functions will have access to the variables of the outer scope, even after the outer function has returned.<\/p>\n\n\n\n
Let\u2019s see two examples to see this in action. These examples are inspired from Bret\u2019s blog.<\/p>\n\n\n\n
function findCustomerCity(name) {
  const texasCustomers = ['John', 'Ludwig', 'Kate']; 
  const californiaCustomers = ['Wade', 'Lucie','Kylie'];
  
  return texasCustomers.includes(name) ? 'Texas' : 
    californiaCustomers.includes(name) ? 'California' : 'Unknown';
};<\/pre>\n\n\n\n
If we call the above functions several times, each time a new object is created. For every call, memory is unnecessarily re-allocated to the variables texasCustometrs<\/code> and californiaCustomers<\/code> .<\/p>\n\n\n\n
By using a solution with closures, we can instantiate the variables only once. Let\u2019s look at the below example.<\/p>\n\n\n\n
function findCustomerCity() {
  const texasCustomers = ['John', 'Ludwig', 'Kate']; 
  const californiaCustomers = ['Wade', 'Lucie','Kylie'];
  
  return name => texasCustomers.includes(name) ? 'Texas' : 
    californiaCustomers.includes(name) ? 'California' : 'Unknown';
};let cityOfCustomer = findCustomerCity();cityOfCustomer('John');\/\/Texas
cityOfCustomer('Wade');\/\/California
cityOfCustomer('Max');\/\/Unknown<\/pre>\n\n\n\n
In the above example, with the help of closures, the inner function which is being returned to the variable cityOfCustomer<\/code> has access to the constants of the outer function findCustomerCity()<\/code> . And whenever the inner function is being called with the name passed as a parameter, it does not need to instantiate the constants again. To learn more about closures, I suggest you go through this blog post<\/a> by Prashant.<\/p>\n\n\n\n
\n\n\n\n
6. Minimize DOM Access<\/h1>\n\n\n\n
Accessing the DOM is slow, compared to other JavaScript statements. If you make changes to the DOM that would trigger re-painting of the layout, this is where things can get quite slow.<\/p>\n\n\n\n
To reduce the number of times you access a DOM element, access it once, and use it as a local variable. When the need is complete, make sure to remove the value of the variable by setting it to null<\/code> . This would prevent memory leakage as it would allow the garbage collection process to take place.<\/p>\n\n\n\n
\n\n\n\n
7. Compress Your Files<\/h1>\n\n\n\n
By using compression methods such as Gzip, you can reduce the file size of your JavaScript files. These smaller files would result in an increase in your website performance as the browser would need to download smaller assets.<\/p>\n\n\n\n
These compressions can reduce your file size by up to 80%. Read more about compression here<\/a>.<\/p>\n\n\n\n
\"Image
Photo by JJ Ying<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
8. Minify Your Final Code<\/h1>\n\n\n\n
Some people believe that minification and compression are the same. But on the contrary, they are different. In compression special algorithms are used to change the output size of the file. In minification, the comments and extra spaces in JavaScript files, need to be removed. This process can be done with the help of many tools and packages that can be found online. Minification has become standard practice for page optimization and a major component of front end optimization.<\/p>\n\n\n\n
Minification can reduce your file size by up to 60%. You can read more about minification here<\/a>.<\/p>\n\n\n\n
\n\n\n\n
9. Use Throttle and Debounce<\/h1>\n\n\n\n
By using these two techniques, we can strictly enforce the number of times your event needs to be handled by your code.<\/p>\n\n\n\n
Throttling is where you specify a maximum number of times a function can be called overtime. For example, \u201cexecute the onkeyup<\/code> event function at most once every 1000 milliseconds\u201d. This would mean that if you type 20 keys per second, the event will be fired only once every second. This would reduce the load on your code.<\/p>\n\n\n\n
On the other hand, debouncing is where you specify a minimum duration of time for a function to be run again since the previous execution of the same function. In other words, \u201cexecute this function only if 600 milliseconds have passed without it being called\u201d. This would mean that your function would not be called until 600 milliseconds have passed since the last execution of the same function. To know more about throttling and debouncing, here is a quick read for you<\/a>.<\/p>\n\n\n\n
You can either implement your own debounce and throttle functions or you can import them from libraries such as Lodash<\/a> and Underscore<\/a>.<\/p>\n\n\n\n
\n\n\n\n
10. Avoid Using the Delete Keyword<\/h1>\n\n\n\n
The delete<\/code> keyword is used to remove a property from an object. There have been several complaints regarding the performance of this delete<\/code> keyword. You can view them here<\/a> and here<\/a>. It was expected to be fixed in future updates.<\/p>\n\n\n\n
As an alternative, you can simply to set the unwanted property as undefined<\/code>.<\/p>\n\n\n\n
const object = {name:\"Jane Doe\", age:43};
object.age = undefined;<\/pre>\n\n\n\n
You can also use the Map object as it\u2019s delete<\/code> method is known to be faster according to Bret<\/a>.<\/p>\n\n\n\n
\n\n\n\n
11. Use Asynchronous Code to Prevent Thread Blocking<\/h1>\n\n\n\n
You should know that JavaScript is synchronous by default and is also single-threaded<\/strong>. But there can be instances where your code requires a lot of time to compute. Being synchronous in nature would mean that, this piece of code would block other code statements from running until it is done executing. This would reduce your performance overall.<\/p>\n\n\n\n
But we can avert this situation by implementing asynchronous code. Asynchronous code was earlier written in the form of callbacks, but a new style of handling asynchronous code was introduced with ES6. This new style was called promises. You can learn more about callbacks and promises in the official docs of MDN<\/a>.<\/p>\n\n\n\n
But wait\u2026<\/strong><\/p>\n\n\n\n
JavaScript is synchronous by default and is also single-threaded<\/strong>.<\/p><\/blockquote>\n\n\n\n
How can you run on a single thread yet still manage to run asynchronous code? This is where a lot of people get confused. This is possible thanks to the JavaScript engine that runs under the browser hood. A JavaScript engine is a computer program or an interpreter which executes JavaScript code. A JavaScript engine can be written in a wide variety of languages. For example, the V8 engine which powers Chrome browsers was written in C++, while the SpiderMonkey engine which powers Firefox browsers was written in C and C++.<\/p>\n\n\n\n
These JavaScript engines can handle tasks in the background. According to Brian<\/a>, the callstack recognizes functions of the Web API and hands them off to be handled by the browser. Once those tasks are finished by the browser, they return and are pushed onto the stack as a callback.<\/p>\n\n\n\n
You might sometimes wonder, how does things happen with Node.js as it has no help of the browser to run. In fact, the same V8 engine that powers Chrome also powers Node.js as well. Here is an awesome blog post<\/a> by Salil that explains this process on the Node ecosystem.<\/p>\n\n\n\n
\n\n\n\n
12. Use Code Splitting<\/h1>\n\n\n\n
If you have experience with Google Light House, you would be familiar with a metric called \u201cfirst contentful paint\u201d. It is one of the six metrics tracked in the Performance section of the Lighthouse report.<\/p>\n\n\n\n
First Contentful Paint(FCP)measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white <canvas><\/code> elements and SVGs on your page are considered DOM content; anything inside an iframe isn’t<\/em> included.<\/p>\n\n\n\n
One of the best ways to achieve a higher FCP score is to use code splitting. Code splitting is a technique where you send only the necessary modules to the user in the beginning. This would greatly impact the FCP score by reducing the size of the payload transmitted initially.<\/p>\n\n\n\n
Popular module bundlers such as webpack provide you with code splitting functionality. You can also get the help of native ES modules, to get individual modules loaded. You can read more about native ES modules in detail over here<\/a>.<\/p>\n\n\n\n
\n\n\n\n
13. Use async and defer<\/h1>\n\n\n\n
In modern websites, scripts are more intensive than HTML, where their size is bigger and they consume more processing time. By default, the browser must wait until the script downloads, execute it, and then it processes the rest of the page.<\/p>\n\n\n\n
This can lead to your bulky script blocking the loading of your webpage. In order to escape this, JavaScript provides us with two techniques known as async and defer. You have to simply add these attributes to the <script><\/code> tags.<\/p>\n\n\n\n
Async is where you tell the browser to load your script without affecting the rendering. In other words, the page doesn\u2019t wait for async scripts, the contents are processed and displayed.<\/p>\n\n\n\n
Defer is where you tell the browser to load the script after your rendering is complete. If you specify both, async<\/code> takes precedence on modern browsers, while older browsers that support defer<\/code> but not async<\/code> will fallback to defer<\/code><\/p>\n\n\n\n
These two attributes can greatly help you reduce your page loading time. I highly advise you to read this blog post<\/a> by Flavio.<\/p>\n\n\n\n
\n\n\n\n
14. Use Web Workers to Run CPU Intensive Tasks in the Background<\/h1>\n\n\n\n
Web Workers allow you to run scripts in background threads. If you have some highly intensive tasks, you can assign them to web workers which would run them without interfering with the user interface. After creation, the web worker can communicate with the JavaScript code by posting messages to an event handler specified by that code. This can happen vice versa as well.<\/p>\n\n\n\n
To know more about web workers, I suggest you go through the MDN Docs<\/a>.<\/p>\n\n\n\n
\n\n\n\n
That\u2019s it for this post. Drop your queries in the comments.<\/p>\n\n\n\n
Happy Coding!!<\/p>\n\n\n\n
\n\n\n\n
Share & Manage Reusable JS Components with Bit<\/a><\/h1>\n\n\n\n
Use Bit<\/strong><\/a> (Github<\/a>) to share, document, and manage reusable components from different projects. It\u2019s a great way to increase code reuse, speed up development, and build apps that scale.<\/p>\n\n\n\n
\"Image
Example: exploring shared React components on Bit.dev<\/a><\/figcaption><\/figure>\n\n\n\n
The shared component cloud<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
JavaScript has become one of the most popular programming languages of all time. It is used by almost 96% of websites all over the world according to\u00a0W3Tech.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[113],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1407"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1407"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1407\/revisions"}],"predecessor-version":[{"id":1408,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1407\/revisions\/1408"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}