您現在的位置是:電腦技術吧?>? 組裝維修 ??>??script defer,script async??>??正文詳情

script defer,script async

權芳芳2019-11-11 17:50:54 人圍觀
簡介js defer和async我對HTML5感到興奮的原因之一是它實現了業界一直期待的許多特性。我們總是需要輸入框來顯示空白提示,但它們都是用JavaScript實現的。我們還希望整個塊可以defer和async區別

我對于HTML5感到興奮不已的原因之一是它實現了眾多業界期待已久的特性。

我們一直需要輸入框顯示空白提示,但都是用JavaScript來實現的。

我們也想要整個塊都變成可被點擊,也是使用JavaScript來實現。

現在WebKit為HTML5實現了SCRIPT標簽的async異步屬性。

過去我們使用各種JavaScript技巧來做這種事情,但現在新的屬性讓防止阻塞變得相對容易。

async - HTML屬性 如我前面提到的,添加async屬性非常簡單: 復制代碼代碼如下:!-- 指定async,以及 onload 回調-- script async src=siteScript.js onload=myInit()/script 事實上,如果你的JavaScript以及HTML結構設計的合理,那么90%的情況下你的Script元素可以使用異步加載。

defer - HTML屬性 Safari 瀏覽器額外添加了defer屬性 復制代碼代碼如下:!-- 指定defer,效果和async差不多-- script defer src=siteScript.js onload=myInit()/script async 與 defer 的差別 WebKit官方博客 很好地解釋了async 與 defer 的不同 ------------------------------------ 正常情況下,當瀏覽器在解析HTML源文件時如果遇到外部的script,那么解析過程會暫停,并發送請求來下載script文件,只有script完全下載并執行后才會繼續執行DOM解析。

比如: script src=myBlockingScript.js/script 在下載過程中瀏覽器是被阻止做其他有用的工作的,包括 解析HTML,執行其他腳本,以及展示CSS布局。

雖然Webkit預加載掃描程序可以探測性地在下載階段進行多線程下載,但是某些頁面仍然存在很大的網絡延遲。

當前有很多技術來提升頁面顯示速度,但都需要額外的代碼以及針對特定瀏覽器的技巧。

現在,script可以通過添加async或者defer屬性來讓腳本不必同步執行,示例如下: 復制代碼代碼如下:script async src=myAsyncScript.js onload=myInit()/script script defer src=myDeferScript.js onload=myInit()/script async 和 defer 標注的 script 都不會暫停HTML解析就立刻被下載,兩者都支持onload事件回調來解決需要該腳本來執行的初始化。

兩者的區別在于執行時的不同: async 腳本在script文件下載完成后會立即執行,并且其執行時間一定在 window的load事件觸發之前。

這意味著多個async腳本很可能不會按其在頁面中的出現次序順序執行。

與此相對,瀏覽器確保多個 defer 腳本按其在HTML頁面中的出現順序依次執行,且執行時機為DOM解析完成后,document的DOMContentLoaded 事件觸發之前。

下面展示的是一個需要1秒來下載,以及1秒來解析執行其他操作的例子,我們可以看到整個頁面載入花了大約2秒鐘。

同樣的例子,但這次我們指定了script的 defer 屬性.因為當defer腳本下載的時候,其他操作可以并行執行,所以大概快了1倍。

------------------------------------ 哪些瀏覽器支持async 和 defer 同樣是上面引用的文章中提到: 除了基于Webkit的新版本瀏覽器,FireFox已經支持defer和onload屬性很長時間了,而且從FF3.6開始添加了async屬性。

IE同樣支持defer屬性,但還不支持async屬性,從IE9開始,onload屬性也將被支持。

aynsc 棒極了! 看到webkit實現async我開心得合不攏嘴了。

對每個網站來說,阻塞都是一個巨大的性能瓶頸,而可以直接指定script文件異步加載無疑會加快web頁面的速度.

版權聲明:本文由 權芳芳 整理編輯。

原標題:javascript defer,defer

轉載注明出處:http://www.dn9ww09s.icu/assemble/11771.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 顯示器閃一下就黑屏了,顯示器閃黑屏又好了

    顯示器閃一下就黑屏了,顯示器閃黑屏又好了 相關圖片顯示器黑屏燈一直閃顯示器的黑屏怎么辦?它不能正常使用,所以不能放在一邊。今天的編輯會教你解決方法。我希望它能幫助你設置顯示器的閃光屏幕。作為一臺小小的白色電腦,沒...

  • 怎么去分頁符,分頁符在哪

    怎么去分頁符,分頁符在哪 相關圖片取消 分頁符!DOCTYPEHTML PUBLIC-//W3C//DTD HTML 4.0 Transitional//EN HTMLHEAD TITLE nextcol 表格的分頁符在哪里...

  • cdr文件用什么打開,ai可以打開cdr文件嗎

    cdr文件用什么打開,ai可以打開cdr文件嗎 相關圖片cdr是什么格式的文件您可能會接觸到CDR格式的文件,但它們非常奇怪。CDR文件的內容是什么?CDR文件包含兩個繪圖應用程序:一個用于矢量繪圖和頁面設計,另一個用于圖像編輯。這種...

  • css attr,css

    css attr,css 相關圖片css calc瀏覽器之間的激烈競爭意味著越來越多的人正在使用支持最新和最先進的W3C web標準的設備以更具交互性的方式訪問互聯網。這意味著我們最終可以使用更強大和更靈活的Cjquery設置...

  • xp如何連接共享打印機,win7如何共享打印機

    xp如何連接共享打印機,win7如何共享打印機 相關圖片xp和win7共享打印機打印機是我們日常工作中不可缺少的辦公設備。隨著時代的發展,它越來越重要。使用打印機設備時無法共享打印機的問題是什么?以Windows XP系統為例,解決打印機不...

  • 怎樣卸載冰點還原,冰點還原軟件怎么卸載

    怎樣卸載冰點還原,冰點還原軟件怎么卸載 相關圖片如何不用密碼卸載冰點還原冰點恢復是一種保護系統不受損害的系統恢復軟件。所以,當我們不想有一天使用它并想卸載它時,我們怎么能做到呢?我們需要知道冰點的卸載方法不同于...

  • HTML 屬性,html屬性有哪些

    HTML 屬性,html屬性有哪些 相關圖片html屬性詳解使用tabIndex屬性設置tab鍵在控件中的移動順序,方法是將控件的tabIndex屬性設置為1到32767之間的值,這樣就可以將控件添加到tab鍵序列中,當html5表格所有屬性...

  • 如何將歌曲下載到u盤,歌曲下載到u盤的方法

    如何將歌曲下載到u盤,歌曲下載到u盤的方法 相關圖片在電腦怎么下載歌曲到u盤下載到U盤后,您可以在各種設備上播放自己喜愛的歌曲。接下來,我想談談如何將歌曲下載到U盤并保存它們。本文的研究對象是那些與計算機相比個頭相對較...

  • ad轉換的過程,轉換效率

    ad轉換的過程,轉換效率 相關圖片模擬量輸入輸出我們知道XML XSLT可以直接輸出到支持XML的瀏覽器,比如IE 5.0或更高版本。但是,我們還需要考慮到許多瀏覽器不直接支持XML。在這種情況下,我們需要將轉換速度最快的...

  • IE修復專家,超級兔子IE修復專家

    IE修復專家,超級兔子IE修復專家 相關圖片IE修復大師Ie修復專家(最佳Ie修復軟件)修復功能:可修復Ie標題欄、主頁、右鍵菜單、工具欄按鈕、工具欄菜單、附加工具欄(如百度soba、谷歌工具欄、搜狐工具欄等)、ouie修復如何...

熱評文章

  • 電腦系統安裝教程,電腦安裝系統

    電腦系統安裝教程,電腦安裝系統 相關圖片怎樣安裝電腦系統軟件服務器的安裝與PC機基本相同,但也有區別。只需將此服務器作為新計算機安裝。也就是說,無論硬盤中的數據是什么,這個服務器系統的安裝一般都是由IT行業人...

  • mts格式文件怎么打開,mts文件用什么播放

    mts格式文件怎么打開,mts文件用什么播放 相關圖片mts文件怎么轉換格式事實上,視頻格式不僅限于MP4,還包括QSV文件。這是iqiyi的一種特殊格式文件,MTs文件是另一種視頻文件。我不知道我的朋友們是否經常遇到帶有MTS后綴的視手機播放...

  • input元素有哪些,input元素

    input元素有哪些,input元素 相關圖片input輸入我們已經討論了一些HTML5的改進,比如占位符、預取和Web存儲。這里有兩種新的輸入元素類型:email和URL。讓我們按照代碼來看看它們的好處:語法格式:新輸input data...

  • 三階魔方還原教程,怎么還原魔方

    三階魔方還原教程,怎么還原魔方 相關圖片新手怎樣還原魔方如何處理這種情況?事實上,我們很容易有這個問題。只要我們做以下步驟,我們就能解決這個問題。魔方還原數據的過程在我們的生活中非常普遍。使用方便。為了...

  • 三單語法,英語語法變化

    三單語法,英語語法變化 相關圖片常見的語法形式HTML5的語法變化主要體現在標記不再區分大小寫、元素可以省略結束標記、允許省略屬性值的屬性等等。對于那些對HTML5感興趣的人,你可以參考他們,希望能幫助你理什...

  • 電腦桌面圖標怎么有藍底,電腦桌面圖標都有藍底

    電腦桌面圖標怎么有藍底,電腦桌面圖標都有藍底 相關圖片電腦圖標有藍底一些新電腦用戶,當他們第一次接觸電腦時,似乎發現了“新美洲大陸”。面對電腦只是一次突發性的操作。有些用戶在操作中會犯錯誤,導致電腦出現某些情況。以桌...

  • 怎么在word中鏈接網頁,網頁中如何嵌入一個flash

    怎么在word中鏈接網頁,網頁中如何嵌入一個flash 相關圖片表格中插圖片怎么設置這個例子是CSS的一系列入門教程。在本課中,我們將學習如何在網頁中插入CSS樣式表。我們主要學習在網頁中插入外部樣式表、內部樣式表、導入外部樣式表和嵌...

  • 打印機模式,打印機怎么設置打印

    打印機模式,打印機怎么設置打印 相關圖片打印機正在打印但是打不出來打印機已與工作融為一體,打印操作是必不可少的辦公技能。我們都知道打印機缺省雙面打印模式,不僅效率高,最重要的是環保,減少二氧化碳排放,提...

  • 技巧,常用

    技巧,常用 相關圖片50個工作中最常用excel技巧一。UL標記在Mozilla中默認有一個填充值,而在ie中只有margin有一個值。2。同一個類選擇器可以在文檔中重復出現,但ID選擇器只能出現一次。對于標簽的辦公技...

  • cbox,scbox

    cbox,scbox 相關圖片cbox精選一些電腦用戶想在電腦上看直播電視,但他們認為換頻道很麻煩。有什么好的軟件可以介紹?為此,今天編輯就為大家推薦Cbox家庭版軟件,這是中國互聯網電視臺推出的Cbo央視網...

關注微信

变脸官网查询