Javascript 异步加载详解.docx

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