script標(biāo)簽的defer和async區(qū)別

JS下載解析時(shí)候會(huì)阻塞DOM樹的構(gòu)建运敢,放在HTML頂部 的時(shí)候會(huì)有可能出現(xiàn)長時(shí)間白屏的情況校仑,想讓JS解析時(shí)候阻塞DOM樹構(gòu)建的話必定會(huì)談到defer和async兩個(gè)屬性,兩個(gè)究竟是什么和有什么區(qū)別呢传惠?

1迄沫、defer [https://developer.mozilla.org/En/HTML/Element/Script]

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.

defer這一布爾屬性是告訴瀏覽器這個(gè)script標(biāo)簽需要在文檔解析完成后再去執(zhí)行

2、async[HTML5] ?[https://developer.mozilla.org/En/HTML/Element/Script]

Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously.

async這一布爾屬性告訴瀏覽器在可能得情況下異步執(zhí)行script標(biāo)簽


Difference

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. The defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.

async 和 defer的script標(biāo)簽在開始下載時(shí)候都不會(huì)暫停解析阻塞頁面和提供onload時(shí)候的回調(diào)卦方。async屬性的腳本會(huì)在下載結(jié)束后立即執(zhí)行羊瘩,同時(shí)也會(huì)在window的load時(shí)間前執(zhí)行,所以有可能會(huì)出現(xiàn)腳本執(zhí)行順序被打亂的情況。相反的尘吗,defer則保證了腳本能順序執(zhí)行逝她,其執(zhí)行時(shí)間會(huì)在頁面解析完成后,同時(shí)也在DOMContentLoaded執(zhí)行前睬捶。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末黔宛,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子擒贸,更是在濱河造成了極大的恐慌臀晃,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件介劫,死亡現(xiàn)場離奇詭異徽惋,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)座韵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門险绘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人回右,你說我怎么就攤上這事隆圆。” “怎么了翔烁?”我有些...
    開封第一講書人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵渺氧,是天一觀的道長。 經(jīng)常有香客問我蹬屹,道長侣背,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任慨默,我火速辦了婚禮贩耐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘厦取。我一直安慰自己潮太,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開白布虾攻。 她就那樣靜靜地躺著铡买,像睡著了一般。 火紅的嫁衣襯著肌膚如雪霎箍。 梳的紋絲不亂的頭發(fā)上奇钞,一...
    開封第一講書人閱讀 51,146評(píng)論 1 297
  • 那天,我揣著相機(jī)與錄音漂坏,去河邊找鬼景埃。 笑死媒至,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的谷徙。 我是一名探鬼主播拒啰,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼完慧!你這毒婦竟也來了图呢?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤骗随,失蹤者是張志新(化名)和其女友劉穎蛤织,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鸿染,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡指蚜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了涨椒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片摊鸡。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖蚕冬,靈堂內(nèi)的尸體忽然破棺而出免猾,到底是詐尸還是另有隱情,我是刑警寧澤囤热,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布猎提,位于F島的核電站,受9級(jí)特大地震影響旁蔼,放射性物質(zhì)發(fā)生泄漏锨苏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一棺聊、第九天 我趴在偏房一處隱蔽的房頂上張望伞租。 院中可真熱鬧,春花似錦限佩、人聲如沸葵诈。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽作喘。三九已至,卻和暖如春耐亏,著一層夾襖步出監(jiān)牢的瞬間徊都,已是汗流浹背沪斟。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來泰國打工广辰, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留暇矫,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓择吊,卻偏偏與公主長得像李根,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子几睛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • PLEASE READ THE FOLLOWING APPLE DEVELOPER PROGRAM LICENSE...
    念念不忘的閱讀 13,470評(píng)論 5 6
  • 瀏覽器中script標(biāo)簽加載順序是如何的呢房轿?這個(gè)問題折騰了好幾次了,之前弄清楚了以后所森,覺得做不做筆記的無關(guān)緊要囱持,可...
    世事如煙_f411閱讀 1,521評(píng)論 0 1
  • NAME dnsmasq - A lightweight DHCP and caching DNS server....
    ximitc閱讀 2,844評(píng)論 0 0
  • 一切為了組織,我們能到達(dá)哪里,能犧牲什么?——《暗算》 看完《聽風(fēng)者》的時(shí)候,感受很清楚焕济。阿炳的成功離不開時(shí)機(jī)纷妆,要...
    徐幽默閱讀 1,598評(píng)論 0 0
  • 最美好的事莫過于天黑躺進(jìn)暖和的被窩,舒服的讓人忘記白天的疲憊晴弃。 最期盼的事莫過于我不在掩幢,你過的還好!
    千浮生閱讀 162評(píng)論 0 0