script標簽介紹
script標簽的屬性對于控制script的加載和執(zhí)行順序至關(guān)重要,type=module,defer和async屬性可以幫組我們更好的管理腳本的加載流程崔泵,從而提高頁面的加載速度和用戶體驗
1、基本概念和作用
1.1割择、type=module
- 定義:module屬性是告訴瀏覽器,script標簽中的腳本是按照ES module規(guī)范>來執(zhí)行
- 用途:允許在瀏覽器環(huán)境中使用ES6模塊,即導入(import)和到處(export)語句
1.2安接、type=module
- 定義:defer屬性是告訴瀏覽器在解析完整個文檔后再執(zhí)行腳本俊嗽,但保證腳本按順序執(zhí)行
- 用途:確保腳本執(zhí)行順序雾家,同時不影響頁面渲染
1.3、type=acync
- 定義:async屬性是告訴瀏覽器立即下載腳本绍豁,并在下載完成后立即執(zhí)行腳本芯咧,不保證腳本的執(zhí)行順序。
- 用途:異步執(zhí)行腳本,加快頁面加載速度
2敬飒、基礎(chǔ)用法
2.1邪铲、type = mudle ,使用es6模塊:
<script type = "module">
import {getSomeSthing} from './someSthing.js'
getSomeSthing()
<script>
2.2驶拱、type = defer,
<script src = './someSthing.js' defer><script>
2.3霜浴、type = async
<script src = './someSthing.js' async><script>