资源加载和页面事件理想的页面加载方式涉及到的事件
window.onload: 当页面全部加载完成（包括所有资源）
document.onload: 当整个html文档加载的时候就触发了，也就是在body元素加载之前就开始执行了
DOMContentLoaded: 当页面的DOM树解析好并且需要等待JS执行完才触发 DOMContentLoaded事件不直接等待CSS文件、图片的加载完成
onreadytstatechange: 当对象状态变更时触发这个事件，一旦document的readyState属性发生变化就会触发
defer和async
没有defer和async 浏览器会立即加载并执行指定的脚本，，不等待后续载入的文档元素，读到就加载并执行。 当加载脚本时会阻塞页面的渲染。
有async 加载和渲染后续文档元素的过程将和脚本的加载与执行并行进行，体现出来就是异步。 async JS一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。 如果脚本前后有依赖性，用async，就很有可能出错。
有defer 加载后续文档元素的过程将和脚本的加载并行进行， 但是脚本的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。 defer JS在DOMInteractive后执行，一旦执行完defer JS，就会触发DOMContentLoaded。 也就是说defer脚本总是在DOMInteractive事件与DOMContentLoaded事件之间的时间执行。 defer JS在html页面解析完毕之后再去执行，也就是类似于把这个脚本放在了页面底部。
DOM的加载与解析
DOMLoading 浏览器开始解析dom树的时间点
DOMInteractive 表示浏览器已经解析好dom树了。
DOMContentLoaded 同步的JS已经执行完毕了。
load的实现
作用：监控整个文档（包括资源）是否加载完毕，所有资源加载完毕后触发 原生js写法：
window.onload = function(){}
jquery写法：
$(document).load(function(){});document.ready的实现
作用：监控dom是否加载完毕，dom加载完毕时及资源加载之前触发 原生js写法：
document.ready = (document.addEventListener) {document.addEventListener(‘DOMContentLoaded’, function() {document.removeEventListener(‘DOMContentLoaded’, arguments.callee, false);callback();}, false);}else if (document.attachEvent) {// 兼容iedocument.attachEvent((document.readyState == “complete”) {document.detachEvent(“onreadystatechange”, arguments.callee);callback();}});}}
以下为jquery的写法：
$(function(){});$(document).ready(function(){});//jquery中默认为document对象$().ready(function(){});
你不能左右天气，但你能转变你的心情
