HTML5 標籤中的async和defer

2021-07-16 08:47:01 字數 1357 閱讀 8880

在html中執行指令碼最重要的方法就是使用元素,但是執行元素時會阻塞後面文件的載入,為了解決這個問題html5為元素新增了asyncdefer屬性。

src="main.js">

script>

async

src="main.js">

script>

async不能保證按照指令碼出現的先後順序執行,所以,確保該指令碼和其他文件的相互依賴關係非常重要,指定async的目的是讓頁面不用等待這個指令碼載入完畢以後再繼續下一步操作,讓指定async的指令碼和後續文件非同步執行,所以設定非同步載入的指令碼最好不要操作dom,因為不知道他什麼時候執行,容易產生錯誤。

async指令碼會在頁面的load事件之前執行,但是不一定在domcontentloaded事件之前執行,有可能在這個事件之前或者之後執行。支援async的瀏覽器有:firefox 3.6、safari 5 和chrome。

defer

src="main_1.js">

script>

defer

src="main_2.js">

script>

從實際角度出發,還是把放在body的底部比較合適,對於比較舊的瀏覽器這是最好的優化方式,並且能夠保證非指令碼的文件以最快的速度解析。

下面來看一張圖:

上圖中,綠色代表html文件解析;

藍色代表網路讀取,紅色代表執行時間,這兩個是針對指令碼的。

從上圖中我們可以得出以下幾點總結:

asyncdefer很明顯的差別在於執行時間不同,async在載入完之後就執行,而defer是在頁面解析之後執行,顯然defer更接近我們對於指令碼執行的要求。

關於defer,圖中沒有表現出來的是defer是按照順序執行指令碼的。

關於defer,並不能保證執行的順序,它載入和執行是緊緊挨著的,載入完後就立即執行,不管你宣告的順序如何,都不知道它是什麼時候執行的。

因為async不能保證指令碼執行的順序,所以要設定async的指令碼一定要和其他指令碼沒有依賴關係,並且不操作dom。

html5中鏈結和分組標籤

本小白今天新學了一點html5標籤的用法,內容簡單,希望和大家分享一下。首先是鏈結標籤 a,鏈結標籤a用法簡單易用,初學者很容易上手。對於初學者,主要掌握href target 相對路徑和錨點的用法即可。個人主頁 末尾 錨點 也可用name屬性 這就是乙個簡單的例項。相對路徑的分類 index2.h...

HTML5中的iframe標籤

iframe元素會建立包含另外乙個文件的內聯框架 即行內框架 src src 屬性規定在 iframe 中顯示的文件的 url name 設定該iframe的名字 scrolling scrolling屬性規定是否在 iframe 中顯示滾動條 frameborder frameborder屬性規定...

HTML5的學習(二)HTML5標籤

3.按功能排列標籤 標籤 描述 html4 html5 定義注釋。定義文件型別。定義文件的主體。定義文件中的節。定義section或page的頁尾。to定義html標題。定義html文件。定義關於文件的資訊。定義section或page的頁首。定義關於html文件的元資訊。定義針對不支援客戶端指令碼...