Improve Website Performance With JavaScript Optimization - inphedia.id

Header Ads

TOPIK

Improve Website Performance With JavaScript Optimization

If JavaScript is modular and does not depend on any JavaScript, use async. Then, if JavaScript calls another JavaScript then use defer.

INPHEDIA.ID - In order not to damage the performance of loading pages in a web browser, when loading JavaScript on an HTML page, you must be careful. Because, when you add JavaScript to an HTML page it can affect the loading time.

In the world of websites, JavaScript is considered a parser blocking resource. This means that HTML document parsing itself can be blocked by JavaScript. When the parser reaches the <script> tag, whether it's internal or external, it will result in the cessation of the page rendering process to take -if the external JavaScript file-- and then run it.

If we load several JavaScript files on the page, this process can be a problem. Because it can also interfere with the time to open JavaScript files. Even when on the page it is not needed.

Every time the HTML parser finds the <script> line, a request will be made to retrieve the script, and the script will be executed. After this process is complete, parsing can be continued, and the rest of the HTML can be analyzed. As you can imagine, this operation can have a major impact on page loading.

Ironically, if the script takes a little longer to load than expected, for example if the internet network is rather slow, visitors will tend to see blank pages until the script is loaded and executed. Fortunately, the <script> element has two attributes, async and defer, which can give us more control over how and when external files are taken and executed.

Normal use of <script>

The normal use of <script> or without any HTML attributes will be described until the JavaScript file is found. At that time, if it's external, the parsing will stop and a request will be made to retrieve the file. The script will then be executed before parsing continues.

<script>

If <script> is placed between the <head> tags, this will be bad because it can affect the page rendering process. A very common solution to this problem is to place the script tag at the bottom of the page, just before the closing tag </ body>.

The solution, use the Async attribute. Because, this technique is the best. HTML parsers can be continued and the script will be executed as soon as it is ready or after it has been successfully loaded.

<async script>

This attribute is only available for externally placed JavaScript files. When external JavaScript has this attribute, files can be downloaded when HTML documents are still parsed. After downloading, parsing is paused so that the script can be executed.

The solution, use the Defer attribute. Because, this process will complete the file download during the HTML parser and will only run after the parser is finished.

<defer script>

As JavaScript is loaded async, files can be downloaded when HTML documents are still parsed. However, even though the file has been downloaded completely before the document has finished being parsed, the script is not executed until the parser is finished.

The question is, when do we use async or defer? The answer, if JavaScript is modular and does not depend on any JavaScript, use async. Then, if JavaScript calls another JavaScript then use defer. (INT / IND / ENG *)

No comments

Siapapun boleh berkomentar, tetapi secara bijaksana dan bertanggung jawab. Komentar sepenuhnya menjadi tanggung jawab individu komentator seperti yang diatur dalam UU ITE (Undang-Undang Informasi dan Transaksi Elektronik).