Long JavaScript code execution time

The execution time for a separately loaded JavaScript file is 0.05 seconds. And the total of all inline scripts in the HTML code of the page is 0.15 seconds.

The long execution is due to the following reasons:

Non-optimized JavaScript code. Code that does not perform the task in the fastest way. It is necessary to rewrite such code so that it continues to perform the same task, but requires less computing resources.
Large JavaScript file. There are files larger than 1 megabyte. For example, the Google captcha code weighs 900 KB. Postpone the download of similar files so as not to delay the page loading.

Content

JavaScript code optimization

First of all, you need to find the problem area of the JavaScript code. To do this, you need to profile it. Profiling is a measurement of the speed of execution of different sections of the code. These can be either individual lines or entire functions. This can be done in 2 ways: by placing beacons with runtime output and using a special profiler built into the browser ([FireFox] (https://profiler .firefox.com/docs/#/) Chrome).

The beacon for measuring the execution time of a section of code looks like this: language-javascript console.time('name'); // Here we have the code for counting the time console.timeEnd('name'); // Output "name: 3241ms - timer is over"

At the beginning of optimization, you need to find a function whose execution takes several tens of percent of resources. The easiest way to do this is with the help of a profiler built into the browser ([FireFox](https://profiler .firefox.com/docs/#/) Chrome).

This is the result of profiling the opening of the YouTube homepage. We see that the value() method is in the custom-elements-es5-adapter file.js on line 11 in column 8 takes as much as 15% of the execution time on the entire page.

After you have found a slow section of the code, you need to investigate it and find ways to optimize it. The following solutions may work:

Find a specific JavaScript API method or string that takes a long time to execute and try to rewrite them.
Simply remove the slow code, if possible.
Call this code not immediately, but after loading the page.

Profiling and code optimization is one of the most highly qualified works in programming. Solving such problems is a great way to grow professionally.

Lessons

Long JavaScript code execution time

JavaScript code optimization

PRO subscription for working with the service