js实现延迟加载的几种方法详解

这是一个面试经常问到的问题：js的延迟加载方法 (js的延迟加载有助于提高页面的加载速度)

主要考察对程序的性能方面是否有研究，程序的性能是一个项目不断地追求的，通常也是项目完成后需要长期做的一件事情，像腾讯QQ依然对程序的性能不断地做优化，让用户的体验更好，性能优化的核心思想就是快，可以预先准备数据（如缓存的使用），可以按需获取，可以分段获取等都是常见的优化手段。

解题思路 :

1.defer属性

<script src="file.js" defer> </script>

浏览器会并行下载 file.js和其它有 defer 属性的script，而不会阻塞页面后续处理。defer属性在IE 4.0中就实现了，超过10多年了！Firefox从 3.5 开始支持defer属性 。

注：所有的defer脚本保证是按顺序依次执行的。

2.async属性

<script src="file.js" async> </script>

async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。

Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有IE 都支持异步加载。

3.动态创建DOM方式 (使用的最多)

<script type="text/javascript">  function downloadJSAtOnload() {   var element = document.createElement("script");   element.src = "defer.js";   document.body.appendChild(element);  }  if (window.addEventListener) //添加监听事件   window.addEventListener("load",downloadJSAtOnload, false); //事件在冒泡阶段执行  else if (window.attachEvent)   window.attachEvent("onload",downloadJSAtOnload);  else    window.onload = downloadJSAtOnload;</script>

PS： 这里插一句addEventListener() 也是常考的知识点之一：

    addEventListener() 方法用于向指定元素添加事件句柄。

    使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

    语法：element.addEventListener(event, function, useCapture)

        event （必须）字符串，指定事件名。注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。         function （必须）指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。         useCapture （可选）布尔值，指定事件是否在捕获或冒泡阶段执行。【true：事件句柄在捕获阶段执行； false：默认，事件句柄在冒泡阶段执行】