Will jquery be executed after all js are loaded?

When we use JavaScript and jQuery, we usually need to pay attention to the execution order of the code, especially when it comes to asynchronous loading, dependencies, event callbacks, etc., we need to think carefully. One of the common questions is: Will jQuery execute all js immediately after loading?

First, we need to understand some basic knowledge. There are two ways to load JavaScript files in the browser: synchronously and asynchronously.

Synchronous loading means that when the browser parses HTML tags, it loads JavaScript files one by one in the order of the tags, and after the loading is completed, executes the JavaScript code in sequence. This method is relatively simple, but if the page contains a large number of JavaScript files, it will affect the page loading speed, because the browser needs to download the JavaScript files before it can continue to load other parts of the page, causing the page to load slowly.

Asynchronous loading means that when the browser loads HTML tags, it does not block the loading of other parts of the page. When encountering a JavaScript file that needs to be loaded, the browser will continue to load the page and load the JavaScript file asynchronously. When the JavaScript file is loaded, the browser will not execute it immediately, and the order of execution has nothing to do with the order in which the files are loaded. Generally, asynchronously loaded JavaScript files will be executed immediately after the page is loaded, but this is not absolute.

So back to the question itself, will jQuery execute it immediately after all js files are loaded? The answer is not necessarily.

If we load jQuery's js files using synchronous loading, jQuery will be executed immediately after all js files are loaded. Because in the case of synchronous loading, the browser must first load the JavaScript file before it can continue to parse the HTML tags. Therefore, after loading the jQuery js file, the code will be executed immediately.

However, in modern web applications, we more often use asynchronous loading to load JavaScript files, because this can improve page loading speed and also help with code optimization and maintenance. In this case, jQuery's js file will not be executed immediately after loading, because the browser will continue to load other parts of the page. That is to say, when jQuery's js file is loaded, it will not be executed immediately until the browser The browser completes page parsing and rendering, and waits for all asynchronous scripts to be loaded and parsed before jQuery will be executed.

However, it should be noted that if we use jQuery document loading events such as $(document).ready() or $(function(){}) in the code, then these events will be processed in jQuery Executed immediately after loading. Because these events are bound to the document object, and the document object is not loaded until the page is parsed and rendered. Therefore, when the jQuery js file is loaded asynchronously, although the code will not be executed immediately, once the document object is loaded, the event bound to the document object will be triggered and executed. Therefore, all uses of $(document).ready( ) or $(function(){}) and other jQuery document loading event code will be executed immediately after jQuery is loaded.

To sum up, whether all jQuery js will be executed immediately after loading depends on the loading method and code logic. If it is a synchronous loading method and the code is not bound to the document loading event, it will be executed after the loading is completed. Execute immediately; if it is an asynchronous loading method or code bound to a document loading event, you need to wait for the execution opportunity. Therefore, when writing JavaScript code for web pages, you need to fully understand the methods and principles of JavaScript and jQuery loading in order to better optimize the code and improve application performance.

The above is the detailed content of Will jquery be executed after all js are loaded?. For more information, please follow other related articles on the PHP Chinese website!