JS延遲加載的方式有哪些

JS延遲加載,也就是等頁面加載完成之後再加載 JavaScript 文件,有助於提高頁面的加載速度。

1.defer 屬性:

等於告訴瀏覽器立即下載,但延遲執行(腳本會被延遲到整個頁面都解析完畢之後再執行。),即使<script>元素放在了<head>元素中,但包含的腳本將延遲瀏覽器遇到</html>標籤後再執行,所有的defer腳本保證是按順序依次執行的。

<head>
    <script src="test1.js" defer="defer"></script>
    <script src="test2.js" defer="defer"></script>
</head>

2.async 屬性

不讓頁面等待腳本下載和執行,從而異步加載頁面其他內容,缺點是不能保證腳本會按照順序執行

<head>
    <script src="test1.js" async></script>
    <script src="test2.js" async></script>
</head>

3.動態創建DOM的方式

<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()方法

//getScript() 方法通過 HTTP GET 請求載入並執行 JavaScript 文件。
$.getScript("outer.js",function(){//回調函數,成功獲取文件後執行的函數
   console.log("腳本加載完成")
});

5.使用setTimeout延遲方法

<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最後引入,從而加快頁面加載速度。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章