JQ中$(window).load和$(document).ready区别与执行顺序

深入了解JQ中的$(document).ready()与$(window).load：二者的差异与执行顺序

在前端开发过程中，JQ中的$(document).ready()和$(window).load是常见的两种页面加载函数。虽然两者都是用于确保在执行JS代码时页面已加载完成，但它们之间存在显著的差异和执行顺序。

一、页面加载的基本顺序

一个页面的加载顺序大致为：域名 -> 加载HTML -> 加载JS和CSS -> 加载图片等其他信息。对于开发者来说，了解这一顺序至关重要，因为它关系到如何合理使用$(document).ready()和$(window).load这两种函数。

二、$(document).ready()的功能与特点

$(document).ready()是在页面完成HTML的加载并建立了DOM树之后就开始执行。这意味着，当HTML文档结构准备就绪时，就可以运行相关的JS代码了。这对于需要操作DOM元素的场景特别有用。$(document).ready()可以在JavaScript代码中出现多次，并且里面的函数或代码都可以执行。但请注意，这并不代表页面的所有数据都已经加载完成，一些如大型图片可能在建立DOM树后仍然需要一段时间来加载。

三、$(window).load的功能与特点

与$(document).ready()不同，$(window).load是在整个页面（包括图片、CSS文件等关联文件）完全加载到浏览器后才执行。这意味着，只有当所有资源都加载完毕后，才能确保页面渲染完成。在原生JavaScript中，我们通常使用window.onload函数来达到相同的效果。值得注意的是，$(window).load()在JavaScript代码中只能出现一次。如果有多个$(window).load()，只有最后一个会被执行，之前的都会被覆盖。如果你需要在所有资源都加载完毕后执行某些操作，使用$(window).load()是一个很好的选择。

四、二者的差异与执行顺序

1. 执行时间不同：$(document).ready()在DOM树建立后立即执行，而$(window).load()则在所有资源都加载完毕后执行。

2. 可被执行的次数不同：$(document).ready()可以多次执行，而$(window).load()只能执行一次。

3. 执行效率不同：在某些需要操作DOM元素的场景下，使用$(document).ready()可能比$(window).load()更高效。但某些情况下，必须等待所有资源加载完毕才能执行某些操作，这时就需要使用$(window).load()。

选择使用$(document).ready()还是$(window).load()，取决于你的具体需求和场景。如果你需要在页面结构准备就绪时执行某些操作，那么使用$(document).ready()；如果你需要等待所有资源都加载完毕再执行操作，那么使用$(window).load()是更好的选择。两者都会按照页面加载的顺序依次执行。