Differences between onload in JS and ready in jQuery

JQuery execution mechanism(Differences between onload and ready)

Self-Test Before conclusion: To test whether 20000 photos are inserted on the page, the number of photos is small, so I switched to the console. log () to test, so that I can see whether all of them are loaded at the bottom of the page, and the event sequence of the printed results.

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + y/nTw7W9tcRKU7T6wuvKx6O6PC9wPgo8cD48cHJlIGNsYXNzPQ = "brush: java;"> console. time ('name'); window. onload = function () {console. log ('onload2'); console. timeEnd ('name ');}

At first, I put console. timeEnd ('name'); behind onliad. onload is separated separately, but the problem is that the display time is 0.

The reason is that after onload is executed on the page, the corresponding JS code is executed only after the labels and images are loaded,

After running the test, onload takes a long time under the power of 20000 photos:30 ms

Ready test:

The JS Code used is:

console.time('name');   console.time('name');    $(document).ready(function(){console.log('ready1');console.timeEnd('name');})

When running the JQ code of ready, Ready displays the result after the page has not been fully loaded, and the time is 20 ms.

I added two onloads during the test. At this time, I added two ready nodes for the test,

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

console.time('name'); $(document).ready(function(){ console.log('ready1'); }) console.time('name'); $(document).ready(function(){ console.log('ready2'); })

The running result is displayed as follows:

It can be seen that, based on the previous summary, ready outputs the result first, that isExecution mechanismDifferent, let's look at the onload2 output, but onload1 has no output. We can see that when the number of codes is displayed, ready supports writing multiple numbers, and isIn orderWhile onload only supports one output, the latterHigh prioritySelect the latter.

Summary:

① Execution time:

Onload:After the entire document file (including loading images and other information) is loaded, you can directly perform dom operations, for example, an image can be set to a wide or high attribute or style after the icon is loaded; Ready:Dom operations can be performed directly after dom loading. For example, you can set attributes or styles of an image as long as the tag of an image is complete and you do not need to wait for the image to be loaded;

② Writing count:

<Script> Window. onload = function (){ Alert (1 ); } Window. onload = function () {// only 11 is displayed Alert (11 ); } $ (Document). ready (function () {// pop up 2 22 in order Alert (2 ); }); $ (Document). ready (function (){ Alert (22 ); }); </Script> Running result: the pop-up sequence is as follows:2--->22--->11

③ Abbreviation

Window. onload is not abbreviated

$ (Document). ready () can be abbreviated as $ ()

$ () ===$ (Document). ready

$ (Document). Ready (Function () {alert (2 );}); It is equivalent: $ (Function () {alert (2 ); })