onload时的异步加载

标签：修改   部分   浏览器   安全   dom   src   win   ext   async   

在说异步加载的时候，先把应用背景说一下！

我们平时使用最多的是同步加载，同步模式又称为阻塞模式！顾名思义，他会阻止浏览器的后续处理，停止后续一系列的解析，包括后续文件的加载，渲染，代码执行等等！

那既然同步模式有那么多弊端，为啥我们还要用它呢！其实是为了安全性考虑的，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!

onload时的异步加载

标签：修改   部分   浏览器   安全   dom   src   win   ext   async   

原文地址：http://www.cnblogs.com/changeCode/p/7363019.html