默認(rèn)情況下笼裳,瀏覽器渲染引擎遇到<script>標(biāo)簽會(huì)先加載文件再立即執(zhí)行文件唯卖,等文件執(zhí)行完后,才會(huì)往下繼續(xù)解析躬柬。
而帶有這兩個(gè)屬性中任意一種的<script>標(biāo)簽拜轨,屬于異步加載的語(yǔ)法。瀏覽器渲染引擎執(zhí)行到這一行不會(huì)等待加載文件全部執(zhí)行完后再解析允青,而是直接解析后面的代碼橄碾。這樣做可以避免某些體積很大的腳本因加載時(shí)間過(guò)長(zhǎng),長(zhǎng)時(shí)間等待造成瀏覽器阻塞颠锉,沒(méi)有響應(yīng)而帶來(lái)不好的體驗(yàn)法牲,是頁(yè)面性能優(yōu)化的一種方法。
1.async屬性:
帶有這個(gè)屬性的script標(biāo)簽,在標(biāo)簽內(nèi)js文件的加載過(guò)程中不會(huì)影響HTML標(biāo)簽的解析琼掠,但是js文件加載完了后會(huì)立即執(zhí)行,執(zhí)行過(guò)程中會(huì)停止HTML標(biāo)簽的解析拒垃,等js文件全部執(zhí)行完畢后,才會(huì)繼續(xù)HTML標(biāo)簽的解析瓷蛙。
另外悼瓮,如果有多個(gè)script標(biāo)簽都有async屬性戈毒,不能確定哪個(gè)先加載完哪個(gè)后加載完,先加載完的文件會(huì)先執(zhí)行横堡,執(zhí)行過(guò)程中會(huì)停止HTML標(biāo)簽的解析埋市,但是其它文件的加載不會(huì)受到影響。因此翅萤,對(duì)于多個(gè)帶有async屬性的腳本不能保證它們按照指定的先后順序去執(zhí)行恐疲。
2.defer屬性:
帶有這個(gè)屬性的script標(biāo)簽,在標(biāo)簽內(nèi)js文件的加載過(guò)程中不會(huì)影響HTML標(biāo)簽的解析,文件加載完成后不會(huì)立即執(zhí)行,必須等到HTML標(biāo)簽全部加載解析完成后,才會(huì)去執(zhí)行加載好的文件套么。
如果同樣有多個(gè)script標(biāo)簽帶有這個(gè)屬性,加載文件的執(zhí)行就存在先后順序碳蛋,先加載完成的文件先執(zhí)行胚泌。
————————————————————————————————
最后,附一張<script>肃弟、<script async>玷室、<script defer>三種形式代碼執(zhí)行過(guò)程的差異。