The onload in JS and the ready difference in jquery

the execution mechanism of jquery (the difference between onload and ready)

conclusion before self-test : In order to test whether it is true, so in the page inserted 20000 photos, the number of photos is not a conclusion, So I use Console.log () to test, so I can see very well at the bottom of the page is not all loaded out, there is a printout of the results of the sequence of events.

The JS code used is:

Console.time (' name ');    Window.onload = function () {            console.log (' onload2 ');            Console.timeend (' name ');}

At first I was putting console.timeend (' name '); after Onliad, the onload was separate, but the problem was that the display time was 0. 

So find out the reason is that onload after the page is executed, that is, the label and the image is loaded before the corresponding JS code to execute,

After running the test; OnLoad takes a powerful role in 20000 photos:30ms

Ready test:

The JS code used is:

Console.time (' name ');   Console.time (' name ');    $ (document). Ready (function () {console.log (' ready1 '); Console.timeend (' name ');})

When you run a ready JQ code, ready is displayed when the page has not been loaded, and the time is 20ms

I added two onload at the time of the test, and then I added two ready to do a test,

window.onload = function () {console.log (' onload1 '); }window.onload = function () {console.log (' onload2 ');}

&N BSP; console.time (' name '); $ (document). Ready (function () {console.log (' ready1 '); }) console.time (' name '); $ (document). Ready (function () {console.log (' ready2 '); })

The results of the display run are:

It can be seen that, based on the previous summary of the situation, ready than onload output results, that is, the implementation of the mechanism is different, and then see, onload2 output, onload1 but no output, you can see, in the writing of the number of display, Ready supports writing multiple numbers and outputting them sequentially , while OnLoad supports only one, the latter with high precedence .

Summarize:

① Execution Time:

onload: the entire document (including loading pictures and other information) can be directly manipulated by the DOM after loading, such as a picture to wait for the icon to be loaded to set the image width of the property or style, etc. Ready : After the DOM loading is completed, you can directly manipulate the DOM, such as a picture as long as the tag is complete, do not wait for the picture to be loaded, you can set the image of the width of the property or style, etc.;

② Write Number:

&NBSP;<SCRIPT>       window.onload = function () {           alert (1);     }      window.onload = function () {     //Popup only & nbsp;         alert (11);     }      $ (document). Ready (function () {   //pop-up 2  22  in order;            alert (2);     });            $ (document). Ready (function () {            alert (22);     });         </script> Run Result: Popup order:   2 ---> ---; one

③ Shorthand

window.onload no shorthand form

$ (document). Ready () can be abbreviated as $ ()

$ () = = = $ (document). Ready

$ (document). Ready (function () {alert (2);    }); Equivalent to: $ (function () {alert (2); })