首頁 > web前端 > 前端問答 > es6模組輸出的值是拷貝的嗎

es6模組輸出的值是拷貝的嗎

青灯夜游
發布: 2022-10-18 15:29:56
原創
1174 人瀏覽過

不是,ES6模組輸出的是值的引用,CommonJS模組輸出的才是一個值的拷貝。在ES6模組中,JS引擎對腳本靜態分析的時候,遇到模組載入指令import,就會產生一個只讀引用;等到腳本真正執行時,再根據這個只讀引用,到被載入的那個模組裡面去取值。 ES6模組是動態引用,ES6模組不會快取運行結果,而是動態地去被載入的模組取值,變數總是綁定其所在的模組。

es6模組輸出的值是拷貝的嗎

#本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

瀏覽器載入

預設情況下,瀏覽器是同步載入JavaScript 腳本的,也就是渲染引擎遇到<script>標籤就會停下來,等到執行完腳本,再繼續向下渲染。

如果是外部腳本,也必須加入腳本下載的時間。

如果腳本體積很大,下載和執行的時間就會很長,因此造成瀏覽器堵塞,用戶會感覺到瀏覽器「卡死」了,沒有任何回應。這顯然是很不好的體驗,所以瀏覽器允許腳本非同步加載,下面就是兩種非同步加載的語法。

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
登入後複製

<script>標籤開啟defer或async屬性,腳本就會非同步載入。渲染引擎遇到這一行命令,就會開始下載外部腳本,但不會等它下載和執行,而是直接執行後面的命令

  • defer要等到整個頁面在記憶體中正常渲染結束(DOM 結構完全生成,以及其他腳本執行完成),才會執行;
  • async一旦下載完,渲染引擎就會中斷渲染,執行這個腳本以後,再繼續渲染。

一句話,defer是“渲染完再執行”,async是“下載完就執行”。另外,如果有多個defer腳本,會按照它們在頁面出現的順序加載,而多個async腳本是不能保證加載順序的。

瀏覽器載入 ES6 模組,也使用<script>標籤,但要加入type="module"屬性。瀏覽器對於帶有type="module"<script>,都是非同步載入不會造成阻塞瀏覽器,即等到整個頁面渲染完,再執行模組腳本,等同於開啟了

<script type="module" src="./foo.js"></script>
登入後複製

如果網頁有多個

最新問題
javascript - es6 Null 傳導運算符
來自於 1970-01-01 08:00:00
0
0
0
JavaScript ES6中 Number.isFinite() 和 Number.isNaN()
來自於 1970-01-01 08:00:00
0
0
0
javascript - ES5的閉包用ES6怎麼實現
來自於 1970-01-01 08:00:00
0
0
0
javascript - ES6的generate問題
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板