撩課-Web大前端每天5道面試題-Day33

撩課學院發表於2019-01-12

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 樹上,檢視就更新了。
 

 

 

相關文章