1、onload和ready
- ready:jquery方法,对应原生的DOMContentLoaded 事件,表示, DOM 解析完(img等此时可能还在下载)=>形成dom树,此时可以操作dom了
- onload:原生事件。支持body,frame,ifrane,img,link,script。表示加载完后触发。
如果放在,document.onload或者<body onload>表示,整个文档全都加载完毕(包括img等)
2、script的defer和async
- 默认:
停止渲染
,顺序加载
,再顺序执行
,恢复渲染
- defer:
并行渲染
,顺序加载
,等文档ready(DOMContentLoaded)后
,再顺序执行
:- async:
并行渲染
,顺序加载
,加载后立即执行(不保证顺序)(此时,停止渲染,Script执行完毕后恢复渲染)
- 总结:
- 默认:
保证顺序
。缺点:同步加载执行,会阻塞渲染
:传统- defer:
保证顺序
,异步加载(节约了下载的时间)。等ready后执行:稳重:- async:
不保证顺序
,异步加载执行。发烧:适合该脚本对dom及顺序无关的情况。