第33篇

一、CommonJS中的require/exports和ES6中的import/export的區別

CommonJS模塊的重要特性是加載時執行，即腳本代碼在require的時候，就會所有執行。一旦出現某個模塊被「循環加載」，

就只輸出已經執行的部分，還未執行的部分不會輸出。

ES6模塊是動態引用，若是使用import從一個模塊加載變量，那些變量不會被緩存，而是成爲一個指向被加載模塊的引用

，須要開發者本身保證，真正取值的時候可以取到值。

 

import/exports最終都是編譯爲require/exports來執行的，commonJS規定，每一個模塊內部，module變量表明當前模塊，

這個變量是一個對象，它的exports屬性（即module.exports）使對外的接口。加載某個模塊實際上是加載該模塊module.exports

屬性。export命令規定的是對外的接口，必須與模塊內部的變量創建一一對應關係。

 

二、項目作過那些性能優化？

減小HTTP請求數

減小DNS查詢

使用CDN

避免重定向

圖片懶加載

減小DOM元素數量

減小DOM操做

使用外部Javascript和css

壓縮Javascript、css、字體、圖片等

使用CSS Sprite

使用iconfont

字體剪裁

多域名分發分容到不一樣域名

儘可能減小iframe使用

把樣式放置在頭部

把腳本放置在頁面底部

 

三、js異步加載的方式

渲染引擎遇到script標籤會停下來，等到執行完腳本，繼續向下渲染。

defer是「渲染完再執行」，async是「下載完就執行「

defer若是有多個腳本，會按照在頁面中出現的順序加載，

多個async腳本不能保證加載順序

加載es6模塊的時候設置type=module,

異步加載不會形成阻塞瀏覽器，頁面渲染完再執行，能夠同時加上async屬性

異步執行腳本（利用頂層的this等於undefined這個語法點），能夠偵測當前代碼是否在ES6模塊之中

 

四、gei和post通信的區別？

Get請求能緩存，Post不能。

Post相對Get安全一點點，由於Get請求都包含在URL裏，且會被瀏覽器保存歷史記錄，

post不會，可是在抓包的狀況下都是同樣的。

post能夠經過request body來傳輸比get更多的數據，get沒有這個數據

url長度有限制，會影響get請求，可是這個長度限制是瀏覽器規定的，post支持更多的編碼類型且不對數據類型限制

 

五、爲何虛擬dom會提升性能？

虛擬dom至關於在js和真實dom中間加了一個緩存，利用dom diff算法避免了沒有必要的dom操做，從而提升性能。

用Javascript對象結構表示DOM樹的解構，而後用這個樹構建一個真正的DOM樹，插到文檔當中，當狀態變動的時候，從新構造一棵新的對象樹，

而後用新的樹和舊的樹進行比較，記錄2棵樹的差別，，把記錄的差別應用到前面所構建的真正的DOM樹上，視圖就更新了。