Javascript异步加载详解.doc

HYPERLINK"http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.html"Javascript异步加载详解本文总结一下浏览器在javascript的加载方式。关键词：异步加载（asyncloading），延迟加载（lazyloading），延迟执行（lazyexecution），async属性，defer属性一、同步加载与异步加载的形式1.同步加载我们平时最常使用的就是这种同步加载形式：<scriptsrc="http://yourdomain.com/script.js"></script>同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。js之所以要同步执行，是因为js中可能有输出document内容、修改dom、重定向等行为，所以默认同步执行才是安全的。以前的一般建议是把<script>放在页面末尾</body>之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。简单说：加载的网络timeline是瀑布模型，而异步加载的timeline是并发模型。2.常见异步加载（ScriptDOMElement）(function(){vars=document.createElement('script');s.type='text/javascript';s.async=true;s.src='http://yourdomain.com/script.js';varx=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);})();异步加载又叫非阻塞，浏览器在下载执行js同时，还会继续进行后续页面的处理。这种方法是在页面中<script>标签内，用js创建一个script元素并插入到document中。这样就做到了非阻塞的下载js代码。async属性是HTML5中新增的异步支持，见后文解释，加上好（不加也不影响）。此方法被称为ScriptDOMElement法，不要求js同源。将js代码包裹在匿名函数中并立即执行的方式是为了保护变量名泄露到外部可见，这是很常见的方式，尤其是在js库中被普遍使用。例如GoogleAnalytics和Google+Badge都使用了这种异步加载代码：(function(){varga=document.createElement('script');ga.type='text/javascript';ga.async=true;ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';vars=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s);})();(function(){varpo=document.createElement("script");po.type="text/javascript";po.async=true;po.src="https://apis.google.com/js/plusone.js";vars=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(po,s);})();但是，这种加载方式在加载执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还要执行额外的渲染工作等，所以还是会阻塞部分页面的初始化处理。3.onload时的异步加载(function(){functionasync_load(){vars=document.createElement('script');s.type='text/javascript';s.async=true;s.src='http://yourdomain.com/script.js';varx=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(window.attachEvent)window.attachEvent('onload',async_load);elsewindow.addEventListener('load',async_load,false);})();这和前面的方式差不多，但关键是它不是立即开始异步加载js，而