1.CommonJS 中的 require/exports 和 ES6 中的 import/export 區別? 2.項目做過哪些性能優化? 3.js 非同步載入的方式? 4.get與post 通訊的區別? 5.為什麼虛擬 dom 會提高性能? ...
1.CommonJS 中的 require/exports 和 ES6 中的 import/export 區別?
CommonJS 模塊的重要特性是載入時執行, 即腳本代碼在 require 的時候,就會全部執行。 一旦出現某個模塊被”迴圈載入”, 就只輸出已經執行的部分, 還未執行的部分不會輸出。 ES6 模塊是動態引用, 如果使用 import 從一個模塊載入變數, 那些變數不會被緩存, 而是成為一個指向被載入模塊的引用, 需要開發者自己保證, 真正取值的時候能夠取到值。 import/export 最終都是編譯為 require/exports 來執行的。 CommonJS 規範規定, 每個模塊內部, module 變數代表當前模塊。 這個變數是一個對象, 它的 exports 屬性(即 module.exports )是對外的介面。 載入某個模塊, 其實是載入該模塊的 module.exports 屬性。 export 命令規定的是對外的介面, 必須與模塊內部的變數建立一一對應關係。
2.項目做過哪些性能優化?
減少 HTTP 請求數
減少 DNS 查詢
使用 CDN
避免重定向
圖片懶載入
減少 DOM 元素數量
減少 DOM 操作
使用外部 JavaScript 和 CSS
壓縮 JavaScript 、 CSS 、字體、圖片等
優化 CSS Sprite
使用 iconfont
字體裁剪
多功能變數名稱分發劃分內容到不同功能變數名稱
儘量減少 iframe 使用
避免圖片 src 為空
把樣式表放在 中
把腳本放在頁面底部
3.js 非同步載入的方式?
渲染引擎遇到 script 標簽會停下來, 等到執行完腳本,繼續向下渲染 defer 是“渲染完再執行”,async 是“下載完就執行”, defer 如果有多個腳本, 會按照在頁面中出現的順序載入, 多個async 腳本不能保證載入順序 載入 es6模塊的時候設置 type=module, 非同步載入不會造成阻塞瀏覽器,頁面渲染完再執行, 可以同時加上async屬性, 非同步執行腳本(利用頂層的this等於undefined這個語法點, 可以偵測當前代碼是否在 ES6 模塊之中)
4.get與post 通訊的區別?
Get 請求能緩存,Post 不能
Post 相對 Get 安全一點點,
因為Get 請求都包含在 URL 里,且會被瀏覽器保存歷史紀錄,
Post 不會,但是在抓包的情況下都是一樣的。
Post 可以通過 request body來傳輸比 Get 更多的數據,Get 沒有這個技術
URL有長度限制,會影響 Get 請求,
但是這個長度限制是瀏覽器規定的,不是 RFC 規定的
Post 支持更多的編碼類型且不對數據類型限制
5.為什麼虛擬 dom 會提高性能?
虛擬 dom 相當於在 js 和真實 dom 中間加了一個緩存, 利用 dom diff 演算法避免了沒有必要的 dom 操作,從而提高性能。 用 JavaScript 對象結構表示 DOM 樹的結構; 然後用這個樹構建一個真正的 DOM 樹, 插到文檔當中當狀態變更的時候,重新構造一棵新的對象樹。 然後用新的樹和舊的樹進行比較, 記錄兩棵樹差異把 2 所記錄的差異應用到步驟 1 所構建的真正的 DOM 樹上,視圖就更新了。