1、同步加载(阻塞加载)
只有当当前加载完后,才能进行下一步操作。
但是如果js中有输出document内容、修改dom等,则会造成页面阻塞,所以一般建议把<script>放在<body>结尾处
2、异步加载(非阻塞加载)
浏览器再下载执行js的同时,还会继续进行后续页面的处理
①onload时的异步加载
(function(){
if(window.attachEvent){
window.attachEvent("onload",asyncLoad);
}else{
window.addEventLister("load",asyncLoad);
}
var asyncLoad = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = "";
var s = document.getElementsByName("script")[0];
s.parentNode.insertBefore(script,s);
}
})();
这种方法就是把插入的script的方法放在一个函数中,然后在window的onload方法中执行
②Script In Iframe
在父窗口中插入一个iframe元素,然后在iframe中执行加载JS的操作
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document; //iframe.contentWindow:获取iframe的window属性
doc.open();
doc.write("<script> var insertJS = function(){alert(2);};<\/script><body onload = 'insertJS()'></body>");
doc.close();
③HTML5新属性:async和defer
defer:并行下载其他有defer属性的js,按照顺序执行
async:js将在下载完成后尽快执行,不能保证js顺序执行
④创建script标签,插入DOM中
3、延迟加载
有些js并不是在页面初始化时就需要,而是在某些情况才需要。
将js切分成许多模块,页面初始化时只加载需要立即执行的js,然后其他js的加载延迟到第一次需要的时候
js的加载分为两部分:下载和执行。异步加载只是解决了下载的问题,但是代码在下载后就会立即执行,在执行过程中浏览器处于阻塞状态,响应不了任何请求
解决思路:利用异步加载缓存起来,但是不立即执行,需要的时候在执行。将JS内容作为Image或者Object对象缓存起来,就不会立即执行。
①模拟较长的下载时间
利用thread让其sleep一段时间在执行下载操作
②模拟较长的JS代码执行时间
var start = Number(new Date());
while((start + 5000)>Number(new Date())){//执行js代码}
这段代码将使JS执行5秒才完成