Why does jquery delay execution?

The reason for jquery’s delayed execution is that in the early days of Web development, the browser’s JavaScript engine was still relatively rudimentary and could not parse and execute some complex JavaScript codes well. As Web applications became more and more The more complex it becomes, the emergence of frameworks such as jQuery solves this problem. At the same time, in order to better protect the page content, you do not want users to see the flickering of DOM elements or other errors in the document when the page is loaded.

Operating system for this tutorial: Windows 10 system, jQuery3.6.0 version, Dell G3 computer.

1. Why does jQuery delay execution?

In the early days of Web development, the browser's JavaScript engine was still relatively crude and could not parse and execute some complex JavaScript codes well. As web applications become more and more complex, frameworks such as jQuery have emerged to solve this problem. At the same time, in order to better protect the page content, you do not want users to see the flickering of DOM elements or other errors in the document when the page is loaded. DOM manipulation and other operations can be performed using the `$(document).ready()` function.

2. What is the function?

Using the `$(document).ready()` function can ensure that the jQuery code will only be executed after the DOM tree is constructed. In other words, this function guarantees the execution time of the jQuery code without being affected by the page loading speed and event triggering time, thus making the code more stable and reliable and avoiding some unnecessary errors.

3. How to do it?

In order to achieve delayed execution of jQuery, you can use the following methods:

1. Wrap the jQuery code in the `$(document).ready()` function, for example:

  ```javascript
  $(document).ready(function () {
      // jQuery code goes here
  });
  ```

2. Alternatively, you can use the shorthand syntax `$()`, as shown below:

```javascript
  $(function () {
      // jQuery code goes here
  });
```

3. Another way is to use the `defer` attribute to delay the execution time of all JavaScript, Make sure to complete parsing of the HTML first, similar to `async`. But they have some subtle differences, such as the order:

```html
  <script src="jquery.js" defer></script>
  <script src="main.js" defer></script>
```

In this way, it is not recommended to use the ready function

The above is the detailed content of Why does jquery delay execution?. For more information, please follow other related articles on the PHP Chinese website!