$(window).on(‘load’)和$(document).ready以及window.onload执行顺序

对于网页里js执行前后顺序控制有两种形式，一种是dom完成后，一种是网页所有资源后执行。对于第一种DOM完成后执行也是比较常见的，在网页DOM完成后能避免很多语法错误，不至于查询DOM元素错误。

DOM完成后执行

网页结构加载完即可，不管网页的图片，视频等资源。对于jquery是以下形式，就是在网页DOM结构完成后执行

$(document).ready(function(){
 // code
})
//或者简写为：
$(function(){
 // code
})

document.addEventListener("DOMContentLoaded", function(){
//code
},false);

资源完全加载后执行

在网页资源（包括网页的图片，视频等）加载完毕后执行，jquery可以用

$(window).on('load',function(){
   //code  
})
//低版本 3.4.1之前还可以用
//高版本切不可用，会报错“TypeError: e.indexOf is not a function”
$(window).load(function(){  
   //code
})

另外原生js里也有类似方法，至于两者区别就是原生的js方法会被覆盖掉，如果存在多个，只会执行最后一个。

window.onload=function(){
  //code
}

关于三者之间的执行顺序，按照理解可能想都不用想，当然是DOM完成后的执行在先，可以真的如此吗？这需要看情况而言，当网页结构很简单，会发现ＤＯＭ后执行的代码会被先执行，看同样的ｊｓ部分：

$(window).on('load',function(){
console.log("window jquery 1")
})
$(document).ready(function(){
console.log("document jquery 1")
})
$(window).on('load',function(){
console.log("window jquery 2")
})
$(document).ready(function(){
console.log("document jquery 2")
})
window.onload=function(){
console.log("window js 1")
}
window.onload=function(){
console.log("window js 2")
}

在HMTL结构比较简单的时候，也无须加载任何其他资源：

<div id="box">
    <div id="content1"></div>
    <div id="content2"></div>
    <div id="content3"></div>
</div>

打印出来的顺序如下图，可以很清楚知道DOM完成的速度慢于资源加载后的

但是当我们增加网页结构，让网页资源增加点东西：

<div id="box">
    <div id="content1"></div>
    <div id="content2"></div>
    <div id="content3"></div>
    <iframe src="https://blog.csdn.net/caimouse"></iframe>
</div>

打印出来的顺序就是我们想当然的，DOM加载快于资源加载，这也是我们比较常见的模式，因为一个网页开发里少不了图片等资源，尤其是资源过大，是时间间隔会更大。

知道了这些个差异，可以在网页开发中发现很多不经意的错误，如果我们想计算一个被动态追加添加元素的父元素区块的尺寸问题，自然是要在资源加载完毕后执行，或者在添加元素函数之后。