41.js延迟加载的方式有哪些?

JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件。

JS延迟加载有助于提高页面加载速度。
 

 

一般有以下几种方式:
 
1)defer 属性
1
<script src="test1.js" defer="defer"></script>

  

2)async 属性
1
<script src="test1.js" async></script>

  

3)动态创建DOM方式
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript"> 
   function downloadJSAtOnload() { 
       varelement = 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

  

4)使用jQuery的getScript方法
1
2
3
$.getScript("outer.js",function(){//回调函数,成功获取文件后执行的函数 
      console.log("脚本加载完成") 
});

  

5)使用setTimeout延迟方法
6)让JS最后加载
posted @ 2020-08-10 20:42  大牛半路出家  阅读(1247)  评论(0编辑  收藏  举报