Comparison of the Ready event of JQuery and the load event of JavaScript

To understand the similarities and differences of 2 events, first look at the HTML document loading order

HTML DOM Document loading steps

HTML DOM document loading is performed sequentially, in relation to how the browser renders, generally the order of the browser rendering operations is outlined in several steps

1, parsing the HTML structure

2. Loading external scripts and style sheet files

3. Parsing and executing script code

4, constructing the HTML DOM model

5, loading external files such as pictures

6, page load complete

Timing of execution

The Load event must wait until all the contents of the page have been loaded before it is executed, and if a page contains a multimedia file with big data, the page document is already present, and the load event cannot be triggered even if the page data is not fully loaded. This makes the page rendering and script initialization configuration impossible to save synchronization, which affects the usability of the page.

jquery's ready is executed after the DOM structure has been drawn, which means that it is executed before the external file is loaded, which ensures that the presentation of the document and the script initialization remain in sync.

In summary, the ready event is activated before the Load event, and if no external files are loaded in the Web page document, their response time is essentially the same.

Number of writes

JavaScript's Load event can only be written once, and the following notation is not allowed , at which point he can only affect the last specified event handler.

　　

<script type = ' Text/javascript ' >function() {  alert (' page initialization 1 ');       function () {  alert (' page initialization 2 ');       function () {  alert (' page initialization 3 ');      } </script>

If you want the code in these 3 event handlers to be executed, they are included in a handler function.

<script type = ' Text/javascript ' >varfunction() {    alert ("page initialization 1");} var function () {    alert ("page initialization 2");} var function () {    alert ("page initialization 3"function() {     f1 ();          F2 ();     F3 ();} </script>

For the Ready event type of jquery, we can define it more than once in the same document, for example

<script src = "jquery.1.8.2.js" type = "Text/javascript" > </script><script  type = "Text/javascript" & Gt $(function() {    alert ("page initialization 1"); $ (function() {    alert ( "page initialization 2");}); $ (function() {    alert ("page initialization 3");}); </script>

This is important for configuring the initialization program multiple times in a complex page, so that the user's root bone needs to be designed

　　

Comparison of the Ready event of JQuery and the load event of JavaScript