當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

defer与async的认识

發(fā)布時間：2024/9/20 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 defer与async的认识小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

defer跟asyns都是腳本外聯(lián)文件的標簽屬性（標簽內(nèi)的腳本不會執(zhí)行），加了這兩個屬性其中一個那么腳本文件會異步加載執(zhí)行。

首先檢查defer在瀏覽器中執(zhí)行順序(檢查瀏覽器為chome，firfox，ie)

defer:

在編譯器中輸入代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>defer async</title>
<style>
</style>
<script type="text/javascript">
　　console.log("head內(nèi)嵌js")
</script>
</head>
<body>
　　<img src="../images/1.jpg" alt="1.jpg" οnlοad="console.log('img')" />
　　<script type="text/javascript" src="js/defer.js" defer="defer"></script>
　　<script type="text/javascript">

　　　　window.onload = function(){

　　　　　　console.log("onload")
　　　　}

　　　　console.log("內(nèi)嵌js")
　　</script>
</body>
</html>

在chome,firfox的控制臺中，輸出先后順序為

head內(nèi)嵌js
內(nèi)嵌js this is defer img onload 在ie的控制臺中，輸出先后順序為

head內(nèi)嵌js
img
內(nèi)嵌js
this is defer

onload

defer要等到dom構(gòu)造好了后再執(zhí)行，所以'this is defer'會最后輸出（上一篇文章對ie dom構(gòu)造的理解是，dom中的所有資源下載后才能算構(gòu)造好dom，不知道對不對？）注：ie10中'內(nèi)嵌js'先于'img'; 從瀏覽器的輸出結(jié)果可以看出，加defer的外聯(lián)標簽加載的文件，會在dom樹構(gòu)成后執(zhí)行，onload是在dom樹構(gòu)成后并且所有資源（包括圖片css，js）加載到瀏覽器后再執(zhí)行。但會在document的DOMContentLoaded事件之前。
在w3c上看到，支持defer的瀏覽器有：

Browser Support

????

The defer attribute is supported in all major browsers.

Note:?The defer attribute is not supported in Opera 12 and earlier versions. async: 這個屬性跟defer一樣，異步下載資源，不會堵塞瀏覽器渲染頁面，然而這個屬性跟defer不同的是，當該文件加載完后會立即執(zhí)行該外聯(lián)文件里面的腳本，不用等到dom樹構(gòu)造好。同時，幾個加async的腳本下載后，按照先到先執(zhí)行的順序，不會按代碼中的排列順序執(zhí)行，這點跟defer不一樣.