About window.onload and $(document). Ready

js Code

window.onload=function(){
   console.log(2)
}
console.log(1)

html code has nothing but:

introduce the above js into the head tag
body tag finally introduces
introduce

ide

then compare the consoles of the three cases.

the first case: first 1, then 2. It is not difficult to understand that because the DOM has not been loaded in head, so wait for the document to be loaded first and output 2
the second case: my understanding is that in the final introduction, the js dom has been loaded and it should be 2 after 1. Unfortunately, my test result is still 1 after 2
third case: write script outside the entire html and tag, unfortunately 1 followed by 2

after testing the read function of jquey, the result is the same (there is no picture for typing on mobile phone)

Javascript javascript-html

Mar.06,2021

The essence of

this problem is not DOMContentLoaded and load problems.

the subject can open devtools, to select a network

2.6s 3s :

you can clearly see that console.log was executed first.

first of all, you declare the callback function of js. When the js engine encounters a callback function during parsing, it will throw it into an event queue, and it will not be executed until other code is executed and the trigger condition occurs (here the trigger condition is window.onload).
second, window.onload occurs after all files have been loaded.

.ready ()

jQ corresponds to the DOMContentLoaded event, not load;
The recommended words for .ready () are $(function () {}); or jQuery (function ($) {});
script is written outside the entire html root tag? This is a non-standard way of writing.

Previous: How does vue proactively trigger all input out-of-focus events?

Next: Which vue large file upload component should I choose?