Detailed explanation of asynchronous loading of JavaScript

This time I will bring you a detailed explanation of asynchronous loading of JavaScript, and what are the precautions for handling asynchronous loading of JavaScript. The following is a practical case, let's take a look.

The problem of synchronous loading

The default js is loaded synchronously. The "loading" here can be understood as parsing and execution rather than "downloading". In the latest version of the browser , the browser loads the resources requested by the code in a waterfall style instead of blocking, but the execution of js is always blocked. What problems does this cause? If my index page needs to load some js, but one of the requests does not get a response for a long time, it blocks the execution of the subsequent js code (synchronous loading), and the page rendering cannot continue (if the js introduction is in the head after the label).

<script></script>
<script></script>
this is a test

For example, the above code is saved as an index.html file. The main body of the page is a simple string, but after the code is executed, the page remains blank. Why? Because the requested js cannot be loaded for a long time (possibly due to Google being blocked, etc.), the execution of the subsequent code is blocked and the page cannot be rendered. Maybe you will suggest that if you put the js code before

The above is the detailed content of Detailed explanation of asynchronous loading of JavaScript. For more information, please follow other related articles on the PHP Chinese website!