$(document) .ready()与window. onload的区别

缺乏、安全感 2021-12-14 10:13 315阅读 0赞

JQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的，可以先去理解下[DOM][]在另一篇文章中:[https://blog.csdn.net/daponi/article/details/94597948][DOM]

###### 区别： ######

1.执行时间   
在一般的网页加载的顺序：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70]  
    window.onload必须等到页面内包括图片的所有元素和资源加载完毕后才能执行，也就是上述图片的时间点2；  
     $(document).ready()是DOM加载完毕后就执行，不必等到整个网页资源加载完毕，也就是在上述图片的时间点1。  
            所以，使用document.ready()方法的执行速度比window.onload的方法要快。

2.编写个数不同   
    $(document).ready()可以同时编写多个，并且都可以得到执行  
    window.onload不能同时编写多个，如果有多个window.onload方法，只会其中执行一个  
(注：除非通过对onload事件进行卸载重新添加事件的方式添加多个需要执行的方法，示例如下：)

var obj = document.body.onload;//获取已注册的执行事件
    document.body.onload = function() { return false; };//卸载onload事件
    window.attachEvent("onload", obj);//重新注册 attachEvent注册的事件按照先注册后执行规则
    window.attachEvent("onload", function() {
        objInit2(par1,par2);
    });//注册新事件

3.简化写法   
    window.onload没有简化写法  
     $ (document).ready(function()\{ \})可以简写成`$(function(){方法体 });`又因为JQuery的默认参数是document，则还可以写成`$().ready(function{ })`  
![在这里插入图片描述][aHR0cHM6Ly9nc3MwLmJhaWR1LmNvbS8tUG8zZFNhZ194STRraEdrbzlXVEFuRjZoaHkvemhpZGFvL3BpYy9pdGVtLzM4MTJiMzFiYjA1MWY4MTk2NTY1MmQwN2Q3YjQ0YWVkMmU3M2U3M2YuanBn]  
可以先去理解下[DOM][]在另一篇文章中:[https://blog.csdn.net/daponi/article/details/94597948][DOM]

##### 了解浏览器的渲染规则： #####

1、解析HTML

2、加载外部脚本和样式表(JS、CSS等其他代码)

3、解析并执行脚本文档代码

4、构造HTML的DOM模型

5、加载图片以及其他非文字的媒体资源

6、网页加载完毕  
例子：  
`html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本 → body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img → script → 加载脚本 → 解析脚本 → 执行脚本 → 加载外部图像文件 → 页面初始化完毕`

了解浏览器的渲染规则后，如果需要获取DOM绑定元素的属性值时，最好使用window.onload,因为他是在所有元素加载完毕才执行。如  
  
      如果使用$(document).ready，只要 DOM 就绪就会被执行，但是DOM绑定的元素属性没有加载，此时元素的关联文件未下载完，所以属性不生效。

例如:  
与图片有关的<img>标签的 html 下载完毕，并且已经解析为 DOM 树了，$(document) .ready()不用等标签内所关联的图片资源加载完成就可以设置图片的宽高属性或样式等，而window. onload则还需要连所需要的图片也加载完成后才可以对DOM进行操作，所有用Window.onload操作图片很有可能里面的图片还没有加载完毕，所以图片的高度和宽度这样的属性此时不一定有效。而当你用JS设置好一张比例很大且字节内存也很大的图片在浏览器所需要显示的大小后，再用window. onload去操作图片时，浏览器是先把页面撑开，然后再去加载图片，大图片加载完成后才重设宽高，但大图片是一点一点加载且字节码多，在你网速慢的时候，大图片需要加载多长时间，这个页面就需要撑开多长时间，用户会非常难受，体验度差，而$(document) .ready()是在加载图片前就已经设定了图片大小，减少了大图片加载时间。

要解决这个问题，可以使用 JQuery 中另一个关于页面加载的方法 —load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。  
代码如下：

//Jquery代码如下 
        $(window).load(function (){ 
        // 编写代码 
        });
        //等价于 JavaScript 中的以下代码 
        Window.onload = function (){ 
        // 编写代码 
        }

[DOM]: https://blog.csdn.net/daponi/article/details/94597948
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70]: /images/20211214/700d0b8a9425497195831009eed410d8.png
[aHR0cHM6Ly9nc3MwLmJhaWR1LmNvbS8tUG8zZFNhZ194STRraEdrbzlXVEFuRjZoaHkvemhpZGFvL3BpYy9pdGVtLzM4MTJiMzFiYjA1MWY4MTk2NTY1MmQwN2Q3YjQ0YWVkMmU3M2U3M2YuanBn]: /images/20211214/34d70b6c22a6459e92be1dd2d0ec7fb0.png