首頁 > web前端 > js教程 > 主體

使用async屬性非同步載入執行JavaScript的方法

coldplay.xixi
發布: 2020-06-17 16:17:08
轉載
2692 人瀏覽過

使用async屬性非同步載入執行JavaScript的方法

HTML5讓我興奮的一個最大的原因是,它裡面實現的新功能和新特徵都是我們長久以來一直期待的。例如,我以前一直在使用placeholders,但以前必須要用JavaScript實作。而HTML5裡提供給JavaScript標記的async屬性,讓JavaScript能非同步載入執行。之前我需要各種的JavaScript插件來實現這種功能,但現在這個新屬性能讓我們輕鬆的實作非同步載入。

async – HTML程式碼

真的非常簡單,就像下面這樣:

登入後複製

事實上,如果你是個有嚴謹精神的程式設計師,你應該在你90%以上的SCRIPT標記上使用async屬性。

defer – HTML程式碼

還有一個跟async屬性相似的defer屬性:

登入後複製

async屬性的在語法上非常相似。

async & defer – 不同之處

這篇WebKit部落格將deferasync之間的不同之處解釋的非常清楚:

瀏覽器對標記有async屬性或defer屬性的scripts會立即載入並解析,同時也會支援依賴這個腳本進行初始化的onload事件。 async屬性和defer屬性的不同之處在於何時執行這個腳本。標註有async屬性的Script會在下載完成後即可執行,不需要等待window的load事件。這意味著標記有async屬性的腳本並不一定會按在頁面中嵌入的順序執行。而標記有defer屬性的腳本卻一定會依照它們在頁面上的順序依序執行。執行會在解析完全完成後開始,但會在document的DOMContentLoaded事件之前。

支援 async 和 defer 屬性的瀏覽器有哪些?

引用Safari部落格上的話:

WebKit引擎的瀏覽器(Google瀏覽器和Safari瀏覽器)。火狐瀏覽器從3.6版開始支援async 和 defer 屬性。 IE也很早就支持 defer 屬性,但對async屬性不支持,在IE9中支援onload屬性。

async 太有用了!

看到各瀏覽器實作async功能著實讓我非常高興。瀏覽器網站頁面時被JavaScript卡住的確是個很大的問題,async屬性的非同步載入、執行能力一定會讓網站的頁面速度增色不少。

推薦教學:《javascript基礎教學

以上是使用async屬性非同步載入執行JavaScript的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:webhek.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!