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)

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

<p>该实例使用 addeventlistener() 方法来向按钮添加点击事件。</p> 
<button id="mybtn">点我</button> 
<p id="demo"></p> 
<script>
document.getelementbyid("mybtn").addeventlistener("click", function(){
  document.getelementbyid("demo").innerhtml = "hello world";
});
</script>

效果如图：

4.使用jquery的getscript()方法

$.getscript("outer.js",function(){//回调函数，成功获取文件后执行的函数
   console.log("脚本加载完成")
});

从源码可以看出，这个方法最后还是调用了jquery.ajax()来请求了js文件的。

5.使用settimeout延迟方法的加载时间

延迟加载js代码，给网页加载留出时间

<script type="text/javascript">
  function a(){
    $.post("/lord/login",{name:username,pwd:password},function(){
      alert("hello world!");
    })
  }
  $(function (){
    settimeout("a()",1000); //延迟1秒
  })
</script>

6.让js最后加载

例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行javascript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度。

上述方法5,6也会偶尔让你收到google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自google帮助页面的推荐方案。

//这些代码应被放置在</body>标签前(接近html文件底部) <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>

这段代码意思是等到整个文档加载完后，再加载外部文件“defer.js”。

使用此段代码的步骤：

1.     复制上面代码
2.     粘贴代码到html的标签前 (靠近html文件底部)
3.     修改“defer.js”为你的外部js文件名
4.     确保你文件路径是正确的。例如：如果你仅输入“defer.js”，那么“defer.js”文件一定与html文件在同一文件夹下。

注意：这段代码直到文档加载完才会加载指定的外部js文件。因此，不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将javascript代码分成两组。一组是因页面需要而立即加载的javascript代码，另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的javascript代码，应放在一个外部文件，然后再引进来。

若有不足请多多指教！希望给您带来帮助！

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接