页面加载与js文件执行

1. window.onload()

 window.onload=function(){
    //希望必须在页面加载完成后才自动执行的代码
}

无论这段代码在网页开头还是结尾引入，永远在整个页面加载完成后才执行。

但是，问题是如果一个网页功能非常复杂，包含多个<script>引入的js文件，如果每个js文件中都window.onload=function(){}，结果，后引入的script中的window.onload=function()会覆盖之前所有window.onload=function()的内容。

解决方法：用addEventListener，为一个事件同时添加多个监听：

（1）DOM中如何操作：

window.addEventListener("load",function(){...})

（2）jQuery中如何操作：

 $(window).on("load",function(){ ... })
// 简写
$(window).load(function(){ ... })

此时又出现一个问题：window.onload事件必须等待整个网页内容加载完才能自动执行，这里的网页内容包括HTML、CSS、JS甚至所有图片,会造成页面上有资源但是迟迟无法操作，且大多数页面初始化操作其实和css和图片都没有关系。这里就要牵扯出来另一个加载完成事件——DOMContentLoaded。

（1）仅DOM内容(HTML和JS)加载完成，就提前触发一个加载完成事件

　　　　DOMContentLoaded

　　如果放在DOMContentLoaded事件中的代码，比window.onload早执行不少，不必等待css和图片下载完

（2）当所有网页内容(CSS和图片)都下载完，才触发第二个加载完成事件

　　　　window.onload —— 晚

但是DOMContentLoaded有兼容性问题，被jQuery统一成了：

　　$(document).ready(function(){ ... })

　　$(()=>{...})或$(function(){...})

此时只要DOM树的内容准备就绪就提前执行操作。