onload时的异步加载
在说异步加载的时候,先把应用背景说一下!
我们平时使用最多的是同步加载,同步模式又称为阻塞模式!顾名思义,他会阻止浏览器的后续处理,停止后续一系列的解析,包括后续文件的加载,渲染,代码执行等等!
那既然同步模式有那么多弊端,为啥我们还要用它呢!其实是为了安全性考虑的,js之所以要同步执行,很多时候是考虑到输出document内容,修改dom,重定向等行为,所以默认同步执行才是最安全的!
那么我们也知道,有时候我们就是有这样的需求,希望页面先进行展示,其中的某些部分可以慢慢加载!这样用户体验会更加好,否则页面一直显示不出来,等加载也不是个事!
那么知道了同步加载的概念,其实异步加载就很简单了,反过来就是了!异步加载也叫非阻塞加载咯,不需要等加载完,后续的页面就可以进行处理了!
今天我主要是说一下一种异步加载的方式,就是onload时候的异步加载
(function() {
function load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://example.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
window.addEventListener('load', async_load, false);
})();
其中async属性是HTML5中新增的异步支持,这边是用到了匿名函数的用法!
window.attachEvent是用来给一个事件指派多个处理过程的!
window.addEventListener跟上面一样,只不过Mozilla/Firefox 不支持 attachEvent,只支持addEventListener!